kawho

zero programming knowledge and Need some advice on creating 1 very simple page

Recommended Posts

Hi,

I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "http://pixijs.io/pixi-particles-editor/" and create an emitter so they could use that particle in our designs.  I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this http://www.html5gamedevs.com/topic/34892-pixi-particles-emitter-how-to-make-it-move-from-point-to-point/

the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ???

is the place to go to get information?

so far I think I need to create a server? 

install Pixi js (i don't know how)

install npm ?? (I don't know why?)

this is very confusing write know

 

 

animejs.gif

Share this post


Link to post
Share on other sites

To do that, you need basic knowledge of html and javascript. Put "pixi.js" , "pixi-particles.js" on your html page.  Pixi is here: https://github.com/pixijs/pixi.js/releases , pixi-particles here: https://github.com/pixijs/pixi-particles/tree/master/dist

Make a script like https://pixijs.io/examples/#/basics/basic.js but with particles, maybe copy example from pixi-particles README: https://github.com/pixijs/pixi-particles#sample-usage

Dont waste time on npm, webpack and other tools, you can learn them later if you'll go web developer path (personally, i hate webpack and prefer typescript)

This is the best tutorial for pixi so far - https://github.com/kittykatattack/learningPixi <-- HERE IS THE START!

As for javascript in general, try to find that book online: http://shop.oreilly.com/product/9780596805531.do , no need to buy it, there are copies of it everywhere. Dont tell Flanagan I said that, or he'll ban me from his twitter.

Good Luck!

Share this post


Link to post
Share on other sites

After couple of hours heating my head against wall, I got the Pixi working (the rotating image and canvases black square examples ).

but Now I hit another snag and can not figure why this code no-work!!!

can anybody please have a look and tell me what i'm doing wrong??

I'm trying to run a html file called  "part.html" with below code:

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Cartoon Smoke</title>
        <meta name="description" content="smoke explosion">
        <link rel="stylesheet" href="css/main.css">

        <!-- Required dependencies -->
        <script src="/pixi/pixi.min.js"></script>
        <script src="/pixi/pixi-particles.min.js"></script>

        <!-- Example scaffolding -->
        <script src="/pixi/ParticleExample.js"></script>

    </head>
    <body>
        <div id="framerate"></div>
        <div id="instructions">Click Anywhere</div>
        <canvas id="stage" width="400" height="400"></canvas>
        <script>

            // See js/ParticleExample.js for actual setup
            new ParticleExample(
                // The image to use
                ["images/image.jpg"],

                // Emitter configuration, edit this to change the look
                // of the emitter
                {
                    "alpha": {
                        "start": 0.74,
                        "end": 0
                    },
                    "scale": {
                        "start": 0.1,
                        "end": 1.2
                    },
                    "color": {
                        "start": "eb8b58",
                        "end": "575757"
                    },
                    "speed": {
                        "start": 700,
                        "end": 50
                    },
                    "startRotation": {
                        "min": 0,
                        "max": 360
                    },
                    "rotationSpeed": {
                        "min": 0,
                        "max": 200
                    },
                    "lifetime": {
                        "min": 0.4,
                        "max": 0.7
                    },
                    "blendMode": "normal",
                    "frequency": 0.001,
                    "emitterLifetime": 0.2,
                    "maxParticles": 100,
                    "pos": {
                        "x": 0,
                        "y": 0
                    },
                    "addAtBack": true,
                    "spawnType": "point"
                });
        </script>
    </body>
</html>

the pixi.min.js , pixi-particles.min.js and ParticleExample.js downloaded from GitHub. 

 

 

part.PNG

Share this post


Link to post
Share on other sites

Thanks Ivan, after lots trial and error, I got the particle working!!! this is my code: the only problem is it creating a particle where you click. I wasn't able to make it go around a square like the 1st example. in an early post, you told someone to just change the spawn pos:

still can not figure it out! 

 

 

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Sparks</title>
		<meta name="description" content="sparks emitter">
		<link rel="stylesheet" href="css/main.css">

			<!-- Required dependencies -->
		<script src="pixi/pixi.js"></script>
		<script src="pixi/pixi-particles.js"></script>

		<!-- Example scaffolding -->
		<script src="pixi/ParticleExample.js"></script>

	</head>
	<body>
		<div id="framerate"></div>
		<div id="instructions">Click Anywhere</div>
		<canvas id="stage" width="400" height="400"></canvas>
		<script>

			// See js/ParticleExample.js for actual setup
			new ParticleExample(
				// The image to use
				["images/star4.png"],

				// Emitter configuration, edit this to change the look
				// of the emitter
				{
					"alpha": {
		"start": 0.7,
		"end": 0.72
	},
	"scale": {
		"start": 0.63,
		"end": 0.16,
		"minimumScaleMultiplier": 1
	},
	"color": {
		"start": "#ffefcc",
		"end": "#ffbb00"
	},
	"speed": {
		"start": -15,
		"end": 15,
		"minimumSpeedMultiplier": 4
	},
	"acceleration": {
		"x": 0,
		"y": 0
	},
	"maxSpeed": 0,
	"startRotation": {
		"min": 0,
		"max": 0
	},
	"noRotation": false,
	"rotationSpeed": {
		"min": 0,
		"max": 0
	},
	"lifetime": {
		"min": 0.001,
		"max": 1
	},
	"blendMode": "screen",
	"frequency": 0.001,
	"emitterLifetime": 2,
	"maxParticles": 500,
	"pos": {
		"x": 0,
		"y": 0
	},
	"addAtBack": false,
	"spawnType": "circle",
	"spawnCircle": {
		"x": 0,
		"y": 0,
		"r": 4
					}
				});
		</script>
	</body>
</html>

 

Part3.jpg

Share this post


Link to post
Share on other sites

I forked someones codepen and set you up a quick example. A codepen is useful if your trying to collab with people.  You will need something to animate it with, in this example I used TweenMax but there are lots of others. 

https://codepen.io/owlzy-the-vuer/pen/PBGMLy

Have a little read of the code and try commenting out the line in the tweenmax onUpdate function where the emitters spawn position is set and you will see that the sprite is being animated by tweenmax, and I just use its position to set where the particles spawn.  You could also add sprite.renderable = false; and the sprite will be hidden. You can then set up a more complex animation to achieve whatever effect your after. 

Share this post


Link to post
Share on other sites

I looked at the TweenMax example and I think it made it more confusing for me!!! 

I try to see if I can make the pixi works or find someone to do it for me for now. 

thanks, anyways

 

 

Share this post


Link to post
Share on other sites

i use TweenMax from Gsap in pixi and it work fine.
But you will need to study all the API.
But you have also a nice Easing library here for animate all object in all language.
http://robertpenner.com/easing/

All math code are free.
Here a script example how this guys use it.

https://pastebin.com/WqZ1Sfs5

I prefer TweenMax, but if you no have time to study all the API, this one are a good solution.

Share this post


Link to post
Share on other sites

 

the problem is (embarrassingly) I don't know what is tweenmax!!!  as I said earlier I don't have the programming background and what I did so far feels like a very haphazard and random as I just copy and paste code until its kinda worked!!! first, thanks for your patient and help, especially Ivan! you are a legend!

 yes, the thing is I don't know what is tween max is ? is it another library like pixi or something else!!! I'm saying that because the codpen example was a bit confusing to me! it wasn't like other HTML pages I saw with pixi, for example, the code was in 3 deferent pages ... yes, I didn't understand how it working.

Thanks again,

by the way,  I got the Java book Ivan recommended. still a long way to go! 

 

Share this post


Link to post
Share on other sites

its another lib. there are many libs that deal with Tween's , its one of them. pixi on its own doesnt have continuous animations. If you worked with CSS or Flash, you know what those parameters mean, and you only need is to study API of particular tween lib (find docs or manual for it)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.