kawho Posted July 13, 2018 Share Posted July 13, 2018 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 13, 2018 Share Posted July 13, 2018 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! kawho 1 Quote Link to comment Share on other sites More sharing options...
kawho Posted July 13, 2018 Author Share Posted July 13, 2018 Thanks, Ivan. I give it a go this weekend and let you know if I was successful. thanks Again for the quick reply I really appreciate the help!!! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
kawho Posted July 16, 2018 Author Share Posted July 16, 2018 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 16, 2018 Share Posted July 16, 2018 It should work. Give me more details. Whats happening in the console? kawho 1 Quote Link to comment Share on other sites More sharing options...
kawho Posted July 17, 2018 Author Share Posted July 17, 2018 I had 3 errors, 1st one was about missing CSS file.. I created a main.css file and it gone. now I get this errors Quote Link to comment Share on other sites More sharing options...
kawho Posted July 17, 2018 Author Share Posted July 17, 2018 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 17, 2018 Share Posted July 17, 2018 first, your "particles.min.js" file is wrong. you copied something else. Second, don't use "min" files unless you really need minified stuff, they only obfuscate your problems. kawho 1 Quote Link to comment Share on other sites More sharing options...
kawho Posted July 19, 2018 Author Share Posted July 19, 2018 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> Quote Link to comment Share on other sites More sharing options...
Owlzy Posted July 19, 2018 Share Posted July 19, 2018 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. kawho 1 Quote Link to comment Share on other sites More sharing options...
kawho Posted July 19, 2018 Author Share Posted July 19, 2018 I have to say, you guys are geniuses!!!? I give it a go tomorrow. Thanks Quote Link to comment Share on other sites More sharing options...
kawho Posted July 20, 2018 Author Share Posted July 20, 2018 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 20, 2018 Share Posted July 20, 2018 Pixi is small rendering library, it doesnt have animations inside. TweenMax is one of libraries for "tween" concept which you have to understand if you dont want to learn math and algorithms for animations. CSS have animations too, why is that problem for you? kawho 1 Quote Link to comment Share on other sites More sharing options...
jonforum Posted July 20, 2018 Share Posted July 20, 2018 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. Quote Link to comment Share on other sites More sharing options...
kawho Posted July 21, 2018 Author Share Posted July 21, 2018 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! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 22, 2018 Share Posted July 22, 2018 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) kawho 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.