Jump to content

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


kawho
 Share

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

Link to comment
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!

Link to comment
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

Link to comment
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

Link to comment
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. 

Link to comment
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.

Link to comment
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! 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...