Search the Community

Showing results for tags 'phaser'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 2,858 results

  1. Hi guys, I just wanted to show you my latest Phaser app, Pop Pop Bubble Wrap (I know it's simple but I just wanted to get back on track, I haven't coded a Phaser app since the end of 2015). Pop Pop Bubble Wrap is an infinite bubble wrapping popping simulator designed to reduce one' stress and anxiety. You can find it here: iOS: Google Play: Website: #indiedev #indiegame #gamedev #roninmobile Let me know what you think! Regards!
  2. Part 6 of my tutorial series on making is here! Check out the demo: Enjoy!
  3. So I'm trying to flood fill a specific area on my bitmap data so I can create a mask for that area, however after setting the array data of the bitmap data nothing is showing up. I'm iterating over the length of array and setting rgba values as such:[i] = 0;[i + 1] = 0;[i + 2] = 0;[i + 3] = 255; I then proceed to draw my "buffer" bitmap data into my mask bitmap data as such: this.maskData.draw(this.bufferData, 0, 0, this.bufferData.width, this.bufferData.height, "destination-out"); this.maskData.update(); I've tried calling update() on my bufferData before drawing it into the maskData, however it didn't help.
  4. Animate showing all three panels

    Hi, I think that I have typed my code in correctly, but when I try to play the game all three panels of my sprite animation show. Can someone please tell me what I am doing wrong? I am stuck! Thank you so much in advance!! var GameState={ preload:function(){ this.load.image('background', 'background.png'); this.load.image('arrow', 'arrow.png'); /*this.load.image('chicken', 'chicken.png'); this.load.image('horse','horse.png'); this.load.image('pig', 'pig.png'); this.load.image('sheep','sheep3.png');*/ this.load.image('chicken','chicken_spritesheet.png', 131,200,3); this.load.image('horse', 'horse_spritesheet.png', 212, 200, 3); this.load.image('pig', 'pig_spritesheet.png', 297,200,3); this.load.image('sheep', 'sheep_spritesheet.png', 244,200,3); }, create: function() { //scaling options this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //have the game centered horizontally this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; //create a sprite for the background this.background =, 0, 'background') //group for animals var animalData=[ {key:'chicken', text:'CHICKEN'}, {key:'horse', text:'HORSE'}, {key:'pig', text:'PIG'}, {key:'sheep', text:'SHEEP'}, ];; var self= this; var animal; animalData.forEach(function(element){ animal = self.animals.create(-1000,, element.key, 0); animal.customParams={text:element.key}; animal.anchor.setTo(0.5); //animal animation animal.animations.add('animate', [0, 1, 2, 1, 0, 1], 3, false); animal.inputEnabled=true; animal.input.pixelPerfectClick=true;,self); });; this.currentAnimal.position.set(,; //left arrow this.leftArrow =,, 'arrow'); this.leftArrow.anchor.setTo(0.5); this.leftArrow.scale.x = -1; this.leftArrow.customParams = {direction: -1}; //left arrow allow user input this.leftArrow.inputEnabled = true; this.leftArrow.input.pixelPerfectClick = true;, this); //right arrow this.rightArrow =,, 'arrow'); this.rightArrow.anchor.setTo(0.5); this.rightArrow.customParams = {direction: 1}; //right arrow user input this.rightArrow.inputEnabled = true; this.rightArrow.input.pixelPerfectClick = true;, this); }, //this is executed multiple times per second update: function() { }, animateAnimal: function(sprite, event) {'animate'); }, switchAnimal: function(sprite, event) { if(this.isMoving){ return false; } this.isMoving=true; var newAnimal, endX; if(sprite.customParams.direction >0){ newAnimal=; newAnimal.x = -newAnimal.width/2; endX= 640 +this.currentAnimal.width/2; }else{ newAnimal=this.animals.previous(); newAnimal.x= 640 + newAnimal.width/2; endX= -this.currentAnimal.width/2; } var newAnimalMovement =;{x:}, 1000); newAnimalMovement.onComplete.add(function(){ this.isMoving=false; }, this); newAnimalMovement.start(); var currentAnimalMovement=;{x:endX}, 1000); currentAnimalMovement.start(); this.currentAnimal = newAnimal; } }; //initiate the Phaser framework var game = new Phaser.Game(640, 360, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState');
  5. [LD39][Phaser]Universe Hopper

    Universe Hopper Jam game made for Ludum Dare 39.
  6. In this simple game you are the fearsome Mapinguari, a mythical creature from the Amazon rainforest, and must scare some villains out of the forest. Direct link: Code:
  7. When I started to play around with the Phaser API, I wanted to tackle the challenge of creating a realtime game with multiple players. I decided to use the PubNub multiplayer framework for the realtime functionality and it worked extremely well. I put my entire project up on Github and you can try it out by clicking HERE (open up two browser windows to test real time functionality). PubNub provided me with low latency with message delivery happening in less than 250ms and Phaser is super lightweight which allows it to work in mobile browser and even on low end computers. The entire project took me a few weeks to develop but most of that was just optimizing the game to send the least amount of messages possible. I wrote a step by step tutorial if you want to try to make this yourself in Phaser, you can checkout the tutorial HERE.
  8. I'm new to Phasor and using it to make a little game for my son with a firetruck driving around and spraying water to put out fires. When the space bar is pressed, the game creates individual water drop sprites coming from the truck with gravity turned on. I give the water drop velocity a slightly random component to make it spread out and not all follow a single parabola. There is a timed event to destroy each water drop. Here is a code snippet creating a water drop that is shooting to the right. drop = waterdrops.create(truck.body.position.x + TRUCK_SIZE1_X/2, truck.body.position.y - 20, 'waterdrop'); drop.frame = 0; drop.body.gravity.y = 300; drop.body.velocity.y = -100 + randn()*20 + truck.body.velocity.y/2; drop.body.velocity.x = 100 + randn()*20 + truck.body.velocity.x/2;, destroyDrop, this, drop); I fiddled around with different numbers until it looked like a nice spray of water coming out and hitting the ground. This works great when developing on my Macbook Air. However, the really weird issue is that when I run it on my Windows 7 machine the water only goes half as far before being destroyed. I tried doubling the delay time and this made it work well on windows 7 but then on the Macbook the water goes way too far. I also notice that the truck itself seems to go slower. It seems to me that if the body.velocity and body.acceleration values are scaled differently on each machine. My first though was that maybe it has to do with screen resolution, but thinking about it further that doesn't seem to make sense. So, why is there a difference in water drop behavior between the two platforms? Also, is there a better way to do what I'm trying to do here? As I said, I'm new to Phasor and this is just what I came up with after reading a few tutorials and looking at other examples. The game as it stands is hosted here -> Thanks! Ben ** UPDATE I ran the game on another Windows 7 machine and it works okay. So the problem seems to be with my older Windows 7 Machine. Could this be an issue of client side CPU processing capability? Does Phaser adjust frame rate to deal with slower computers?
  9. Hello, I have just finished the second level for my html5 game, Adventure of Ryan Hunter. Please check it out and let me know what do you think. Thank you, Priyo Hutomo
  10. Hi! I've made several game prototypes over the past few years, but so far haven't managed to turn any of them into something more finished. Until now! Blast Down is a game about testing the world's first jetpack while fighting off waves of rogue robots. You can play it in your browser right now, and I'm planning on porting it to Android soon!
  11. [Phaser] Wizard in a Bubble

    Howdy All Check out my latest game. Its in a kind of permanent beta at the moment. Works on Desktop or Mobiles, touch controls etc, all thanks to the awesomeness that is the Phaser framework. Wizard in a Bubble
  12. Follow My Lead

    Hi all, Please try out my very first game created with Phaser: Follow My Lead. INSTRUCTIONS: - Pay attention to the button sequence - Now repeat the button sequence to go to the next level - Try to complete the stage to unlock the next one! The last stage is unlimited and works the same way as a Simon game. You can try it here on newgrounds: I also converted it into an Android app with Cordova (any Cordova users here?) You can try it out here: Any feedback or advise is appreciated! Walking Fort
  13. Hi, I'm writting a platform game in phaser, and i want it to have 30 levels. I wanna post them in a wordpress page and i really don't know how can i storage the data: levels passed, lifes left, etc... so i can use it in the wordpress site to show some "leves/icons" as completed and in my phaser game to get this informacion further than the cache data i can pass throught States. My programmer skills are few so i don't even know how to start. Anyone can tel me where to start looking? Many thanks!! Barbara
  14. Spine support

    Sorry for asking again for the Spine ( support in Phaser. I didn't have the time to try it out but since Pixi is used for rendering I really wonder if this is already possible. Despite being so great Spine does not seem to get used a lot so I understand if you don't plan to integrate it in the near future (at least you didn't put it under "Future Plans" in the anymore). I guess I could wait for the documentation and then try to hack it in - maybe I can even get the code to look nice and make a PR though I doubt that Also thank you so much for your hard work on the 1.0 release! I followed the "march to 1.0" thread as well as the github commits so I can imagine how much effort you put into this
  15. I tried multitexture batching using Richard tutorial with hopes that the performance will be improved I made the test on my demo using phaser 2.8.2 (Demo is not updated with multi texture batching yet) Draw calls are a lot less now but I don't see any performance improvement. On some devices that I tested it is is also showing graphical glitches with several of the sprites. Canvas is still the faster render option on all the devices I try phaser on. Why is this? Maybe I'm doing something wrong? I tested on Ipad 3 and Nexus 6p. I made other tests on the past with slower android devices and canvas is always the best option.
  16. Part 5 of our series has arrived: Also check out the demo for this part: In this part you will learn how to add those awesome eyes to your snakes!
  17. I have just uploaded my phaser mobile game on google play store this is the google play link Bouncy -Jump or Die , You review and suggestions are highly welcom
  18. Part 4 of making with Phaser is here: Check out the demo for this part: In this part you will learn how to recreate the unique collisions seen in
  19. Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn =; this.middleColumn =; this.rightColumn =; Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?
  20. This is a work in progress. It's a sandbox physics pinball (etc.) game in which the player can draw the walls, bumpers, flippers, plungers, and other assorted parts, play with the board she's made, and share it with her friends. I'm making it with phaser using the p2 physics engine. Here's a link to an example board: If you go to, you'll start with a blank board. You'll need to login with your google account (minimum credentials) to save/fork boards. Be sure to click 'help' and read the directions (screenshot below). Lots of stuff doesn't work yet. Thanks for your thoughts. Here's a gameplay demo:
  21. Phaser Retina Resolution in Android Webview

    I'm developing Phaser games for Android devices. I do not use Cordova Phonegap, please do not suggest me to do it. All I do is manually putting my HTML5 and JS files into an assets folder and calling it from Android WebView. Now, the problem is resolution. I always getting jagged images and not satisfied. Before using Phaser, I developed my HTML5 games by setting game's canvas width & height twice larger from device's screen. Then, I simply put css code to downscale the canvas to fit the screen. The result was good, images are crisp. But with Phaser, I can not set canvas width&height just like before. What is the solution?
  22. Hi i'm quite new with phaser but i'm making a game at the moment for a class project and i was wondering if their is a way to choose a specific sprite from a group of maybe by order of how they were created or something . any help would be much appreciated
  23. I am looking to hire a HTML5 game developer to build Snooker and Billiards games. This is a paid assignment, we can work on a fixed fee or on hourly basis. Please mail your interest and portfolio to
  24. I have a two player mini game, with all the main logic happening in this: function SpriteDoObj(player){ // global function this.player = player; this.atk = function(opponent) { this.opponent = opponent; if (this.player.overlap(opponent)) { //call miss sound here console.log("miss"); return; } else if (this.isSameAtkPosition(opponent)) { //call block sound console.log("block"); return; } else { console.log("hit!"); //call damage sound --; } }; } //has been simplified And I make two instances of SpriteDoObj with: this.blueSpriteDo = new SpriteDoObj(blue_player); this.redSpriteDo = new SpriteDoObj(red_player); //.. also the players are made like this: this.players =; var red_player = this.players.create(window.innerWidth, - 490, 'red_spritesheet'); var blue_player = this.players.create(0, - 490, 'blue_spritesheet'); And the atk function is called like this: if (blue_keyMap.atk.isDown) { this.blueSpriteDo.atk(this.redSpriteDo); //the parameter for the atk function //passes the opposite player, that becomes the opponent } The error is phaser.js:47751 Uncaught TypeError: displayObject.getBounds is not a function And I'm not sure why this is happening, mayhaps something to do with how I'm passing the objects around, but it looks good to me - though I'm a noob. Any Ideas?
  25. Phaser Hex grid engine

    Hello, I'm searching for Hex grid engine to make Battle Isle (DOS) clone in Phaser.js, if somebody can help me with that I'll be very gratefull cause I've found only this link which is broken -> Maybe there is a Phaser Hex Grid addon with documentation that I can't find ?