• Content Count

  • Joined

  • Last visited

  • Days Won


Reputation Activity

  1. Like
    Mike reacted to rich in New Phaser Asset Pack feature - please test!   
    Hi all,
    Today I added a new feature into the Phaser dev branch. It's the ability to define and load an asset pack (also known as a manifest file).
    Basically it's a way to define which files are loaded in a JSON file (or object), split up by section, and then the loader will automatically load each file in the pack. Here's an example asset json file:
    { "level1": [ { "type": "image", "key": "starwars", "url": "assets/pics/unknown-the_starwars_pic.png", "overwrite": false }, { "type": "image", "key": "spaceship", "url": "assets/pics/spaceship.png", "overwrite": false }, { "type": "audio", "key": "boden", "urls": ["assets/audio/bodenstaendig_2000_in_rock_4bit.mp3", "assets/audio/bodenstaendig_2000_in_rock_4bit.ogg"], "autoDecode": true }, { "type": "spritesheet", "key": "mummy", "url": "assets/sprites/metalslug_mummy37x45.png", "frameWidth": 37, "frameHeight": 45, "frameMax": 18, "margin": 0, "spacing": 0 } ], "level2": [ { "type": "image", "key": "ball", "url": "assets/sprites/shinyball.png", "overwrite": false } ], "meta": { "generated": "1401380327373", "app": "Phaser Asset Packer", "url": "http://phaser.io", "version": "1.0", "copyright": "Photon Storm Ltd. 2014" }} Here you can see the assets have been split into 2 sections: level1 and level2. In level1 there are 2 images, an audio file and a sprite sheet. Here is what the preload function looks like:
    function preload() { game.load.pack('level1', 'assets/asset-pack1.json');} When the loader starts it will immediately parse any asset packs in the queue (you can queue as many of them as you like), then it will add each of the assets into the load queue and finally start the loader. So the actual load process is identical to how it works currently, you can still use preloader sprites, still get the same events.
    You can even mix and match, so a preload function could contain one asset pack + a bunch of regular load calls as well.
    Anyway I'd very much like if you could test this It's in the dev branch, there is an example in the Examples repo and I've build the build files with this all in there. Also I updated the TypeScript defs for it too.
    Here you'll find a full json structure definition: https://github.com/photonstorm/phaser/tree/dev/resources/Asset%20Pack%20JSON%20Format
    This is the first stage into allowing you to control Phaser from external scripts, the next will be scene generation.
  2. Like
    Mike reacted to lightcross in Masking to simulate light area   
    Hi titmael,
    in the last Phaser Newsletter (Issue 5) was a nice link to a Game Mechanic Explorer.
    There is a section about Lights, where you can find some similar examples of the effect you desire.
    Hope that has helped :-]
  3. Like
    Mike reacted to lewster32 in Water, liquid, fluids   
    Fluid simulation is a tricky and complex topic, though the type of dynamics you're after would probably best be represented by a smoothed particle system. The basic idea is that you create a load of circular particles to represent the fluid, but visually represent it as a single smoothed mass, taking into account boundaries (so the fluid 'sticks' to nearby edges, rather than gets rounded) - this would certainly be possible using P2 physics for the simulation, and a choice of a triangulation method, BitmapData or maybe a shader to render the smoothed effect.
    I think to answer a lot of the questions put in the forum lately regarding 'can x be done in Phaser' the answer is pretty much always 'yes'. Phaser doesn't apply any limitations on what you can create, as it's just JavaScript, Canvas and WebGL at its heart - and these are all accessible pretty easily should you wish to go a little deeper under the abstractions that Phaser provides. Before asking the question, see if it's been done before anywhere else. Chances are, there'll be an open source project doing exactly what you're after, and there's a good chance someone's done it in JavaScript too. From there you can just join the dots
  4. Like
    Mike reacted to Zaidar in Using Plugins   
    Well, since it works and the plugin is part of the game.plugins array, I think that's the good solution.I have an example working for you. Let me put this online.
    Here is the game, the only part I use the Juicy plugin is for the screenShake effect (I know, but it was just for testing at first, so I just left it here)
    This is the source on Github :
    Basically if you look at line 57, I'm adding the plugin into the Phaser pluginManager.
    And lines 157 and 169 I use the shake() function to make the screen shake.
    At the end, when you put a red bomb on the black container, it explodes and make the screen shakes.
    If you have already used OOP for your games, like a Player.js where you define a player "constructor" and player functions, this is the same thing. Plugins could just be inserted in the main code, but at the end of the day, it's just for better clarity and organisation I think.
  5. Like
    Mike reacted to stauzs in Game editor on Phaser   
    just made a small update:
    * fixed text align by wordWrapWidth 
    * fixed bounding box for custom fonts ( after font has been loaded - PIXI.Text.heightCache )
    * new feature - zoom - select from dropdown zoom level or use the mouse wheel to zoom in/out
    * added "locate object" button - centers active object or sets camera position to 0,0
  6. Like
    Mike reacted to rich in Flash to Phaser JSFL Script   
    Hi all,
    "Flash to Phaser is a JSFL script that will aid in the process of laying out scenes within the Flash IDE and converting them into Phaser JavaScript files. It works by parsing the Stage for any Bitmap or Symbol objects and then automatically builds-up a JavaScript source file including preload and create functions that accurately re-create what is seen inside the Flash IDE.
    If the script encounters a Symbol it treats it as a Phaser Group and uses the Symbol name as a Group name. Any Bitmaps within the Symbol are treated as Group children and positioned accordingly.
    Objects have their x, y, rotation and scale properties re-created in the JavaScript."
  7. Like
    Mike reacted to SeanEBaby in [WIP] [Phaser] Slingshot - Survival Space Simulation   
    Thanks for all the feedback.
    I'm going to try reducing the strength of the gravity while increasing the power of the engines.
    The whole game is a realistic simulation of space flight, it's pretty much kerbal space program with guns in 2D.  This means the guns work like they would, since you are accelerating you can catch your bullets up and depending on the way you are travelling they might not fire straight out the front...  ....I wrote a blog post about this if you are interested http://sean.crossproduct.co.uk/2014/05/14/in-space-games-everyone-can-hear-you-scream/
    It all makes the game quite tricky when you start playing, you can eventually figure out how to control the ship, but at the moment the barrier to entry is too high as you guys are pointing out.   Thanks again.
  8. Like
    Mike reacted to stauzs in Game editor on Phaser   
    @Mike I haven't put any additional functionality - except for phaser's default behavior - and phaser's text align doesn't work the way I was expecting.
    atm. there is possible to set wordWrapWidth property - but aligning works based on longest text line, not the wordWrapWidth - so if you have 1 line there won't be any visual changes.
    I'll check for solutions and implement a text box.
  9. Like
    Mike got a reaction from lobsterhands in Give Sprites Planet-like Gravity Qualities   
    It's not a Phaser specific, it's not even JS but its a good source of info about the topic:
    About the rectangle form it should be a problem it can even simplify the gravity to 4 directions depending on which side of the "planet" are you the gravity changes
    I'll be interested to see such experiment. 
  10. Like
    Mike reacted to codevinsky in Design of JS Class   
    I'd suggest taking a look at this: 
    There are a lot of ways to construct classes, and this book details most of them in depth.
    I'm partial to the Revealing Module Pattern.
  11. Like
    Mike reacted to alex_h in Phaser + DragonBones   
    [EDIT] - I have tidied and commented this now, and switched to use the dragon animation from the dragonBones demo package. I've also uploaded a zip of the whole working example to here http://www.alexh.org/phaser_bones/phaser_bones.zip
    I started having my first go at messing around with Phaser this morning so I thought a good place to begin would be getting dragon bones working with it. I’ve just lifted the texture atlas straight from a game I'm working on and stuck the player characters running animation loop from my game in front of the phaser hello world for now. Here's the result:
    The most relevant code is in this file:
    It handles applying the skeleton animation to Phaser sprites.
    Feel free to take the code, but please don't nick the images from my png file!
    I'll try to tidy it up, then perhaps make a phaser example out of it.
  12. Like
    Mike got a reaction from Starboar in Phaser 2.0.5 - Tanchico - Released   
    Cool news. And for the plugins, everyone should try to make one plugin themself.
  13. Like
    Mike got a reaction from Arlefreak in Phaser 2.0.5 - Tanchico - Released   
    Cool news. And for the plugins, everyone should try to make one plugin themself.
  14. Like
    Mike got a reaction from Heppell08 in Phaser 2.0.5 - Tanchico - Released   
    Cool news. And for the plugins, everyone should try to make one plugin themself.
  15. Like
    Mike got a reaction from defwonder in Newbie struggling with CORS issues.   
    Do you open the html form the webserver ?
    Sounds like you open the html like: file:///D:/xampp/htdocs/Phaser/AdventureJS/index.html
    Try to open: http://localhost:8888/
    also check if the server is running (Apache is started).
    And your game should be here: http://localhost:8888/phasertest
  16. Like
    Mike reacted to lewster32 in Witch OOP Phaser choose? Witch makes the run faster?   
    Phaser.GameObjectFactory as it stands only serves as a convenient way of creating new instances of objects; it doesn't offer any performance advantages (that I'm aware of) over manually creating sprites via new Phaser.Sprite. Extending the Phaser.Sprite object doesn't change the performance vs a normal sprite either until you start adding in your own routines, and then it's totally dependent on the optimisation of the routines, rather than as a result of the fact that it's extended.
  17. Like
    Mike reacted to stasuss in Glow effect like geometry wars   
    Blend mode should be added onto the sprite. I just tested it and it worked with the following code:
    mySprite.blendMode = PIXI.blendModes.ADD;
  18. Like
    Mike reacted to OpherV in Destructible terrain   
    Antworld has that:
  19. Like
    Mike got a reaction from lordtez in Starting with HTML5 game development- very confused   
    You could have been 10 times more confused if there wasn't any resources online.
    Just have a goal , a simple one for start and go for it.
  20. Like
    Mike reacted to shmikucis in Game editor on Phaser   
    Recently our team has created two mini-games using Phaser.io and we find it pretty useful. We at MightyFingers decided to help fellow game developers and created editor on top of it and called it "MightyEditor". The idea is pretty simple - make it easier for everybody to work with the framework. Currently we have very basic features implemented like asset management, map creation, grouping in levels and data exporting. However without these basic things we would spend quit a time to create all levels we have.


    How does it work? Editor is web based tool and doesn't require any hassle like installation or authorization to the system. Simply go to http://mightyeditor.mightyfingers.com/ and system will give unique URL where you will be able to return later on and continue your work with map creation. Real time testing is as simple as including URL given on editor top right in your game project. You can export data from editor at any time, no dependencies here. We have tested editor only on Chrome, no guarantee for other browsers



    For more info check out editor features section at our home page.


    Video tutorial https://www.youtube.com/watch?v=7dk2naCCePc

    Here is a list of the features that we are planning to implement in the future. Please vote for your favorite/most needed one or even request a new one – so we can focus more on the most required features:

    text object
    zoom in / out
    sound management
    tile map support
    import from tiled editor
    export to tiled editor
    sprite animation editor
    tween editor
    source editor
    user and multi user support
    version control for the projects

  21. Like
    Mike reacted to jpdev in simple phaser & websocket guide   
    This is a small tutorial on how to write a very small websocket demo with phaser.
    There is one sprite, everybody can drag it around.
    If a client moves the sprite (using the mouse) he tells the server about the new position.
    The server tells everyone else and the client update the sprite position.
      To achieve this, the server will contain 20 lines of code and the client will contain 52 lines of code (including all the phaser stuff).
    What we need:
    Client side: only phaser
    Server side: nodejs and the websocket package "ws"
    Here are the source files:
    (phaser 2.0.4 is included, but any phaser version should work).
    Update the websocket.js in the client directoy to have the correct IP and Port for the server.
    Start the client how ever you prefer to start your phaser programs.
    Running the client (without a server) should display a rabbit and the text "started (not connected yet)".
    Now for the server side of things:
    Extract the "server" directory from the zip file.
    Now it's time to edit the server.js and set the port you want to use. (I have 8080 in it. Just make sure it matches the port in the websocket.js for the client).
    Now you will need to download nodejs ( http://nodejs.org/ ) and install it.
    (There is a windows installer if your server is a windows machine (or you are just testing locally) - or there are .tar-balls for linux.)
    The windows installer asks if "npm" should be installed, check yes. 
    The windows installer asks if nodejs should be added to the path, check yes.
    Now open a command line (cmd) and navigate to the "server" directory and type in "npm install ws".
    npm (the nodejs package manager) will create a directory "node_modules" in the current directory and download our websocket library (namend "ws") into this directory.
    Now (in the same command line) type in "node server.js".
    This will start the server.
    Refresh your client, it should now show "connected". Move the rabbit.
    Open more clients. Move the rabbit again.
  22. Like
    Mike reacted to Noid in I know what the hearts mean   
    (Either I'm the first to notice this or everyone thinks it's so obvious they didn't bother to write a forum post about it  )
    When I run my game, I see two red hearts and a gray one next to "Phaser vX.X.X ...". I thought it was just decoration but I noticed in screenshots from other people that sometimes there are three red hearts. So I inspected the piece of code responsible for the output of that line which, with 'pretty print' enabled, reads: 
    var a = b.VERSION, c = "Canvas", d = "HTML Audio", e = 1;if (this.renderType === b.WEBGL ? (c = "WebGL", e++) : this.renderType == b.HEADLESS && (c = "Headless"), this.device.webAudio && (d = "WebAudio", e++), this.device.chrome) {                for (var f = ["%c %c %c Phaser v" + a + " - " + c + " - " + d + "  %c %c  http://phaser.io  %c %c ♥%c♥%c♥ ", "background: #0cf300", "background: #00bc17", "color: #ffffff; background: #00711f;", "background: #00bc17", "background: #0cf300", "background: #00bc17"], g = 0; 3 > g; g++)                    f.push(e > g ? "color: #ff2424; background: #fff" : "color: #959595; background: #fff");                console.log.apply(console, f)            } Notice there is an 'e' variable that starts at 1 and is incremented  when c = WebGL and d = "WebAudio". There is also a loop using a 'g' variable and at the end an f.push line that compares e to g and according to which is greater sets color to #ff2424(red) or #959595(gray).
    So the meaning of the hearts are: 
    ♥: Basic functionality
    ♥♥: Either WebGl or WebAudio enabled
    ♥♥♥: WebGl and WebAudio enabled
    That's really cool!
  23. Like
    Mike got a reaction from lobsterhands in [WIP] [Phaser] Roy - a color-based "puzzle" game.   
    Colorful concept. Will like to see the finished game. 
  24. Like
    Mike got a reaction from Heppell08 in [Example] pauseUpdate in new 2.0.4 working   
    Yep it's ok now!
  25. Like
    Mike reacted to codevinsky in [Plugin] Juicy: Simple Effects Plugin based on the "Juice it or Lose It" presentation   
    If you're not familiar with the presentation, it's vital that you go watch it: 
    Now that you've done that, this plugin currently allows you to easily implement the following effects:
    Camera Shake Screen Flash Object Trails Over Scaling Mouse Stretch Jelly Effect  
    I've made a pull request and I hope rich will merge it into the official repo.