Search the Community

Showing results for tags 'phaser 3'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 65 results

  1. Hello people, I have the next problem, I'm making a little game with phaser 3, and I getting a strange behavior with the camera. I have a tiled map, 640x640, and a little sprite of 16px. So I'm trying that the camera focus the player a little closer and follow the player, but.... 1) When I try to zoom the camera to see the player, (passing a integer 2, 3 o 4 to the setZoom method) the camera distances itself more from the sprite, instead of get closer . With setZoom (1): With setZoom (2): 2) If I try to put a slower value, as 0.1, 0.4, the zoom get the camera closer it works, but if I use the startFollow method that makes the camera follow the player, make the screen black (I think it's because focus somewhere else out of the map, but this is an expeted behavior: API Documentation ), if I don't use the startFollow, and update ScrollX, and ScrollY, it do it alright. (I get the effect that i want) but everything is working diferent from the expected behavior: the documentation says that higher values make the camera zoom in, no zoom out, also in this way, I have another problem, a new cam that I use has minimap, do not work if I use a decimal value for the zoom ON THE MAIN camera. I have this config for phaser: var config = { type: Phaser.AUTO, parent: 'phaser-example', width: 640, height: 640, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; At the end of the create method I have : this.cameras.main.setZoom(2); //this.cameras.main.setSize(1000); I try to change the camera size, because if I use a higher zoom, the "square" or size of the camera became smaller. **** I writting this from another machine, but I will update with Screenshoot and more code
  2. Bodman

    Transparent Background

    Edit: Never mind. Typescript Type Docs are just incorrect This must be an easy solution, but I can't figure it out. I'm trying to make phaser render with a transparent background, but I'm getting a black background every time. Here is my initialization new Phaser.Game({ type: Phaser.AUTO, width: Config.width, height: Config.height, scene: Scenes, parent:document.getElementById('game'), "render.transparent": true }); Anything I'm doing incorrectly? Thanks again,
  3. Hi, recently i moved from Phaser 2 to Phaser 3 and i started some new project. Here is my problem: In Phaser 2 its easy to add text to sprite like this: var sprite = game.add.sprite(...); var button_style = { font: "27px Verdana", fontWeight: "bold", align: "center", fill: "#000000", stroke: '#ffffff', strokeThickness: 2 }; button_text = game.add.text(0, 0, 'blabla', button_style); sprite.addChild(button_text); After few days i am very tired of searching to get solution on Phaser 3 to add text on sprite. Can anybody help me please ? Thanks in advance.
  4. Hello, I'm using Phaser 3 and the physics engine matter. I need to call a function when one object collides with a particular object. For example I have a tank, barrels, hearts. Then there will be bullets, other tanks, some other objects. You need to call the function when the tank collides with the barrel, it should explode, and if it collides with the heart, it will replenish life.'collisionstart', function (event) { bangBarrel(); }); this method calls the function in any collision. How to trigger the function when the tank collide with the barrel, and how to trigger the function when the tank collide with the heart?
  5. Hi, devs I have a Phaser 3 game that I just integrated into the app and it was running just fine on the iOS simulator with all images and sounds working just fine. But when I ran it on actual iOS devices, I cannot see images at some places in the game. What can be the possible reasons behind this? There is no error in the code I guess since it is working fine in simulator and desktop chrome.
  6. karanJK

    failed to load image

    i'm trying to load image on phaser 3 but on chrome consol says failed to load image also search for it, change code but can't solve it. here is my js code var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: {y: 500}, debug: false } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload() { this.load.image('sky','src/assets/sky.png'); } function create() { this.add.image(400, 300, 'sky'); } function update() { }
  7. AzraelTycka

    What happened to Lazer?

    Hi, I've been off the grid for a quite a while. I'd like to ask what happened to Lazer project? Is it now Phaser 3 or is that a branch of Phaser 2? Thank you guys.
  8. Hi all. I am currently developing a facebook instant game with Phaser 3 for the company I work for. One big issue that I can't seem to debug is that the game periodically loses input if it's backgrounded (as in the messenger app is backgrounded) and brought back to the forefront. One it loses input, it won't regain. It's as if it loses focus and won't refocus. The ticker is still going and it's rendering movement. Has anyone else had this issue? Anything to point me in the right direction would be great help. Cheers,
  9. Hello! Have 3 virtual button for moving player. Use arcade physics. Phaser version: 3.10.0 How to make when holding down button with your finger, the player began to move. What you need to add the condition? Create: this.input.addPointer(2); this.jumpBtn = this.add.sprite(650, 950, 'jump').setScale(0.4).setScrollFactor(0).setInteractive(); this.leftBtn = this.add.sprite(100, 950, 'left').setScale(0.4).setScrollFactor(0).setInteractive(); this.rightBtn = this.add.sprite(250, 950, 'right').setScale(0.4).setScrollFactor(0).setInteractive(); this.jumpBtn.on('pointerdown', function (pointer,pointerdown) { }); this.leftBtn.on('pointerdown', function (pointer,pointerdown) { }); this.rightBtn.on('pointerdown', function (pointer,pointerdown) { }); function update () { if (cursors.left.isDown) { player.setVelocityX(-200);'left', true); } else if (cursors.right.isDown ) { player.setVelocityX(200);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down ) { player.setVelocityY(-530); } }
  10. Hello! I'm found 'collision shapes parser from Tiled(full example)' for example, but there have only drawn shapes, without collision. Help me get collision into example for my Player. Code from Example: function create () { var map = this.add.tilemap('map'); var tileset = map.addTilesetImage('kenny_platformer_64x64'); var layer = map.createStaticLayer('Tile Layer 1', tileset); var graphics =; // Loop over each tile and visualize its collision shape (if it has one) layer.forEachTile(function (tile) { var tileWorldPos = layer.tileToWorldXY(tile.x, tile.y); var collisionGroup = tileset.getTileCollisionGroup(tile.index); if (!collisionGroup || collisionGroup.objects.length === 0) { return; } // You can assign custom properties to the whole collision object layer (or even to // individual objects within the layer). Here, use a custom property to change the color of // the stroke. if ( && { graphics.lineStyle(5, 0x00ff00, 1); } else { graphics.lineStyle(5, 0x00ffff, 1); } // The group will have an array of objects - these are the individual collision shapes var objects = collisionGroup.objects; for (var i = 0; i < objects.length; i++) { var object = objects[i]; var objectX = tileWorldPos.x + object.x; var objectY = tileWorldPos.y + object.y; // When objects are parsed by Phaser, they will be guaranteed to have one of the // following properties if they are a rectangle/ellipse/polygon/polyline. if (object.rectangle) { graphics.strokeRect(objectX, objectY, object.width, object.height); } else if (object.ellipse) { // Ellipses in Tiled have a top-left origin, while ellipses in Phaser have a center // origin graphics.strokeEllipse( objectX + object.width / 2, objectY + object.height / 2, object.width, object.height ); } else if (object.polygon || object.polyline) { var originalPoints = object.polygon ? object.polygon : object.polyline; var points = []; for (var j = 0; j < originalPoints.length; j++) { var point = originalPoints[j]; points.push({ x: objectX + point.x, y: objectY + point.y }); } graphics.strokePoints(points); } } }); Properties Player: player = this.physics.add.sprite(400, 300, 'Player', 14); player.setCollideWorldBounds(true); this.physics.add.collider(player, Layer);
  11. Corey Van Hoosen

    Monarchies of Wax and Honey Take on the role of a queen honey bee looking to build a hive. She can start and build a colony by birthing workers and setting their tasks. Workers can forage flowers for nectar and pollen, nurse the brood, build new hive cells, and defend the hive from wasps and other players. How to Play Press and hold where you want to go , and the queen bee will head there. Place a hive with the 'new hive' button to place new hive cells. Press a nearby hive cell to select it. Place eggs there with the 'lay egg' button. Press one of your own workers to select them. Choose their job from the buttons below them. Foragers gather pollen and bring it to empty hive cells. Nurses bring collected pollen to your larvae ( which then become pupae before finally birthing as new workers ), and builders eat honey and build new hive cells. Press 'attack' to toggle alarm pheromones in your workers. They will attack wasps, the nearest enemy bees, and player queens. Work In Progress The game is still in active development, bugs continue to be found and patched, and feedback on ways to improve the game is very welcome. Planned Features In-game tutorial Social logins and player accounts. Earn honey to unlock new bees and abilities. Sound & music Skeletal animation Where to Play Download the game through the Play Store, or on
  12. andrei.nicolae

    Pop-up window

    Hi guys, I'm trying to make some windows(pop-ups) that I will use in my game, these are for game over, game won or showing different text tips. Will contain text, buttons, sprites. What is the best way to achieve this? If I use a container, how can I show/hide it? This environment is new for me so I'm open to suggestions and ideas. Thank you!
  13. josh_at_plow

    Plow Games 16-Bit Office Tour

    Hi everyone, At Plow Games, we have been working on our new company website and have just soft-launched the first phase: A 16-Bit, Zelda-perspective game that allows players walk around our new office building and meet everyone at Plow. Made with Phaser 3, the game is playable on all modern browsers, including desktop, mobile, Wii U and Xbox One. We hope you all enjoy the game! Direct Game Link: Features: Playable with the keyboard, in-game touch controller, USB gamepad, Wii U gamepad and Xbox One controller Play in portrait or landscape with a fully responsive interface Three floors to visit 16-Bit pixel art Notes: Audio is muted, by default, and can be turned on in the Help menu. There is no point-and-click navigation. All interaction is done with the keyboard, gamepad or in-game touch controller. The in-game touch controller can be set to hidden or visible in the Help menu, for players that just want a solid black background. The touch controller will still work when it is hidden. The in-game touch controller can be also controlled with the mouse. On Wii U, due to the available browser, the framerate is a little slow, and audio cannot be enabled. We also have disabled the in-game touch controller to save on memory. However, the game is still very playable, since all animation is done with delta time. There’s even a max delta time that ensures the physics won’t let the player pass through any collision areas. We’ve always wanted to make games for Nintendo systems, so we’re very glad to have gotten the game running on the system. Controls for Keyboard Arrow Keys/WASD: Move and navigate menus Spacebar/Enter: Confirm menu selection 1: Toggle pause game Help menu Controls for Mobile D-Pad: Move and navigate menus Purple Button: Confirm menu selection Gray Button: Toggle pause game Help menu Controls for USB Gamepad, Wii U Gamepad and Xbox One Controller D-Pad/Left Stick: Move and navigate menus Face Buttons: Confirm menu selection Start/Select/Shoulder Buttons: Toggle Help menu Screenshots:
  14. Hi All! I have a question. A Player who has collision. For each object I have to assign this.physics.add.collider(player, group); this.physics.add.collider(player, objectLayer); How to give collision globally ? Just give collider player and other object separately.
  15. Peterz17

    Cards game like blackjack

    Hello my name's Peter, I'm a student I'm a beginner i want to learn and build some cards game like blackjack, solitaire i can't show cards and shuffle them. it's hard to make it i have some examples from Phaser2 it's make me can build and understand beginner projects but "Phaser3" i'm very confused, can you get some examples or code for learn ? Thank you for help me
  16. Hello everyone! I've been a lurker on this site for most of the time and the threads here helped me time and time again to sort things out. I'm currently trying to get a simple Jump'n'Run Game going, but I'm struggling with the collectibles. I'm using a Tiled Object Layer and imported it succesfully into the game. However, the overlap between the objects and the player just isn't working. I've tested the collectPoint1 function on another object and it worked. Also the sprites are all visible in my game. Really, the only problem is the overlap. class Level extends Phaser.Scene { constructor(){ super({ key: 'Level' }); }; create(){ let scene = this; let map = this.make.tilemap({ key: 'Level1'}); let player1_config = {...}; //Player 1 this.player1 = new Player1(this, player1_config); //Setting the score-data'player1Score',0); //Animation of the Coins var coinSpin_config = { key: 'spin', frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }; this.anims.create(coinSpin_config); //Using createFromObjects to display the coins this.points = map.createFromObjects('HousePoints', 'point', {key: 'coin'}, this); this.points.enableBody = true;'spin', this.points); //Score-text this.scoreText = this.add.text(30, 22, 'Score for ' + this.playerHouse + ': 0'); this.scoreText.setScrollFactor(0); }; //Collecting Points collectPoint1 (player, coin){ var score ='player1Score');'player1Score', score + 10); this.scoreText.setText('Score: ' +'player1Score')); coin.disableBody(); } update(){ this.player1.move(); this.physics.add.overlap(this.player1, this.points, this.collectPoint1, null, this); } } } As I'm well aware of this post, I've tried it with map.getObjectLayer as well. Didn't work. I'm a huge fan of this template, but its structure is so very different to mine that it down't really help me. . . . . this.housePoints =; const objects = map.getObjectLayer('HousePoints'); let housePoints_config = { scene: this, collected: false } objects.objects.forEach( (point) => { //Creates a Points Object defined in a Points class (see below) point = new Points(this, housePoints_config); this.housePoints.add(point); }); . . . . . } update(){ this.player1.move(); //This throws the error 'spin is not a function', but that's not my focus this.housePoints.spin(); //This overlap doesn't work either this.physics.add.overlap(this.player1, this.housePoints, this.collectPoint1, null, this); } } ///////////////////////////////////////////// ///This is in another .js file naturally//// /////////////////////////////////////////// class Points extends Phaser.Physics.Arcade.Sprite { constructor(scene, config) { super(config.scene, config.x, config.y);; this.scene = config.scene; this.collected = config.collected; this.scene.add.existing(this);; var coinSpin_config = { key: 'spin', frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }; this.anims.create(coinSpin_config); } spin(){'spin', true); console.log('point updated'); } } I'd be eternally thankful for every tip! Thanks so much, if you decide to take the time to help me.
  17. Hi, I'm working on creating interactive buttons which, when clicked, will set the colour of the player. I've managed to do this successfully, in Phaser 3, but the code is quite bulky and ugly looking. I've just been gathering what examples I can through the website, but I'm certain there must be a better way to do this. Here's what I've got: I think what I want to do is create a class for "smalltiles", but I'm not sure how the inheritance should work for using alongside Phaser 3. I've tried writing something like in several different ways, without success: Does anybody have any insight as to how I might be able to do this better? Thanks for the input in advance.
  18. My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here. My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo! var config = { type: Phaser.AUTO, width: 1000, height: 600, scene: { preload: preload, create: create, pack: { files: [ { type: 'image', key: 'loading', url: 'assets/laptop.png' } ] } } }; var game = new Phaser.Game(config); function preload () { loading = this.add.image(500, 300, 'loading'); var progress =; this.load.on('progress', function (value) { progress.clear(); progress.fillStyle(0xffffff, 1); progress.fillRect(300, 270, 800 * value, 60); }); this.load.on('complete', function () { progress.destroy(); loading.destroy(); }); //...load other files } .
  19. Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.
  20. Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function:'default', true); //body animation if(facekey == 'catfacegoth'){'gothblink', true); // face/eye shape'blink', true); //this is the pupil layer } if(facekey == 'catface'){'faceblink', true); // face/eye shape'blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?
  21. Hi all! Does anyone know where I might look to find some tutorials regarding best practices (basic phaser 3 game code/file structures) and perhaps some resources on STATES? If I could get some resources for using states in Phaser 3 I would really appreciate it! I keep running into an issue with "game.state.add" being undefined? Basically, if someone could point me to some very basic JS related Phaser 3 tutorials (video or article is fine) I would greatly appreciate it! P.S. A little background on me: Several years of experience using PHP/MySQL, released several text based RPG's, designed an open source CMS and assisted a startup for a little while. I have very little experience/knowledge with Javascript/ECMAScript
  22. Hello, I'm new to Phaser 3 and I'm trying to make a vertical scrolling shooter as I learn. So far I've been able to make the player shoots bullets by translating this tutorial from Phaser 2 into Phaser 3: But I'm stumped when I try to implement the weapon changing system into Phaser 3. I'm not very experienced in javascript and how it handles classes/objects and I'm mainly a Unity developer. And as far as I know, Phaser 3 docs are still incomplete so I can't actually look through it to find equivalent or similar methods from Phaser 2. For now, I'd like to create a weapon type that slows enemy movement speed. Pointers on how to approach this in Phaser 3 would be very helpful. Thanks.
  23. I was trying with Phaser where i saw that this gets some kind of blurred when moving (ingame) Testet it in Canvas & WebGL both had the same result then i tried it to setting `pixelArt` to false in the gameconfig and when i tried it then, it worked smooth, but it seemd that it had activated some kind of antialiasing so it got washed-out but the moving was smooth Phaser 3.8 (Original) Tileset tiles 16x16 (no spaceing / margin) (Extruded) Tileset tiles 16x15 (1px margin / 2px spaceing) Map made with Tiled Vivaldi & Chrome & Windows Edge Tileset Extruder: Code Example / Project: Original Question: (moved to here)
  24. Hey guys, I am using Phaser 3.8.0 I was looking at this as an example\input\mouse\text input test.js and it appears to be working on Phaser 3.8.0 on the sample but when I use the code below in my scene's "create" method, I can see the event in my console logs and if I change the code to "setColor('red')" the text properly turns red... just curious what I am doing wrong here or missing with setting the tint of the font? encounterSceneContext.menuAttack = this.add.text(55, 210, "Attack", { fontSize: '10px', fill: '#ffffff' }); encounterSceneContext.menuRun = this.add.text(55, 225, "Escape", { fontSize: '10px', fill: '#ffffff' }); encounterSceneContext.menuAttack.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuAttack.width, encounterSceneContext.menuAttack.height), Phaser.Geom.Rectangle.Contains); encounterSceneContext.menuRun.setInteractive( new Phaser.Geom.Rectangle(0, 0, encounterSceneContext.menuRun.width, encounterSceneContext.menuRun.height), Phaser.Geom.Rectangle.Contains); this.input.on('gameobjectover', function (pointer, gameObject) { console.log("gameobjectover"); gameObject.setTint(0xff0000, 0xff0000, 0xffff00, 0xff00ff); }); this.input.on('gameobjectout', function (pointer, gameObject) { console.log("gameobjectout"); gameObject.clearTint(); });
  25. I have an old school RPG I am making and I have two main scenes, the Overworld and Encounter scenens. The overworld is fine when switching to it but the problem is the Encounter, before I switch to it, I reset it so I can recreate it from scratch with a random monster in it. The problem is, every time I switch/restart the Encounter scene, the animation of the creature gets progressively faster. I do remove the animation key so I dont get the warning when I switch back to the Overworld scene. Just curious if I am taking the right approach to this and if so, do I need to clean up the sprite of the monster before hand so it doesn't make the animation speed up?