Search the Community

I'm new to Phaser 3 and JS in general, so I apologize if I come off super noobish. I'm trying to wrap my head around animations and how to get specific data from an animation (like, frame number, image/frame displayed on pause) I have a sprite sheet that holds all the animations. Each of the six animations is only 2 frames. I have serious limitations in terms of size and how I pack the final "game" (I'm trying to meet facebook's playable ad requirements - a single html file - so I'm using the "assets as data uri" template as a starting point.) Below is how I am handling my animation (I feel as though it's wrong) I searched for examples of how to trigger the next animation when an animation is complete. function createGameObjects () { bg = this.add.image(512, 512, 'bg'); logo = this.add.image(512, 920, 'logo'); popUp = this.add.image(512, 460, 'popUp'); popUp.depth = -1; /* var data = this.cache.json.get('itemsData'); this.anims.fromJSON(data); */ let gearHelm = { key: 'helm', frames: this.anims.generateFrameNumbers('items', { frames: [1, 8, 8, 8, 8, 8, 8 ] }), frameRate: 12, repeat: -1 }; let gearTop = { key: 'top', frames: this.anims.generateFrameNumbers('items', { frames: [7, 11, 7, 7, 7, 7, 7] }), frameRate: 12, repeat: -1 }; let gearPants = { key: 'pants', frames: this.anims.generateFrameNumbers('items', { frames: [ 5, 5, 9, 5, 5, 5, 5] }), frameRate: 12, repeat: -1 }; let gearBoots = { key: 'boots', frames: this.anims.generateFrameNumbers('items', { frames: [0, 0, 0, 4, 0 ,0, 0] }), frameRate: 12, repeat: -1 }; let gearRing = { key: 'ring', frames: this.anims.generateFrameNumbers('items', { frames: [2, 2, 2, 2, 6, 2, 2] }), frameRate: 12, repeat: -1 }; let gearSword = { key: 'sword', frames: this.anims.generateFrameNumbers('items', { frames: [ 10, 10, 10, 10, 10, 3, 10] }), frameRate: 12, repeat: -1 }; this.anims.create(gearHelm); this.anims.create(gearTop); this.anims.create(gearBoots); this.anims.create(gearPants); this.anims.create(gearRing); this.anims.create(gearSword); // timed event to handle animation timedEvent = this.time.addEvent({ delay: 0, callback: onEvent, callbackScope: this, loop: false }); // log anim item console.log(gearSword); } // update function frameUpdateCallback (sprite, animation) { } // on event function onEvent () { this.add.sprite(512, 192, 'items').play('helm'); this.add.sprite(768, 320, 'items').play('top'); this.add.sprite(768, 576, 'items').play('pants'); this.add.sprite(512, 704, 'items').play('boots'); this.add.sprite(256, 576, 'items').play('ring'); this.add.sprite(256, 320, 'items').play('sword'); // pause on click / touch var _anims = this.anims; this.input.on('pointerup', function () { if (_anims.paused) { _anims.resumeAll(); animStopped = false; console.log(animStopped); popUp.depth = -1; bg.setAlpha(1); } else { _anims.pauseAll(); animStopped = true; console.log(animStopped); console.log(_anims.key); popUp.depth = 4; bg.setAlpha(0.5); } }); } I've also attached an animated gif to show what I am trying to achieve. Animation loops and continues until user clicks - then a popup shows. I would like to display the image of the animation frame within the popup box based on where it's paused at. So if I click and stop on item 6 - then display popup with item 6. Again excuse my noobish question which I'm sure is rather easy - I'm trying, and eager to learn. PS - I am coming from Construct :)~ Thanks in advance!

SUMMARY: This post: HOW TO 2nd post: Original question that originated this post 3rd post: Research log concerning some problems and workarounds pertinent to this how-to THIS HOW-TO IS IN AN UNUSABLE STATE, AND HAS BEEN NOW ABANDONED. SORRY FOR THE NOISE. Okay, so after some hours of research here's what I came up with, in case anyone's interested or as a future reference for myself. These are the configuration steps to set up a Phaser project in Eclipse Mars.2 (4.5.2). I guess these might change from version to version, but remain essentially similar. You'll need to set up a local web server, but this is beyond the scope of these instructions. In my case I installed a WAMP (Windows-Apache-MySQL-PHP). 1. Head to http://phaser.io/download/stable and click on "clone". In my case this took me to: https://github.com/photonstorm/phaser/tree/v2.4.8 2. Click on "Clone or download". A dialog unfolds with the git repository URL. Copy to clipboard. In my case it was: https://github.com/photonstorm/phaser.git 3. Go to Eclipse and: Window->Perspective->Open perspective->Other->Git->Ok 4. Select to clone a Git repository. Paste in URI field->Next 5. Select All. Theoretically IIUC you should only need the "Master" branch. But I selected all just in case.->Next 6. It will want to clone in some default directory. It's okay like that, just copy the directory path to the clipboard for later.->Finish 7. Go tease you favorite pet/mate while the repository is cloning. 8. Window->Preferences->JavaScript->Include Path->User Libraries->New->Enter "Phaser" as the library name->Add folder->Paste in the "folder" field->Ok 9. Still in Preferences->General->Web Browser->Use external web browser->Select your html5 browser. In my case I left it at "Default system web browser", which is Chrome. 10. Still in Preferences->Server->Runtime Environments->Add->Basic->HTTP Server->Next->Enter your HTTP local server's web directory in the "Publishing Directory" field. In my case this was: "C:\wamp\www"->Finish->Ok 11. Window->Perspective->Open perspective->Other->Web->Ok 12. File->New->Static Web Project->Enter your project's name in the "Project name" field->Select HTTP Server in Target runtime->Finish 13. Right click on your project->Properties->JavaScript->Include Path->Libraries->Add a JavaScript Library->User Library->Select Phaser->Finish->Ok 14. Download https://github.com/photonstorm/phaser/raw/master/resources/tutorials/01%20Getting%20Started/hellophaser.zip or head to http://phaser.io/tutorials/getting-started/part6 and look for the hello phaser example if the previous link didn't work->Unzip in a temporary folder and drag the contents to your project's "WebContent" folder in Eclipse.->Copy files->Ok 15. Right click on WebContent->Import->General->File System->Next->Browse to your git root directory\phaser\build->Select it->Ok->Check phaser.min.js->Finish->Overwrite?:Yes --- OR --- Use your system browser to open the aforementioned directory and drag phaser.min.js to your WebContent on Eclipse and overwrite. 16. Reformat your code from this: var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload () { } function create () { } function update () { } function render () { } to this: var state = new Phaser.State(); state.preload=preload; state.create=create; state.update=update; state.render=render; var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state); function preload () { } function create () { } function update () { } function render () { } (More info about this in 3rd post) 17. Right click on your project->Run As->1 Run on Server->Basic->HTTP Server->Next->You might need to change your HTTP Port if your server doesn't default to listening on port 80->Finish Your project should have opened in your browser. NOTE: 1. I have no idea if step 14 is correct, or whether you need to include other files in your project's web content directory. 2. If Content Assist (that's what's called the feature I was calling autocomplete) doesn't pop up, hit CTRL+Spacebar. It should work and display Phaser's API documentation. 3. For following new projects you just need to follow steps: 12 to 17, as long as you don't switch your workspace, of course. 4. I will edit this post to reflect changes if you point out any errors in the procedure, etc. Cheers, Eneko P.S.: Setting up IDEs is always a nightmare, isn't it? Unless you got some template...

Hi all, My name is Xander and i have a problem with not knowing how to import a mesh by searching a .obj file on your pc with babylonjs. my project is running on this url: minegame.nl please take a look. its already possible to search a file. Please help, Thank you, Xander

Hey everyone, i am new in this forum and also new to HTML5 games industry, i posting this here cause i was kinda lost in this forum and google researches, what really made me lost are articles and posts on forums which are out of dated, and things probably changed since then. i am a game developper since a while now and i have already made several cool games using game engines , which export to HTML of course after some code adjusting, and now i want to know how can i find offers or who to contact to publish my games on revenu sharing websites, or maybe even sell a non-exclusive version to some websites. i will show you guys some screenshots of my games, and tell me if my level is good enough for the market, and whats the next step i must do: Thanks for the help

So my game has a large game world, with lots of baddies running around that I need to test for collisions with the player, as well as a tilemap with some solid (collidable) tiles. I understand that using the quadtree technique can help me sort out what is close enough to be considered for collision testing and can save me some collision checks if used right. I have read the docs and the links to the original implementations that the Phaser one is based on, and understand how the concept works, but I can't seem to find any complete explanation of how to get it working in Phaser and any special quirks that Phaser adds. The quadtree example on the Phaser examples page is not helpful. It just throws code at me without explanation. From the scraps of info that I have found from a forum search, I have the following questions: How does the grouping mechanism relate to how quadtrees work? Do the physics systems use a quadtree by default? Do I need to create my own? Are tilemap tiles considered? i.e. I might have some tiles with collides set to true. Will the quadtree factor out distant collision tiles like it would with other physics bodies when checking collisions?

What I aim to do with this blog post is set people on the right path from the get go with how image size in RAM works. I also want to provide others with the system I used to audit my image RAM and process I used to cut out inefficiencies. This should help you to get a good visual overview of which of your images are wasting the most RAM and where you can cut the fat. You can plug in the image asset list from your exported project and the sheet will give you some nice color coded information that isn't too hard on the eyes. Just click the banner above or, you can click this link too: http://pangolingames.com/how-to-audit-image-ram/ There is a RAM vs Storage overview before it gets to the utility itself, that should hopefully help explain how image download size and image size in RAM are not the same thing. In any case, I hope you find it an enjoyable and enlightening read! If you find anything that's incorrect, let me know!

I went to phaser.io, clicked the download and get started button and leaded me to the source code. I clicked on "Download ZIP", extracted it and opened the folder in Windows Explorer. I searched for "exe" and there is no .exe file. so how do I install Phaser?

Hello together, I'm currently trying to figure out how a player (avatar) on a topdown map may interact with other objects on screen by pressing the action button. And I'm totally locked in a stalemate. Here is my set up: A player sprite with a body (arcade) which is movable with a facing direction (up, down, left, right) a isLocked flag (if he interacts, prevent new interaction) A group of NPC, each sprite has a body with an interactionType (dialogue, shop, none) an optional dialogueList [dialogues [{speaker, spokenText}, ..], ..] to choose from. an optional shoppingList [{item, price, quantity},...] A group of (non-physical) Objects with an interactionType (pickup, door, event) an optional itemId and itemType (item | weapon | questItem) an optional eventKey (to call the event) an optional locationKey (to set the map for changing) An input key which, when pressed, will check a nearby object, which means an object standing on, or an npc standing next and evaluate the object (interactionType) and make a decision how to work with it (open a dialogue with passing a random set of dialogueLinesWhile evaluating the object actually comes easy, finding and passing by an object brings the horror. If tried collides, overlaps and touching, all falls short while it is needed actually walk into an object to trigger a function - if I just stand next a npc and stare at him, none of the events is true. I've read about blocked, but it will just tell me if true or false, but nothing about what is blocking me. And for none-physical objects all four options fall short, as they must not have a body (so the player can stand of it). Can anyone help me to set my mind back to the right direction?

I am new here. I want to know.. what is the difference between framework and canvas? what is the job of framework and canvas? what is the edge of framework to canvas(viceversa)? and why framework? why canvas? or I CAN DO GAME WITHOUT THOSE TWO? Need anwers.

Hello everybody, This is just a quick post to let those who might be interested know that I recently finished a blog entry about making beautiful games with simple math. No art experience is needed to understand or use what I write about. I walk through changing a game which looks like this: Into this: For those who haven't visited my site before, I write game design articles and updates on my own development process about once a month, and have been doing so for about a year now. I hope my thoughts and experiences are valuable to you, but mostly I would love to become more connected to the community. Thanks for reading and I hope to see you around! -Ryan

Hello to everyone.i have a one question.How to do simple game loading screen