feudalwars

[Phaser] Strike Tactics: free-to-play HTML5 RTS

Recommended Posts

@feudalwars First of all, really impressive work, the game looks and plays fantastic! On a technical note, I was wondering if you'd mind sharing how you pulled off good performance with all of the particles you've (trails, explosions, etc). We've been trying to get some basic smoke trails setup in a game we are working on using Particle Storm, and with just a few on screen the performance tanks. Are you using a custom particle system or any other strategy to keep it running smooth with so much going on?

Share this post


Link to post
Share on other sites
On 9/9/2017 at 4:22 PM, GoldFire said:

@feudalwars First of all, really impressive work, the game looks and plays fantastic! On a technical note, I was wondering if you'd mind sharing how you pulled off good performance with all of the particles you've (trails, explosions, etc). We've been trying to get some basic smoke trails setup in a game we are working on using Particle Storm, and with just a few on screen the performance tanks. Are you using a custom particle system or any other strategy to keep it running smooth with so much going on?

Hey sorry, I didn't see your reply until now. 

I do use the particle storm emitter but frankly i could have gotten the job done just as easily with the built-in vanilla Phaser emitter. The main advantage of PS is that it comes with tons of juicy examples to work from. 

Surprisingly, particles have never been a bottleneck for me. One thing you can do is to only emit particles when the object is in camera. Here's a look at my code which does the smoke and vapor trails (I don't think there is any other use of particle emitters in my game). Another thing I do is create an index of all the emitters I will need and re-use the same emitter the next time I need it. The rocketTrailEmitter global keeps a reference. Note that this function has default options which can be overriden by passing an options object. Hope it helps!

function createSmokeTrail(rocket, uniqueEmitterKey, howOftenEmit, imageKey, blendMode, justOnce, emitX, emitY, options) {
    if (!enableEmitters) {
        return;
    }
    if (rocketTrailEmitter[uniqueEmitterKey] == undefined) {

        var lifespan = {
            min: 500,
            max: 1000
        };

        var scale = {
            min: 0.10,
            max: 0.30
        };
        var vx = {
            value: {
                min: -0.50,
                max: 0.50
            },
            control: [{
                x: 0,
                y: 0
            }, {
                x: 0.5,
                y: 1
            }, {
                x: 1,
                y: 0
            }]
        };
        var vy = {};
        if (options != undefined) {
            if (options.lifespan != undefined) {
                lifespan = options.lifespan;
            }
            if (options.scale != undefined) {
                scale = options.scale;
            }

            if (options.vx != undefined) {

                vx.value = options.vx;

            }

            if (options.vy != undefined) {
                vy = {
                    value: options.vy,
                    control: [{
                        x: 0,
                        y: 0
                    }, {
                        x: 0.5,
                        y: 1
                    }, {
                        x: 1,
                        y: 0
                    }]
                }

            }
        }

        var effect = {
            image: 'bullets',
            blendMode: blendMode,
            lifespan: lifespan,
            scale: scale,
            vx: vx,
            vy: vy,
            alpha: {
                value: 1,
                control: [{
                    x: 0,
                    y: 0
                }, {
                    x: 0.2,
                    y: 1
                }, {
                    x: 1,
                    y: 0
                }]
            },
            rotation: {
                value: {
                    min: -180,
                    max: 180
                },
                delta: {
                    min: -5,
                    max: 5
                }
            },
            frame: getFrameIndexFromAll(undefined, imageKey, false, game.cache._cache.image.bullets),
        };

        manager.addData(uniqueEmitterKey, effect);

    }

    if (!justOnce) {
        rocketInterval(rocket, uniqueEmitterKey, howOftenEmit);

    } else {
        if (rocket == undefined) {
            //   if (coordsInCamera(emitX, emitY)) {
            rocketTrailEmitter.emit(uniqueEmitterKey, emitX, emitY);
            //    }
        } else {
            //   if (coordsInCamera(rocket.x, rocket.y)) {
            rocketTrailEmitter.emit(uniqueEmitterKey, rocket.x, rocket.y);
            //  }
        }

    }

}






function rocketInterval(rocket, uniqueEmitterKey, howOftenEmit) {

    rocket.rocketInt = setInterval(function() {
        if (rocket.alive == false || rocket == null || rocket == undefined || rocket.crashing) {
            window.clearInterval(rocket.rocketInt);
            return;
        }
        if (game.paused) {
            return;
        }

        if (rocket.inCamera && rocket.visible) {

            rocketTrailEmitter.emit(uniqueEmitterKey, rocket.x, rocket.y);
        }
    }, howOftenEmit);
    
    rocketInts.push(rocket.rocketInt); 

}

 

 

Share this post


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

  • Recently Browsing   0 members

    No registered users viewing this page.