1-800-STAR-WARS

Members
  • Content Count

    84
  • Joined

  • Last visited


Reputation Activity

  1. Like
    1-800-STAR-WARS got a reaction from Finders_Keepers in Save game data locally   
    Mainly backwards compatibility - something like Amplify allows you to store using a single API which gracefully degrades from localStorage to sessionStorage, globalStorage, userData and finally an in-memory store if none of the above is available. This ensures compatibility with browsers as far back as IE5... Not that your game would otherwise work in that browser
  2. Like
    1-800-STAR-WARS got a reaction from threeninenineone in listener functions.. how do i properly use them?   
    1. A few ways, but the easiest is probably:
    this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () { a(param1, param2);}, this); 2. That might work how you've done it if the scope is correct - but it'd be better as:
    this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(YourClass.prototype.a, this); The second argument, in your case 'this', is the context in which the first argument will be called with.
  3. Like
    1-800-STAR-WARS reacted to mattstyles in Easy Cheating? Changing Game States Inside the Console   
    Yes you can stop them, just stop declaring globals variables (its not a terrible idea, but its almost always best avoided, outside of dev anyway). This doesn't stop all cheating of course, but it solves your immediate issue/s.
    Use a proper module system or hack a simple one yourself (google for JS namespacing).
    There is a caveat here that I haven't found a nice way to encapsulate either Pixi or Phaser (both dump a global) but their globals are only used to instantiate and control properties, so they won't be of any use for people aiming to fiddle with your game.
  4. Like
    1-800-STAR-WARS got a reaction from brendaespadas in Anyone working on a point and click adventure?   
    I'm a massive fan of the old Lucasarts/Adventuresoft/Revolution point and clicks, and I've been thinking about writing a Phaser plugin to provide helpers for making similar games. What kind of features would be useful do you reckon?
    Some kind of level editor - tilemaps won't cut it but needs 2d backgrounds with freeform collision data/preset paths and items/characters Pathfinding Inventory/verb system Dialog system (subtitles?) Save/load Some kind of world progression trigger, eg Monkey Island when you do x action y person appears in town etc
  5. Like
    1-800-STAR-WARS got a reaction from gaelbeltran in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  6. Like
    1-800-STAR-WARS got a reaction from Pooya72 in listener functions.. how do i properly use them?   
    1. A few ways, but the easiest is probably:
    this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () { a(param1, param2);}, this); 2. That might work how you've done it if the scope is correct - but it'd be better as:
    this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(YourClass.prototype.a, this); The second argument, in your case 'this', is the context in which the first argument will be called with.
  7. Like
    1-800-STAR-WARS got a reaction from spinnerbox in Anyone working on a point and click adventure?   
    I'm a massive fan of the old Lucasarts/Adventuresoft/Revolution point and clicks, and I've been thinking about writing a Phaser plugin to provide helpers for making similar games. What kind of features would be useful do you reckon?
    Some kind of level editor - tilemaps won't cut it but needs 2d backgrounds with freeform collision data/preset paths and items/characters Pathfinding Inventory/verb system Dialog system (subtitles?) Save/load Some kind of world progression trigger, eg Monkey Island when you do x action y person appears in town etc
  8. Like
    1-800-STAR-WARS got a reaction from feudalwars in Health Bars?   
    Here's a little snippet for graphics based healthbars that go from green to red as health gets lower (copied straight out of a game and minimally edited for context so hopefully it makes sense)
    this.healthbar = game.add.graphics(0,0);this.group.add(this.healthbar); // this.group being a pre-initialised group for this entity...this.hp = 20;this.totalhp = 20;this._lasthp = 0;if (this._lasthp !== this.hp) { this.healthbar.clear(); var x = (this.hp / this.totalhp) * 100; var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0); this.healthbar.beginFill(colour); this.healthbar.lineStyle(5, colour, 1); this.healthbar.moveTo(0,-5); this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5); this.healthbar.endFill();}this._lasthp = this.hp; Here's utils.rgbToHex:
    rgbToHex: function (r, g, { return "0x" + ((1 << 24) + (r << 16) + (g << 8) + .toString(16).slice(1);} (I think there's already a function somewhere in Phaser to do that part but when I wrote the code I wasn't aware of it)
     
    Also config.tileSize is, predictably, the size of tiles in px (this was a top down game) but you can specify whatever width you want the full bar to be there. This was written a while ago so I have no idea if it works for later versions of Phaser but it's fairly simple so it should do.
  9. Like
    1-800-STAR-WARS got a reaction from salcapolupo in Anyone working on a point and click adventure?   
    I'm a massive fan of the old Lucasarts/Adventuresoft/Revolution point and clicks, and I've been thinking about writing a Phaser plugin to provide helpers for making similar games. What kind of features would be useful do you reckon?
    Some kind of level editor - tilemaps won't cut it but needs 2d backgrounds with freeform collision data/preset paths and items/characters Pathfinding Inventory/verb system Dialog system (subtitles?) Save/load Some kind of world progression trigger, eg Monkey Island when you do x action y person appears in town etc
  10. Like
    1-800-STAR-WARS got a reaction from L2L2L in Health Bars?   
    Here's a little snippet for graphics based healthbars that go from green to red as health gets lower (copied straight out of a game and minimally edited for context so hopefully it makes sense)
    this.healthbar = game.add.graphics(0,0);this.group.add(this.healthbar); // this.group being a pre-initialised group for this entity...this.hp = 20;this.totalhp = 20;this._lasthp = 0;if (this._lasthp !== this.hp) { this.healthbar.clear(); var x = (this.hp / this.totalhp) * 100; var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0); this.healthbar.beginFill(colour); this.healthbar.lineStyle(5, colour, 1); this.healthbar.moveTo(0,-5); this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5); this.healthbar.endFill();}this._lasthp = this.hp; Here's utils.rgbToHex:
    rgbToHex: function (r, g, { return "0x" + ((1 << 24) + (r << 16) + (g << 8) + .toString(16).slice(1);} (I think there's already a function somewhere in Phaser to do that part but when I wrote the code I wasn't aware of it)
     
    Also config.tileSize is, predictably, the size of tiles in px (this was a top down game) but you can specify whatever width you want the full bar to be there. This was written a while ago so I have no idea if it works for later versions of Phaser but it's fairly simple so it should do.
  11. Like
    1-800-STAR-WARS got a reaction from TNelson in Save game data locally   
    Mainly backwards compatibility - something like Amplify allows you to store using a single API which gracefully degrades from localStorage to sessionStorage, globalStorage, userData and finally an in-memory store if none of the above is available. This ensures compatibility with browsers as far back as IE5... Not that your game would otherwise work in that browser
  12. Like
    1-800-STAR-WARS got a reaction from amuseum in Health Bars?   
    Here's a little snippet for graphics based healthbars that go from green to red as health gets lower (copied straight out of a game and minimally edited for context so hopefully it makes sense)
    this.healthbar = game.add.graphics(0,0);this.group.add(this.healthbar); // this.group being a pre-initialised group for this entity...this.hp = 20;this.totalhp = 20;this._lasthp = 0;if (this._lasthp !== this.hp) { this.healthbar.clear(); var x = (this.hp / this.totalhp) * 100; var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0); this.healthbar.beginFill(colour); this.healthbar.lineStyle(5, colour, 1); this.healthbar.moveTo(0,-5); this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5); this.healthbar.endFill();}this._lasthp = this.hp; Here's utils.rgbToHex:
    rgbToHex: function (r, g, { return "0x" + ((1 << 24) + (r << 16) + (g << 8) + .toString(16).slice(1);} (I think there's already a function somewhere in Phaser to do that part but when I wrote the code I wasn't aware of it)
     
    Also config.tileSize is, predictably, the size of tiles in px (this was a top down game) but you can specify whatever width you want the full bar to be there. This was written a while ago so I have no idea if it works for later versions of Phaser but it's fairly simple so it should do.
  13. Like
    1-800-STAR-WARS got a reaction from ekstrakt in Health Bars?   
    Here's a little snippet for graphics based healthbars that go from green to red as health gets lower (copied straight out of a game and minimally edited for context so hopefully it makes sense)
    this.healthbar = game.add.graphics(0,0);this.group.add(this.healthbar); // this.group being a pre-initialised group for this entity...this.hp = 20;this.totalhp = 20;this._lasthp = 0;if (this._lasthp !== this.hp) { this.healthbar.clear(); var x = (this.hp / this.totalhp) * 100; var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0); this.healthbar.beginFill(colour); this.healthbar.lineStyle(5, colour, 1); this.healthbar.moveTo(0,-5); this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5); this.healthbar.endFill();}this._lasthp = this.hp; Here's utils.rgbToHex:
    rgbToHex: function (r, g, { return "0x" + ((1 << 24) + (r << 16) + (g << 8) + .toString(16).slice(1);} (I think there's already a function somewhere in Phaser to do that part but when I wrote the code I wasn't aware of it)
     
    Also config.tileSize is, predictably, the size of tiles in px (this was a top down game) but you can specify whatever width you want the full bar to be there. This was written a while ago so I have no idea if it works for later versions of Phaser but it's fairly simple so it should do.
  14. Like
    1-800-STAR-WARS got a reaction from hubert in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  15. Like
    1-800-STAR-WARS got a reaction from FJGuerrero in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  16. Like
    1-800-STAR-WARS got a reaction from lewster32 in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  17. Like
    1-800-STAR-WARS got a reaction from BitOfGold in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  18. Like
    1-800-STAR-WARS got a reaction from dirkk0 in Pixi Raycaster   
    You might have seen the 265 line js raycaster going around recently - I decided to give it a shot myself on this cloudy Sunday afternoon, and implement it in Pixi (as it might be easier down the line to add sprites, use masking, shaders, etc).
     
    The code isn't documented at all really and is questionably structured (using browserify modules), but I basically just followed this tutorial while refactoring for convenience along the way, and adapted some bits for Pixi. I'm hoping to improve it further and document it properly, but I think it works quite well for a couple of hours' work.
     
    Anyway, here's the demo and here's the code. Arrow keys to move/turn, space to 'fire' (though all that does it play the firing animation ). I've not tested it anywhere other than my laptop in Chrome, so let me know if it runs badly/breaks - it doesn't seem to like Safari, and I've not tried it on mobile at all. If it does run badly, this is a relatively high resolution (800x450) - you can set the resolution in the 'config.js' file, and the FOV is controlled by the 'plane.x' property in camera.js. It runs smoothly in Chrome even at 1920x1080 - though the skybox breaks as it was a last minute addition
     
    (should note - textures are ripped from wolfenstein and the skybox is taken from the original demo above)
  19. Like
    1-800-STAR-WARS got a reaction from altergo in code structure frameworks   
    A common game development pattern is the use of entity component systems - here's a popular one: http://www.ashframework.org/ (js port: https://github.com/brejep/ash-js)
  20. Like
    1-800-STAR-WARS reacted to spmurrayzzz in Phaser + requirejs   
    Thanks @david and @Lewis — appreciate the replies. 

    I never thought about the idea that some devs would be anti-watch, but I totally understand why. In my most recent project, the grunt build takes less than 2s on average so I don't mind waiting for that to happen on every save. But at work, our JS builds take 20-30 seconds on average due to an exceedingly large code base. In light of that we made a config option that will use an index file of several script tags vs a single script tag depending on whether you're in development or production. The script dependencies are just managed in a separate JSON file.

    Personally, in production, I've always believed in lowering the amount of requests as much as humanly possible to make time-to-glass the best it can possibly be. Clearly in dev this is a phantom problem. As always, its a balancing act of convenience and performance.

    Thanks again for giving some clarity.
  21. Like
    1-800-STAR-WARS got a reaction from Dream Of Sleeping in Texture Error: frame does not fit inside the base Texture dimensions   
    The 'allow rotation' and 'trim mode' settings need to be turned off or you might run into these errors if the texture size isn't big enough and it tries to do tricks to pack the images in that PIXI doesn't support (yet)
  22. Like
    1-800-STAR-WARS reacted to rich in [Famo.us] Mobile wrapper   
    So much vc money for a bunch of css3 transforms 
     
    Let's face it, their wrapper wouldn't have to be that great to beat PhoneGap! and I'm dubious about how well it will perform for games (everything about famous reeks of apps), but it will be interesting to test for sure.
  23. Like
    1-800-STAR-WARS reacted to rich in What makes Pixi faster than Easel?   
    getBounds is only called when you need it (not every frame), so the impact of that isn't much of an issue - but I agree it could be optimised further.
     
    updateTransform creates 14 local variables, 8 of which aren't needed and the rest could be stored in a local cache, per object, per frame. However it's trivial to replace this single function with a more optimised one. I doubt it's going to lead to any kind of dramatic gain, but it will help with gc spikes for certain.
     
    Almost certainly won't stop crappy mobiles from crashing though.
  24. Like
    1-800-STAR-WARS reacted to vonWolfehaus in What makes Pixi faster than Easel?   
    With regards to the canvas renderer, I recently extracted that part from both libraries and found Pixi to be the smarter one for a few major reasons. The biggest gain was that Pixi never calls context.save() or context.restore(). Those are some very expensive functions, and Easel calls these for every single sprite. Big no-no.
     
    The other reason is because Pixi has Sprites directly reference their parent matrix transforms and run with that. Easel instead runs with whatever transform came before it, because it uses save/restore. But I found this to be a poor design that might lead to some potential issues. Pixi's general architecture is much safer, though it is more expensive (two full loops, one for updateTransform and another for render, while Easel just has one), it makes up for this by never calling save/restore on the context.
     
    Another reason is that Easel's event/input model is, quite frankly, bad. There's a ton of dispatches, ferrying around, and terrible flaws with hit detection, while Pixi's "interaction manager" handles input a little more intelligently, in a way that makes more sense for canvas. However, I haven't dug into Pixi's input stuff yet so I could be wrong! I've only brushed over it as I ripped through the lib recently.
     
    I know nothing about their webgl implementations, but judging by what I've seen so far, I trust Pixi more
     
    The downside of Pixi is that a ridiculous amount of local variables are created in hot functions like updateTransform and getBounds. For smaller devices this is the single biggest reason you see hitches--it's thrashing the garbage collector because it has to run quite often in order to clean up that mess. It also causes a great deal of memory fragmentation since it's allocating/unallocating frequently, and I don't know what devices you run with, but this was a huge problem for us (several random crashes, often, which were fixed by never allocating anything after initialization--something ALL game devs should have been doing anyway!).
     
    For the reason above, I had to strip out the canvas part of Pixi and wrapped it in my own library. I was seeing way too many slowdowns and some hitching, although it was waaay worse with Easel. And this both is on my gaming rig and Macbook D:
     
    Anyway, this topic was rather timely Hope I explained things well enough, and that it actually made sense. I'm not exactly active here, so I apologize if you have questions that I'll never answer.
  25. Like
    1-800-STAR-WARS reacted to Heppell08 in Tile callback function undefined   
    Yeah I figured it out. Your first answer was right but I needed to declare a whole new var and not use player or map.
    I used tileFunc1 = { emitBlock: function() { // stuff } }
    Then setTileindex with the stuff above which now works.
    Got 3 of them coded in and working!
    Thanks