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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 3,062 results

  1. Remove tile for collect coins

    Hello I want to collect coins in my platformer game, so i need to remove coin tile when my player overpap it. So, in create function i add this map.setTileIndexCallback(50, this.collectCoin, this); And create new collectCoin method map.putTile(-1, layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; And thats work, but the number of points is accumulated too much, when the player is standing next to the coin itself, it does not disappear, and points are scored at a high speed I try to use new TilemapLayer , but its causes an error alpha = 0 now work or I am doing something wrong
  2. So I'm getting these weird collision glitches, where I get knocked back randomly. This only seems to happen when I set my sprite's body's width to 8, as opposed to the sprite's width of 16. I'm using Arcade physics, if that makes a difference.
  3. Short questions about

    Hello, I like this game in Phaser: My first question. Is it 2D or 3D game?
  4. I'm trying to create a sprite with two animations. The first animation play constantly, and the second one after some events, then stop and the first keep playing. I'm loading an atlas like this game.load.atlas('girl', '../../spritesheet.png', '../../sprites.json') where game is my Phaser.Game instance. Then I'm creating animations like this girlSprite.animations.add('idle', window.Phaser.Animation.generateFrameNames('idle', 1, 16), 5, true) girlSprite.animations.add('walk', window.Phaser.Animation.generateFrameNames('walk', 1, 20), 20, false) where girlSprite is my character sprite. My animations run like this'idle', 16, true) // some events later var idleAnimation = girlSprite.animations.getAnimation('idle') var walkAnimation = girlSprite.animations.getAnimation('walk') idleAnimation.paused = true //'walk', 20, true) girlSprite.animations.currentAnim = walkAnimation'walk', 20, true) This only pause my first animation and then throw an exception saying currentFrame is undefined. After that I debugged a little and found out that my girlSprite had the second animation with wrong frames defined, because when I created the second animations it used the frameData from the first animation and the currentFrame get never defined. So, I'm a little lost. I'm doing it right? is there a better method to define multiple animations on the same sprite? Any help would be appreciated
  5. I'm working on an action game where the player can touch certain switch tiles to turn other enemies off and back on. So the way it is supposed to work is like this: 1. The player overlaps a switch tile 2. Execute the switch action only once 3. Ignore further overlapping with that tile until player moves off 4. When player moves off the switch should wait for the next overlap 5. Repeat from step 1 when player overlaps again I'm using arcade physics and the overlap function and it's working.. sort of. The problem is, the overlap keeps firing over and over again. What would be the best way in Phaser to get the desired result? See screenshot below of what I mean, and I've created a sandox of my code example here:
  6. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  7. I've just tried to import phaser.js along this MDN document. But it raises errors no matter how the import statement is applied. import Phaser from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'default' import {Phaser} from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'Phaser' import * as phaser from './phaser.js'; => Uncaught TypeError: Cannot set property 'PIXI' of undefined It seems phaser.js doesn't have the export statements. So, could someone advise me how to add an export statement to phaser.js so that it can be imported by other modules?
  8. Hi there, First post so sorry if this is in the wrong place. I've been reading posts on this and docs for some time but can't really make sense of it. I starting to learn and teach phaser games to 8-12 year olds. I'm looking for the most readable way for novices to scale up a game so that an original game of 480 x 360 will be displayed as 960 x 720 by default. Any rescaling down based on restricted screen size would be an advantage too but not essential if it complicates the code too much or makes less readable. Many thanks in advance
  9. Make Phaser.Game less accessible

    Hey there! We've established before that javascript and therefore phaser games can be manipulated via console and that this can only be prevented by double checking everything with the server. Now aside from that, I wondered if it would to a certain extend help to 'hide' BasicGame, which usually is a global variable and can therefore be accessed easily. My idea is this: (function() { var cfg = { width: 1280, height: 720, renderer: Phaser.WEBGL, antialias: true, parent: 'gameContainer', enableDebug: false }; var states = [] states.push(['Boot', BasicGame.Boot]) states.push(['Preloader', BasicGame.Preloader]) states.push(['MainMenu', BasicGame.MainMenu]) states.push(['Intro', BasicGame.Intro]) states.push(['XMode', BasicGame.XMode]) BasicGame = null; var game = new Phaser.Game(cfg); for(var i = 0; i < states.length; i++) if(isDefined(states[i]) && states[i] != null) game.state.add(states[i][0], states[i][1]); game.state.start('Boot'); })(); I've implemented that into my index.html and it works fine. I imagine it makes the game way harder to adress via console, but many some of you with a deeper understanding of javascript could tell me if there really is any use to it, since there's the small downside that when working with global functions, I always need to pass game to them. Thank you!
  10. Destroying coins in collision

    Hi guys! I am newbie to phaser and i would like to ask question and guide me in my project. I am currently developing a game for my project. My game will collect coins and coins that have question to be answered and will be evaluated if the user can play next level. Im using Tiled. And i am having trouble when the collision on the coins it increase the score multiple times before it will gone. Here is my code. Hope you guys help me. getCoin:function(){ map.putTile(-1,layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; scoreText.text = 'Score: ' + score; } It replaces the tile with a tile that didnt exist so i appears to be gone.
  11. Particle Editor for Particlestorm

    Hi Everybody! I want to present you my Particle Editor I created in Electron using Phaser and the Particlestorm Plugin. On a Project I'm currently working, I want to have some Particle Effects for my Level Design, but tweaking the Emitter Settings in the Editor, starting/reloading the Page to see the result, felt really cumbersome. So I decided to brush up my Electron Skills (which I also need on the Project ;)) and create my own Tools. The Particle Editor is the first Tool I will share with you, but a Physics Editor will follow (Collision Shapes with Box2D and such). Enter the Particle Editor: Download from my Webpage Currently available for Mac and Windows. (If you need help, please ask) Please remember! The Software is Version is 0.8.2a, so many Features are planned. So please tell me what you think, what you miss and what Ideas you might have for it's development. I'm always interested to see what you create with my Stuff, so feel free to share Hope you like it! Hafgandil
  12. HTML5 Ads Solution

    I know that this topis has been already discussed, but I wasn't been able to find workable solution for our company. We need simple solution to monetize our game via ads (adsense videos). I have already tried phaser-ads plugin (samples are running but unable to display anything else), a4g plugin (samples running but whe I have provided our ZONE_IDs, and nothing). So are there any other solutions, or can you navigate me thre doubleclick configuration?
  13. Phaser Combobox

    Hi all: I'm trying to integrate a register form into my phaser game. I have no problem with text input, radio or checkbox, but i have no idea of how implementing a combobox. Someone has implemented this succesfully? I need to show a country combobox. Thanks all!
  14. After long development time we finally released our game "Pirates! - the match 3". It is full blown match 3 game with many levels in two worlds. Players are given various tasks like dig treasures, fight enemies, open chests, cut through jungle and others. It also features many gem combinations - not only you can create classic row/column destroyer and bomb, but you can try to combine these to create much stronger effects. Game has great music, lot of animations and speaking parrot! You can play it here at Famobi: Or you can get iOS version at iTunes: (iOS version is Cordova wrap) For Android we rewrote whole game into Unity - it is identical: Why we did so? There is limited amount of iOS devices, but all have today enough performance to run game smooth. On Android, there is wide range of devices and some are really low level. Unity version allows us to bring smooth experience even to those devices (and the same is for low end Windows Phone devices) And of course, we are still licensing it! If you are sponsor and you like it, do not hesitate to contact us.
  15. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src=""></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(,, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'});, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  16. [Phaser] Brick Break

    Just converted one old flash game to html. Feedback is appreciated.
  17. [Phaser] ADsteroids

    Finished my mobile game I've been working on for quite awhile. It's called ADsteroids and is available for free on Android/iOS or through a desktop browser. Android/iOS app store links are at the above link as well. This is my first commercial project with Phaser. Looking forward to many more!
  18. [Phaser] Football juggle

    Hello! I'd like to introduce you my first game made with Phaser - "Football juggle" The game is simple simulator of football freestyle juggling tricks Player should make different juggling tricks to draw a crowd and impress them. Advanced tricks gather more people and gives the player more applause points. Tap or click under the ball to kick it, closer click will kick the ball harder. Web version can be found here And there is an android version I would appreciate it if you provide me with the feedback, focused on the following areas: - Did you get any bugs, especially with scaling behavior? - Are controls clear? Does introduction training in the game help? - Is gameplay dull? Is it monotonous? - What could you advice to enhance the game experience? A couple of screenshots A short gameplay video The game is optimized for mobile browsers
  19. [Phaser] Infinite Chinese

    Hi all, I’ve been working on a mobile game that teaches you basic vocabulary. I released 2 languages a few months back and have got a lot of positive feedback, so I have just recently added more languages, including Chinese! What this game does that separates it from other educational games is that it’s built from the ground up as a game first, meaning that it plays just like a fun and quick mobile game. Another goal I had is that when you close it, you will actually remember the words that you learned outside of it’s context. It seems obvious that an educational app would have this “feature” but I’ve had issues with a lot of apps that I’ve used before where if someone quizzes me on the content within the app when I’m not playing it, I can barely recall anything. Check it out and let me know what you think! Chinese: Spanish: French: German: iOS versions will be released next month
  20. Hello! In Phaser ( particularly Phaser CE ) I can't find something like Wind Resistance for objects. And start thinking how to implement my own version: create(){ game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 100; = game.add.sprite(32, 32, "car"); game.physics.p2.enable(,false); = 0.4; } update(){ if( && > ){; } } With this I can't use big numbers for windResistance, only between 0 and 1. What do you guys think??
  21. Phaser + vuejs

    Hello peeps, I've been trying for a long time now to make it work, but i can't find any new ideas to test out. My project is a vuejs webpack template project i've been able to initialize phaser make things display changing the game's background color on input etc But i can't for the life of me find the way to make sprite input detect pointer. I've followed this tutorial : Here's the code of my game vue <template> <div id="plano"></div> </template> <style> #plano { position:absolute; top:0; left:0; width:1280px; height:640px; margin: 0 auto; } #plano canvas { display: block; margin: 0 auto; } </style> <script> /* eslint-disable */ /* eslint-disable no-unused-vars */ import 'pixi' import 'p2' import Phaser from 'phaser' /* eslint-enable no-unused-vars */ export default{ name: 'phaser', data: () => ({ game: null, sprites: {}, }), mounted () { this.$on('click', function(){ console.log('click') }) let self = this if ( == null) { = new Phaser.Game({ width: 1280, height: 640, renderer: Phaser.AUTO, antialias: true, parent: this.$el, state: { preload: function preload () { self.preload(this) }, create: function create () { self.create(this) }, update: function update () { self.update(this) }, render: function render () { self.render(this) } } }) } }, methods: { preload () {'block', './static/assets/block.png') }, create (phaser) { let self = this; var sprite =,, 'block') sprite.anchor.set(0.5) sprite.inputEnabled = true sprite.input.enableDrag() { console.log('sprite down') }) }, update (phaser) { }, render() { var debug debug = debug.inputInfo(32, 32); debug.pointer( ); debug.spriteInputInfo([0], 32, 150) } }, destroyed () { // } } </script> As you can see it's pretty simple i just want to be able to drag the block, the debug.spriteInputInfo shows no signs of life. Of course the code works outside of vue ... If anyone got an idea I'll gladly take it, i'm at my wits end.
  22. This is my latest game - Dreams vs Nightmares . Nightmares are attacking fluffy Catnap and dreams defend it. The game is in Plants vs Zombies style with 6 levels of gameplay. I'm planing to add more levels and introduce some new defenders or attackers each level. Any ideas are welcome Dreams vs Nightmares are build with Phaser. And I used online collaboration tool MyGameBuilder. Also there is a community contributing with pixelart and music which was quite handy for me. Btw, link to a project if you find it interesting vs Nightmares?_fp=chat.P_fSriL4uw2W4kY8Liu_ Printscreen from intro animation Some action in last levels
  23. HI , i am trying to make a simple rpg stye game. i have created a map in tiled editor and exporting it to json. i can load and display the map in game but the colisons between my sprite and collision layer is not working. i have followed example from here . i also do not see any error in console. it just dosent work. here is my code. i am alsso attaching my level fileslevel2 <!doctype html> <html lang="en"> <head> <style> canvas {cursor: url('/assets/sprites/cursors/Black.png'), default;} </style> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var __Player; var map; var xx; var mainState = { preload: function(){ game.load.tilemap('level', 'auxassets/level2', null, Phaser.Tilemap.TILED_JSON); game.load.image('forest_tiles_image', 'forest_tiles.png'); game.load.image('tiles', 'terrain_atlas.png'); game.load.image('player', '/auxassets/cahracter.png'); game.load.spritesheet('character', 'rpg_sprite_walk.png', 24, 32, 32); }, create: function(){ game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('level'); map.addTilesetImage('grass', 'tiles'); layer = map.createLayer('grass'); xx = map.createLayer('obstacles'); map.setCollision(373); game.physics.p2.convertTilemap(map, xx); __Player = game.add.sprite(100,1700,'character'); __Player.animations.add('walk_right',[24,25,26,27,28,29,30,31]); __Player.animations.add('walk_left',[16,17,18,19,20,21,22,23]); __Player.animations.add('walk_up',[8,9,10,11,12,13,14,15]); __Player.animations.add('walk_down',[0,1,2,3,4,5,6,7]); game.physics.p2.enable(__Player); cursors = this.input.keyboard.createCursorKeys();; layer.resizeWorld(); }, update: function(){ if(cursors.up.isDown){ __Player.body.y -= 5;'walk_up', 20); } if (cursors.down.isDown){ __Player.body.y += 5;'walk_down', 20); } if (cursors.left.isDown){'walk_left', 20); __Player.body.x -= 5; } if (cursors.right.isDown){'walk_right', 20); __Player.body.x += 5; } }, render: function() { // game.debug.cameraInfo(, 32, 32); }, }; var game = new Phaser.Game(800,600); game.state.add('main', mainState); game.state.start('main'); </script> </body> </html>
  24. I'm still in the early prototyping phase so I suspect (hope?) my issue is one of overlooking a core tenant of Phaser... Also, I'm coding with Phaser CE 2.8.7 using Typescript/ES6. My primary game state is comprised of two classes: A combat class extending Phaser.Sprite which serves as a container for the 4 character atlases within, and, beneath, a UI Class extending Group which contains a few buttons and, to the right, a mini-map group comprised of a Tilemap and its lone TilemapLayer. (The star icon is a simple sprite on top of the tilemap layer which will later represent the player, but that is currently inactive.) The problem: as the characters advance to the right there's no problem until the camera kicks in. It "follows" the sprites just fine... BUT while advancing the camera seems to erase the tilemap layer as it goes, removing it entirely. When the characters return to the start position, however, the mini-map is restored as the camera passes from right to left. If I remove the camera altogether this never occurs, so it seems I've mismanaged the camera or the mini-map somehow. I've attached two screenshots: the first displaying the mini-map before the camera begins to erase it, the second as the camera begins to pass above the mini-map, erasing the image as it passes. I'll gladly provide any relevant code if needed...
  25. Hey guys, I was profiling my game and it seems like I could save some cpu time if I could bypass this function call in my objects' postUpdate : postUpdate: function() { ... if (this.components.PhysicsBody) {; } ... } My question is, since my game doesn't use any physics at all, do I have to rebuild phaser without physic support? Or is there a simpler way to simply disable the creation of physics body on all my game objects? Thanks for any input!