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 3
    • Phaser 2
    • 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,187 results

  1. Hi, To simulate a laser blaster heating and cooling I used setInterval for the cooling and setTimeout to delay the cooling if the weapon overheat (firelimit reached). While the weapon is cooling, if it fires again the cooling is aborted (clearInterval, only if the weapon has not overheated). Although it is working correctly while in game, the cooling or the delay is not paused when the game window loose focus, that's because of setTimeout and setInterval. Here is a demo Blaster heating and cooling, some heating and cooling feedbacks are logged in the browser console and a heating meter in the top right camera corner. The colldown function using setInterval. The overheat handler using setTimeout. The cooldown aborter using clearInterval. The github repo. How should I use Phaser.Timer and Phaser.TimerEvent to implement the same behaviour and then get the cooling timer and cooling delay paused when the game window looses focus.
  2. TileSprite Alternative

    Hi All, I have been working on a Endless Runner game for mobile and web . Initially i Used TileSprite for the looping background,but it affects the performance on mobile. Then i used the classic method of moving two backgrounds simultaneously. But if i increase the speed of the movement , it gives a gap between two backgrounds. Kindly help me with the logic bgSpeed = 10 update() { mainBg1.y += bgSpeed; mainBg2.y += bgSpeed; if(mainBg1.y >= { mainBg1.y =; } if(mainBg2.y >= { mainBg2.y =; } }
  3. Help to make sprite follow curved path

    i need the penguin sprite to follow the blue curved path , I have used a sin cos generator for the platform the code is attached below.
  4. Pixi Glow Filter

    Hello there, I am trying to load a pixi glow filter for a phaser project I am working on. I followed this tutorial But I am a bit confused as to how to make this run on type script without the ts definitions. Any help in this regard would be much appreciated Thank you
  5. Brick Breaker - Choppy effect

    Hi everybody, I started recently playing with game coding using Phaser. This is really a nice framework. My first project is a simple (and opensource) brick breaker you can find out at I'm still in the understanding and experimenting steps but one of the effect I do not understand right now is the choppy effect while increasing vertical velocity of the ball (maybe that's not the best practice at all). Visually that's not really nice you know... Also sometimes, the ball does the collision a bit above the paddle, I do not know why. Could it be a difference in the position of the body and the image ? Was thinking first, ok it's framerate issue maybe, but after checking the FPS, it is approaching 60 in game. But again, I'm not so technically advanced with all that to be sure what can be an issue in term of code or performance. The state game code : Do not pay attention to the structure of the project, it is still in thinking & refactoring phase. I refactor it again and again to make it clearer & scalable as much as possible but I'm at the beginning of that. So please do not hit me that much if you see some outrageous things, just tell me the right direction if you think I'm going to the wrong path. Hope you can help me. Bests regards and have fun coding !
  6. Phaser + VueJS

    Excuse me! I have a problem with the game develop. I have 5 states: state1~state5, and every state has preload, create and update 3 function. How should I put them in mounted and methods? In original code: var GameObj = {}; GameObj.Index = function (game) { }; GameObj.Index.prototype = { create: function(){}, update: function(){}, player: function(){} }; And I try to write in VueJS: import 'pixi'; import 'p2'; import Phaser from 'phaser'; export default { name: 'game', props: { height: Number, width: Number, }, mounted() { let self = this; const gameHeight = document.querySelector('#gameBox').offsetHeight; const gameWidth = document.querySelector('#gameBox').offsetWidth; if ( === null) { = new Phaser.Game({ width: gameWidth, height: gameHeight, renderer: Phaser.AUTO, parent: this.$el, }); } this.addSate(); }, methods: { addSate() {'GamePreloader', function() { this.prototype = { preload(Phaser) { ... }, create(phaser) { ....'GameIndex'); }, }; });'GameIndex', function() { this.prototype = { create(phaser) { .... }, memberLogin(phaser) { .... }, }; });'GamePreloader'); }, }, data() { return { game: null }; }, }; I don't know if my structure has a fault? Because there is nothing in the canvas to display.
  7. I have used this phaser example as a starting point to build a game where shapes are dynamically dropped from the top of the screen and collide with each other: What I would like is for the shapes to stop bouncing and vibrating when they collide - but I'm not sure which settings to adjust to achieve this effect (and I've not had much luck with trial and error so far!). I have set gravity like this: game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 6000; Here is my shapes/sprites json file: { "shapeOne": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 84, 76 , 0, 160 , 0, 0 , 84, 0 ] } , { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 84, 76 , 314, 76 , 314, 160 , 0, 160 ] } ], "shapeTwo": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 0 , 315, 0 , 315, 83 , 0, 83 ] } ], "shapeThree": [ { "density": 2, "friction": 100, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 0 , 237, 0 , 237, 235 , 0, 235 ] } ] } Does anyone know the correct settings to adjust? Do I need to turn density up really high and friction low? And should gravity be high? Here is a screenshot of the shapes that are being dropped into the container:
  8. Collisions without velocity

    Hi, I'm making a top-down game with the camera that follows the player. Early on, I realized there was a persistent camera jittering effect when using velocity, so I switched my movement to manually change the players x & y coordinates. However, when I started adding enemies to the game that also had arcade physics bodies, I realized that my bodies would not collide. Looking into this, I found this response from the Phaser devs, saying that the problem would be solved in P2. I switched both my bodies to P2, but they still will not collide. Is there a way I can work around both the camera and collisions issue? Thanks in advance for the help.
  9. Hi, I'm making a top-down game with the camera that follows the player. Early on, I realized there was a persistent camera jittering effect when using velocity, so I switched my movement to manually change the players x & y coordinates. However, when I started adding enemies to the game that also had arcade physics bodies, I realized that my bodies would not collide. Looking into this, I found this response from the Phaser devs, saying that the problem would be solved in P2. I switched both my bodies to P2, but they still will not collide. Is there a way I can work around both the camera and collisions issue? Thanks in advance for the help.
  10. Hi all, I was trying to optimize our mobile experience, so instead of including a big background image in on of my texture sheets, I've made it into a simple .jpg image and set that as a CSS background with the following properties : body { margin: 0; padding: 0; background: url('assets/images/bg.jpg') no-repeat center center fixed; background-position: 50% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; overflow: hidden; } On iOS and desktop Chrome + Safari, the behaviour is as expected, but on Android Chrome, it seems to affect my Canvas size, as if the canvas was bigger than the whole screen. The weird thing is as I hit refresh multiple times, the behaviour changes from having correct canvas size to incorrect. If there is no way around that, I'm just going to go back to my background being part of my texture atlases. Thanks for any input! Edit: after playing around a bit with how I create Phaser's game object, I just realized that Android does not treat screen density like iOS does (ie. Retina vs xhdpi etc), so I basically added code so that on Android width and height are "100%" with a scale mode of RESIZE, and on iOS width and height are window.innerWidth * window.devicePixelRatio with a scale mode of SHOW_ALL and everything seems to behave correctly now. Let me know if you see any issues with my approach, thanks!
  11. I am new to coding and I need to know how to make any object or sprite etc. immovable.
  12. Hi, I am trying to modify the 'Pick Up Object' phaser example: How it should work is that when a user clicks on one of the shapes at the bottom of the screen it should generate a new shape inside the yellow containing block. I want the shapes to restricted inside the yellow box so that they cannot pass outside. Here is my demo version: I have tried the following code - but I am not sure what is going wrong with the boundaries - any help/suggestions would be much appreciated! var game = new Phaser.Game(640, 1139, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // set the world bounds to match the yellow container, 0, 306, 500); // center camera, 0, 640, 1139); // load the background - this is larger than the screen var mainBG = game.add.sprite(0, -3622, 'mainBG'); // add shapes/buttons to the shapeMenu button1 = game.add.button(80, 760, 'button1', actionOnClickButton, this, 2, 1, 0); button2 = game.add.button(254, 800, 'button2', actionOnClickButton, this, 2, 1, 0); button3 = game.add.button(486, 770, 'button3', actionOnClickButton, this, 2, 1, 0); Then the logic for placing the shapes follows the 'Pick Up Object' example - using PS physics ands boundsCollisionGroup... Thanks!
  13. Hey guys, we've made our second HTML5 game. The game itself is written in Phaser. It's a simplified match-3 game (tile popper) with 10 levels and the endless mode. Each level has 3-star rating and it's own unique challenge. Unlocking a challenge gives you an achievement. The endless mode is a beat-the-highscore type of level. We're looking for a sponsor that might be interested in licensing it. You can check it out here:
  14. Hi guys, I just started coding using Phaser and so far, i'm really loving it. So, i'm creating my new game which has a main menu in it and I don't really know where to begin. I know there are lots of packages out there but I would really like to know the basics first before I dive into using tools that are basically "magic" to me. I have tried reading through the code of EZGUI to understand how I would get my desired output, but I haven't reached that level yet so it's quite challenging. I have the spritesheet ready which I will be using for the game window (actually any window) that I got from the free Kenny assets: And what I want is for this to look a little like this, the problem is I don't know where to start. And I would like for the panels to be dynamic depending on the size of the content. I understand that creating the windows, panels, etc.. from any image editor and just be static, but scaling them in-game would affect their quality. Any suggestions will do. I'm still new to Phaser and I would not mind trying out any advice you could give. Thanks!
  15. Fill a curved Path

    i need help with a game i'm creating. I have used bezier interpolation to create a curved path, it gives a curved path with random coordinates in a particular range. However the issue that i'm facing is that i am able to get the outline of the path however i need to fill the area under the curve so that it look like a solid platform. i really need help with this.
  16. Help to create a curved path

    i need help with a game i'm creating. I need a platform which has a curved path and the player moves along the path created. I have created a path using Bezier Interpolation which creates a path using random points in a range. The issue is that i can only create the outline of the path and i need to fill the area under the curve so that it looks like a solid platform.
  17. hi im new to programming and phaser im making a game where i need to drag a "chip" onto a "chipreader" and when they overlap hide both and replace with a 3rd sprite which is a "chipped reader" and first i tried funtcion preload(){ game.load.images("chipreader"', images/chipreader) game.load.images("chip"', images/chip) game.load.images("chippedreader', images/chippedreader) } function create() { game.input.mouse.capture = true; game.physics.startSystem(Phaser.Physics.ARCADE); var chipreader=game.add.sprite(260, 535, "chipreader"); chipreader.anchor.setTo(0.5, 0.5); chip.inputEnabled = true; chip.input.enableDrag(true); game.physics.arcade.enable([chip,chipreader]); if (game.physics.arcade.overlap(chip,chipreader )) { chipreader.visible= false chip.visible= false game.add.sprite(260, 535, "chippedreader") }; but nothing happened and i tried so many other ways but it just isn't working :S
  18. Planning to learn Phaser - need advice

    I came up with this idea for an web application that needs to integrate with a JavaScript game, that's when I came across Phaser. I'm a backend developer by trade but learning JavaScript so any help here will be appreciated. What I'm trying to do: Create a website with ASP.NET and Bootstrap that would allow users to login and manage their profiles. In the member area of the website, you can play this very simple game that I'd like to create using Phaser (hopefully). The actions the user can make in the game will be available depending on the user's "available moves" that are tied to the user's profile. Example - The game will load and gets Billy's information from the session id, Billy has "three moves" that are stored on a SQL DB, to move in the game Billy will hit the "right arrow"(in-game), a HTTP request will check Billy's account to see if he has "available moves", if so, the game will process the request to "move right" and deduct 1 move from Billy's account, if he has no moves, the game will not continue or process the click or touch response. For security reasons I'd like the application server to own the logic of part of the game so that hacking or manipulating of code has to be validated before actions can be made in the game. I hope this makes sense. My question, is Phaser capable of this type implementation? Thank you!
  19. Hi, probably I dont fully understand how phaser engine works. For my test I inicialize 10k sprites and than immediately kill them ( sprite.kill() ). Unfortunately I have 15FPS, but I render nothing.. Why I have I have this FPS drop, I need kill sprites and revive it when I need them so I dont need any sprites's update, render, postupdate... functions. The debug plugin says slow around 20ms on preUpload-stage and 20ms postUpdate-stage. Can you someone help me please? Thank you very much Daniel
  20. ListView- plugin

    [] Im looking for som1 who can explain me how to add this library to game writed in node.js + phaser ( its all about new standars whenever i'm trying to add i get some stupid error's like "Syntax error" with "{" ets - i'll be very gratefull for explain
  21. Move world position on canvas

    Hi I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet. I have set the size of the canvas using the following code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render }); I have added a sprite that sits at the bottom of the screen full width (as expected) using the following: shapeMenu = game.add.sprite(0, 500, 'shapeMenu'); Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas). I have done this, but the world is sitting in the top left corner:, 0, 400, 400); Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)? Thanks!
  22. Animating other players

    Hello, I am creating realtime game using node + At the moment I'm trying to figure out how could I animate other players movements. This is how I put other players on map: socket.on('showPlayers', (data) => { for (var key in data.players) { if(key != players[key] = game.add.sprite(data.players[key].position.x, data.players[key].position.y, 'player', 1); } }); And Updating their positions: socket.on('updatePlayers', (data) => { players[].position = data.position; }); To animate my own player I am simply using: // Player player = game.add.sprite(48, 48, 'player', 1); player.animations.add('left', [3,5], 5, true); player.animations.add('right', [6,8], 5, true); player.animations.add('up', [9,11], 5, true); player.animations.add('down', [0,2], 5, true); Best Regards!
  23. If I have multiple states (say, 30) that are somewhat resource heavy (audio, background graphic, graphics), is it better to run a single preloader at the start and preload everything I'm going to need in the game, or preload the next state ahead in each state? So if I'm in a room, and can travel to 3 other rooms from my current room, should I be preloading those 3 rooms in my current state while the player is there, etc. or preloading them all in advance?
  24. Game seems slow when jumping.

    Hey, Still fairly new to game developing. Trying my hand at it. I've got most of a game created and have figured out a bunch of things. There are two glaring issues I can't seem to get past. My player has gravity applied. If he falls from a certain height and the gravity is high, he falls through the floor tiles. If I turn down the gravity so this doesn't happen, the game seems slow. You can check out a working version of the game at . I looked into switching to P2 Physics but it just seemed way more complicated than I needed it to be for this type of game. Any help will do.
  25. Hi I'm new to phaser and have been trying to use some of the examples as a starting point. I'm planning on using the "Pick Up Object" example, but restrict the area that the tetris shapes are placed in - so that they land on a solid platform. I would then add 3 x buttons to add more of the shapes onto the screen. Example here: Would the best way to achieve this be to build the solid platform using a kinematic sprite as documented here: If not, what is the best way define the area that the shapes are placed in - so they do not fall behind or in front of the platform and buttons? Thanks! Tom