bilboon

Members
  • Content Count

    11
  • Joined

  • Last visited

About bilboon

  • Rank
    Member

Profile Information

  • Gender
    Not Telling
  • Location
    FR/Bretagne
  1. For me, the main advantage of encapsulating Phaser's display objects inside logic classes, is the ability to define an API which feets my game requirements without clobbering Phaser API and the possibility to manage different type of views (Sprite, Image, Group, ...) transparently. For exemple a grid component can have a view of type Group with multiple sprite children: var Grid = Class({ init: function (size, w, h){ this.width = w; this.height = h; this.cell_size = size; this.events = { onCellClicked: new Phaser.Signal() }; this.view = null; }, destroy: function (){ this.events.onCellClicked.removeAll(); this.dispose(); }, render: function (){ this.dispose(); this.view = this.game.add.group(); // create all cells for (var i=0; i<this.width; i++){ for (var j=0; j<this.height; j++){ var cell = this.game.make.sprite(i*this.cell_size, j*this.cell_size, 'cell_texture'); cell.inputEnabled = true; cell.events.onInputDown.add(function (){ this.events.onCellClicked.dispatch(i, j); }, this); this.view.add(cell); } } }, dispose: function (){ if (this.view){ this.view.destroy(); this.view = null; } }});var grid = new Grid(50, 10, 10);grid.events.onCellClicked.add(function (i, j){ console.log("cell "+i+" "+j+" clicked");});grid.render(); Bonus, i post here the function Class that i writed for simpler Class definition, and allowing simili heritage: var Helpers = { createClass: function (prototype, ParentClass){ var Klass = ParentClass ? function (){ ParentClass.apply(this, arguments); } : function (){ this.init.apply(this, arguments); }; var parent_prototype = ParentClass ? ParentClass.prototype : { init: function (){} }; Klass.prototype = {}; _.assign(Klass.prototype, parent_prototype, prototype, {constructor: Klass}); return Helpers.extendable(Klass); }, extendable: function (Klass){ Klass.extend = function (prototype){ return Helpers.createClass(prototype, Klass); }; return Klass; }};var Class = Helpers.createClass;//------------------------------------// usage var A = Class({ init: function (){ this.name = 'A'; }, print: function (){ console.log(this.name); }});var B = A.extend({ init: function (){ this.name = 'B'; }});var a = new A();var b = new B();a.print(); // -> Ab.print(); // -> B
  2. I usually use aggregation and encapsulate phaser sprite inside my logic classes. var Tile = Class({ init: function (){ this.dx = 1; this.view = null; }, destroy: function (){ this.dispose(); }, update: function (){ this.view.x += this.dx; }, render: function (){ this.dispose(); this.view = this.game.add.sprite(0, 0, 'blabla'); this.view.update = _.bind(this.update, this); }, dispose: function (){ if (this.view){ this.view.destroy(); this.view = null; } }});// usagevar tile = new Tile();tile.render();tile.destroy();
  3. I solved my pb creating a simili "garbage_collector" and calling it in state.update. var gc = { items: [], add: function (item){ gc.items.push(item); }, clear: function (){ for (var i=0, l=gc.items.length; i<l; i++){ gc.items[i].destroy(); } gc.items = []; }};function create () { var sprite = awesome_sprite(); sprite.events.onAnimationComplete.addOnce(function (){ gc.add(sprite); });}function update() { gc.clear();}
  4. Hi all, I'm experiencing issue when trying to destroy a sprite at the end of an animation (phaser 2.2). var sprite = game.add.sprite(0, 0, 'my_atlas'); // pseudo codesprite.animations.play('my_anim', 25, false);sprite.events.onAnimationComplete.addOnce(function (){ sprite.destroy();});Error pop in Phaser.Animation.update : this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);Uncaught TypeError: Cannot read property '20' of nullI think onAnimationComplete event is dispatched in the update method synchronously so sprite is destroyed and properties for proper update execution are missing. How would you solve this use case ? Thank you.
  5. Just found this thread, searching about Phaser Signals. In phaserdragoon's exemple, he's creating two signals per unit. The two signals could be declared in game state and shared between all units : TestGame.Unit = function (game, x, y, faction, job) { var frameIdx = faction * TestGame.jobs.length + job; Phaser.Sprite.call(this, game, x, y, 'spritesheet-units', frameIdx); this.name = 'unit'; /* INITIALIZATION */ this.inputEnabled = true; this.input.useHandCursor = true; this.events.onInputDown.add(this.select, this); this.events.onInputUp.add(this.release, this); return this;};TestGame.Unit.prototype = Object.create(Phaser.Sprite.prototype);TestGame.Unit.prototype.constructor = TestGame.Unit;TestGame.Unit.prototype.select = function () { this.game.events.onUnitSelected.dispatch(this);};...TestGame.Unit.prototype.selectMove = function () { this.game.events.onUnitMoveSelect.dispatch(this); this.game.input.onUp.add(this.processClickMove, this);};TestGame.Unit.prototype.processClickMove = function (pointer) { if (pointer.duration <= 150) { // in case they are dragging this.moveTo({x: pointer.worldX, y:pointer.worldY}); this.game.input.onUp.remove(this.processClickMove, this); }}; TestGame.Game.prototype = { create : function () { if (!this.game.events) this.game.events = {}; this.game.events.onUnitSelected = new Phaser.Signal(); this.game.events.onUnitMoveSelect = new Phaser.Signal(); this.game.events.onUnitSelected.add(this.handleUnitSelect, this); this.game.events.onUnitMoveSelect.add(this.handleUnitMoveSelect, this); }, update : function () { ... } ... spawnUnit : function (castle) { var unit; // game, x, y, faction, icon unit = new TestGame.Unit(this.game, castle.x + 16, castle.y + 16, castle.properties.faction, this.game.rnd.integerInRange(0, TestGame.jobs.length-1) ); this.game.add.existing(unit); party.revive(100); if (TestGame.factions[unit.properties.faction] === 'player') { this.playerParties.add(unit); } else if (unit.properties.faction === 'foe') { this.foeParties.add(unit); } else { this.neutralParties.add(unit); } }, handleUnitSelect : function (unit) { if (TestGame.factions[unit.properties.faction] === 'player') { this.playerUnitSelected = unit; this.selectedUnitMenu.clearButtonHandle('move'); this.selectedUnitMenu.clearButtonHandle('cancel'); this.selectedUnitMenu.addButtonHandle('move', unit.selectMove, unit); this.selectedUnitMenu.addButtonHandle('cancel', this.selectedUnitMenu.hide, this.selectedUnitMenu); this.selectedPartyMenu.show({ x : party.x + 64, y : party.y }); } }, handleUnitMoveSelect : function (unit) { this.selectedUnitMenu.hide(); }};
  6. Thx a lot for this excellent use case ! Emitter usage is now much much clear. I adapted the max number of particules in my emitter to the max number of simultaneous displayed burst and created singleton emitter per effect. Inactive particles stayed in phaser but the fps is not dropping so quickly. I think i can live with that for the moment and later try to force old emitters GC if it's an issue. May be it could be interesting to add a note about the "recycle pattern" in doc, cause it seems like a way to go in phaser (or maybe i am just a noob who didn't search very well).
  7. Ok thx a lot for the response. You say there's "no real need to destroy emitter", but the fps has decreased even if there's no animation played like if the old inactive emitter/particles had an incidence on phaser velocity. Sample use case : blood effect, which can be used simulteany on different sprites (attack zone). If 5 sprites are shot at the same time, I need 5 "blood" emitters. Acquiring/releasing/creating emiter from a pool seems to me overcomplexe for a basic use case. I gonna try to destroy everything to see if it makes difference.
  8. Hi, I did some tests with the sample rain effect which creates a lot of particules. My dev env : phaser-dev branch, latest chrome, linux. I used a modified version of the rain emitter (no loop, its stops after 100 particules emitted): i launched it 10, 20, 30 times... Game objects count is incrising and i quickly have thousands of inactive objects in game objects group. FPS is decreasing : starting from ~30/40 fps, it ends at ~ 15/20 fps, and fps is never upping after that even if there's no animation played. Code of emitter: var emitter = game.add.emitter(game.world.centerX, 0, 400);emitter.width = game.world.width;emitter.makeParticles('rain');emitter.maxParticleScale = 1.5;emitter.minParticleScale = 0.5;emitter.setYSpeed(500, 800);emitter.setXSpeed(-5, 5);emitter.minRotation = 0;emitter.maxRotation = 0;emitter.start(false, 600, 2, 100);Is it a normal behavior ? Must i systematically destroy emitter at the end of the animation ? Can i use the onComplete callback for that ? May be the phaser preferred way is defining a pool of emitters and recycling them ? But if i have a lot of different effects, i will be facing the same issue with a majority of one shot effects in my pool. Am i wrong, does somebody expreriencing the same problem or have advice / use case about that ? Thanks a lot.
  9. Hi, i've finally found time to investigate a bit. "Tween.to" is creating a second tween which is chained to previous tween so : t1.to(...).to(...).loop()This creates two chained tweens : t1 -> t2 -> t1 -> ... Only one of this tween is runned by manager at a time. The problem is that when we call t1.stop() and t1 is not scheduled in manager (because t2 is running), the manager is not marking it to pendingDelete, and t1 is restarted per t2 when finishing and tweens are looping infinitely. I fixed the bug modifying Tween.stop: /** * Stops the tween if running and removes it from the TweenManager. If there are any onComplete callbacks or events they are not dispatched. * * @method Phaser.Tween#stop * @return {Phaser.Tween} Itself. */ stop: function () { this.isRunning = false; this.pendingDelete = true; // always force pendingDelete this._manager.remove(this); return this; },Not sure if there's no border effect.
  10. Hi all, Am i wrong or is it a bug ? var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', { create: create, update: update});var t1;function create(){ var g = game.add.graphics(); g.beginFill(0xFFFFFF, 0.5); g.drawRect(0, 0, 200, 200); t1 = game.add.tween(g); t1.to({ alpha: 0.1 }, 1000, null).to({ alpha: 0.5 }, 1000, null).loop(); t1.start(); t1.stop();}function update(){ console.log(t1._manager._tweens.length); // log: 1, should be 0 ?}Thx.
  11. Hi all, I'm new to phaser and i'm trying to use it in a webapp powered by angularjs. My canvas is using ~80% of the window (the other 20% are reserved for a topbar and contextual panel). I want to scale canvas content to fill the 80%, but Phaser.StageScaleMode seems to use window.innerWidth and window.innerHeight to compute the ratio scaling in SHOW_ALL and EXACT_FIT mods. Canvas container size is managed with angular and computed on fly when window is resized. How can i force phaser to adapt the scaling ratio to the canvas container size ? Must i patch Phaser.StageScaleMode, recreate a Phaser.Game on each resize, or is there a prefered hidden trick ? Thx