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

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.