Search the Community

Showing results for tags 'phaser3'.

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
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 171 results

  1. I think if you have done these lines of code:'staraudio', 'assets/starAudio.mp3');'jump', 'assets/jump.mp3'); then you can do: this.sound = this.sound.add('jump');; and then after a user does something a little latter this.sound = this.sound.add('staraudio');; the first one works, the second .add gets me StarsGame.js:18 Uncaught TypeError: this.sound.add is not a function i even coded a function to change sounds; changeSound = function (number) { if(number ===1){ this.sound = this.sound.add('jump'); } if(number ===2){ this.sound = this.sound.add('staraudio'); } } and I can call that from various places in my game (once) and then do a; if I call it only once, using either a 1 or 2, then that sound works throughout the game, but if I try and call it a 2nd time to change the sound (or even just passing in the same int as the 1st time, I get StarsGame.js:18 Uncaught TypeError: this.sound.add is not a function It makes me think I need to call some function I can't find, like this.sound = this.sound.clear(); this.sound = this.sound.unload(); or something so that it will again allow me to pass in a sound key. thanks
  2. I have this map created in Tiled, with an object layer for the doors. And this door object has a custom property "link", which should tell where the door goes. In phaser, I created an object layer for this doors and put them in to a new static group (this.physics.add.staticGroup). And if the player hits this door object, a method get called: this.physics.add.overlap( this.player, doors, this.enterDoor , null, this ). And there, in the enterDoor method, I want to read the "link" property, so I can switch the scene based on that value, which tells where to go next. But I am not able to get it there, it not seems to be possible to even add this value to the childs of the group, because already there, these values get lost. I am looking for a solution to this problem. These are the parts of the relevant code: Part 1, colliding with the door works without problems. Only thing there is, I have a missing sprite picture in game, but I do not want to use any sprite for the door. It should be a invisible area and if the player hits, it should go to the next scene. create() { = this.add.tilemap( 'map1' ); var tileset = 'main', 'tiles' ); this.firstLayer = 'layer1', tileset ); this.secondLayer = 'layer2', tileset ); this.thirdLayer = 'layer3', tileset ); this.createPlayer( 400, 400 ); this.secondLayer.setCollisionBetween( 1, 2000 ); this.physics.add.collider( this.player, this.secondLayer); this.objectLayer = 'objectLayer' ); var doors; this.objectLayer.objects.forEach( ( object, index ) => { if (object.type === 'door') { object.key =; object.setXY = { x: object.x + 16, y: object.y + 16 }; doors = this.physics.add.staticGroup( object ); //doors[ index ].set( 'link', ); } }); this.physics.add.overlap( this.player, doors, this.enterDoor , null, this ); } Part 2, this is the enterDoor Method, called if the player hits the door. There I want to read the property and based on that, go to the next scene. enterDoor( player, door ) { console.log( ); //undefined door.disableBody( true, true) ; this.scene.switch( 'Outside', Outside ); // it should be like this: // this.scene.switch(, ); }
  3. I started playing around with Phaser 3 particles and ended up creating an RTS game prototype. The game also supports touchscreen and runs nicely on mobile browsers. If you are looking for and old-school RTS game, give it a try and leave a comment 😀 Direct game link:
  4. Sup my dudes, My latest game Bouncy Woods was released just yesterday on Poki - It was developed with Phaser 3 and MatterJS. Matter was pain in ass to deal with because I really needed "bullet" like bodies for this game and Matter doesn't support it. So sometimes you can notice "tunneling" issue - when balls go through blocks. If you have any feedback or questions regarding the game - please let me know. Gameplay video
  5. Hello! I created a new game Exploding Shapes - be fast and push out different shapes out the view before they explode! Game available at Play Exploding Shapes Enjoy!
  6. This is a copy of the first devlog I published on my blog a few months ago. You can see all the devlogs and sign up for the newsletter to get the next ones directly to your email at Devlog 1 Few days ago I have decided to start an RPG project, as that’s what I’ve always wanted to make. I will be fairly limited with graphic assets and time, but at least the coding part will be fun. I will make do with what I have available. Right now I have depth sorting implemented: I’m using art assets. Tiled for level editor. Haxe as programming language. Phaser 3 as framework. Coffee as fuel. So far I’ve went through map loading (surprisingly simple in Phaser 3), animations based on keyboard input and basic collisions using Phaser’s Arcade. Then I switched to using Differ for collisions, because Phaser’s Arcade physics couldn’t handle custom shapes per tile by default. Given that I expect more requirements from the collisions/physics system, I like having more control over things instead of letting Phaser handle it all for me. After that, it was time to refactor all the code, because it was getting messy. I choosed to use ECS architecture, because I used it before and I find it very nice for these kind of games. Especially considering how big the game might grow, it’s important to keep the code clean. I was deciding between using Elias Ku’s ECX library and Kevin Leung’s ECS. Ultimately it probably doesn’t matter, but I chose Kevin’s. At this point the ECS consists of RenderSyncer, KeyboardInput, Movement, PhysicsDebugDraw, PhysicsSystem systems, and Velocity, ActorState, DifferShape, InputControllable, Position, Renderable, StaticCollidable components. This will change a lot as the work continues. Next I made a custom preprocessor for Tiled level files. I’m converting them to custom JSON that contains only the data I need, in format the game expects. This also allows for making rudimentary checks against typos and missing data. It also means I’m no longer using Phaser’s tilemap loader, and instead had to write a bit of code to populate the tilemaps myself. While this is some extra work, it allows for special handling. Last thing I did was implement depth sorting. Phaser can’t render different tiles at different depth, or allow you to insert something (like a moving character) in between tiles. If you look at the GIF on top, you see the character can move behind and in front of the tree log and the sign board. If they were part of a Phaser’s tilemap layer, it wouldn’t work. Instead, I mark the layer in Tiled as requiring depth sorting, and the game then creates individual depth sorted sprites. This way I didn’t have to change the level editing workflow and won’t need to manually handle future similar cases. Next I plan to work on some UI, changing location (loading different maps, like insides of a building), NPCs and interaction, and combat system. Subscribe to newsletter.
  7. I just wanted to share this tool to help with designing/styling web font text for Phaser 3. You can adjust various TextStyle properties and see the result rendered in real-time in a Phaser Scene. When it looks good you can just copy the code as needed. Iterating on text styles can be quite slow when you need to reload after each change or go back and forth between the docs and your code. This should help speed that up! There's a built-in color picker, Google Font search, light vs dark background toggle, and more. 🤗
  8. Hi everyone, A new game developed using phaser3 and published in my website Game Link : The Baby boss is thrilled about his photo shoot for upcoming candidacy. He wants to make a show by wearing some cool outfits. Beach baby or skater baby ? Casual baby or a pro style office baby ? Hip-hop baby or a mini superhero ? Boss is overwhelmed with choice. Help the baby boss choose and try different dress up and make over outfits to enjoy delivering a stunning appearance.
  9. Rubek

    Can't load images

    I can’t load images for my phaser game? This is the problem I am trying to solve but I don’t know whatt now what mistake I have done. This is my index.html code, <!DOCTYPE html> <html> <head> <script type="text/javascript" src="phaser.min.js"></script> </head> <body> <script type="text/javascript" src="game.js"></script> </body> </html> And this is game.js code, function preload() { this.load.image('plant', 'plant.png'); } function create() { this.add.image(50,50, ‘plant’); } function update() { } const config = { type: Phaser.AUTO, height: 600, width: 600, background: 0x123456, scene: { preload: preload, create: create, update: update, } } const game = new Phaser.Game(config); The google console says, "Access to XMLHttpRequest at ‘file:///C:/wamp64/www/rungame/plant.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." Also, there are other two messages by the console, Screenshot_21364×166 10.7 KB What wrong did I do? Please help
  10. Hi, I was using matter physics and tried to check collisions from a lot of objects and then I got some issues. The problem: I have a lot of objects (called them "luz" in the code) and I want to release them on air and making them fall. Then when they touch the floor I want to trigger something: - if it is a even object: I want to reduce its Alpha to 30%. - if is an odd object: I reduce their scale by half. Currently I'm handling this situation in my real project by checking update() { if (luz[i].y > floor.Y) { /* do something */ } /*...*/ } but I'm looking for a better and more flexible and robust solution. So here is my code: class GameScene extends Phaser.Scene { constructor () { super('GameScene'); } preload() { this.load.image('luz', 'luz.png'); } create() { // create elements on air for (var i=1; i<=7; i++) { var luz = this.matter.add.image(i*100 + 10, 50, 'luz') luz.body.label = i%2 == 0 ? "even luz" : "odd luz" } // add the floor this.matter.add.rectangle(400, 550, 800, 50, {isStatic: true}).label = "floor" // check collisions'collisionstart', function (event, object1, object2) { // this only prints the first object console.log(object1.label + " collides with " + object2.label) switch (object1.label) { case "odd luz": object1.gameObject.alpha = 0.3; break; case "even luz": object1.gameObject.setScale(0.5); break; } }) } } Live example here: Video showing the problem: My questions are: - Am I handling collisions correctly? is this the proper way? - Should I implement my own collision checking system? - Is checking by label a bad design/practice? Thank you for your time and help!
  11. Quite a newbie on phaser, developing a new product and I saw this regarding phaser 2: Does this still happens on Phaser 3? Or is it possible to render an SVG correctly now? I'm having the following problem: Say I have this svg: and when I render to my game, thats the result I got: (I'm not scaling it) 1- Whats wrong with that? And how can I fix it? 2- Also, is there a way to scale the svg without deforming it? I'm using setScale(x) and the image gets real ugly
  12. (Phaser3)We are creating an application which renders the same scene with DIFFERENT location of same assets everytime a button is clicked. We want to slow down the rate at which the state of scene changes. We do not have a physics attribute in our config We did try referring to phaser3 examples and use fps, timeScale, timedEvent but we were not able to achieve what we wanted. The scene: The scene is pretty similar to ‘chess game’. Scene has a 9*8 grid. Scene has an image asset at one of the grid(be position 1,1) Once user presses ‘next’ the grid is created and displayed again with the asset image on a different location Essentially the image asset moves to 2,1 from 1,1 The movement is not a move function within the scene rather a whole different grid is rendered with the image on 2,1 The rendering of grid, every time ‘next’ button is clicked is very fast. I would like the rendering to slow down so the rendering looks like a smooth movement. An example is shown below. (Image clipped from state1: state2: https:/
  13. Hello All, I'm new to Phaser and the world of HTML game development so I'm trying to learn the ins and outs of Phaser 3. Past several days I've been trying to get some sprite animations working via an atlas but not having much luck. The feet would not stay aligned to the floor. I'm assuming it has to do with the physics body since I can get it to work as intended via a sprite sheet or with an atlas without the physics involved. I've tried messing with the body.setSize() and the setOrigin() to the sprite itself but luck. I've attached the quick demo of the problem. The attachments go into the "assets" folder and the index.html code is below. Apologies ahead of time if I'm not going about posting the example in the proper way...let me know if I am. In the demo I've got three versions of the sprite: The first (dude1) is created via sprite sheet and works as expected. The second (dude2) is created with an atlas with no physics and plays the animation as expected The third (dude3) is created with the same atlas as the second but I've added the physics to it. As it animates it seems to jitter vertically and will go through the floor. The atlas png/JSON was created using TexturePacker and I've added a pivot point right at the left feet of the sprite. Any help would be very much appreciated. -Ray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//"></script> <style> body { background-color: grey; } </style> </head> <body> <script type="text/javascript"> const config = { type: Phaser.AUTO, parent: "phaser-example", width: 600, height: 400, pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); function preload() { this.load.image('ground', 'assets/platform.png'); this.load.spritesheet("dude1", "assets/king_spriteSheet.png", { frameWidth: 78, frameHeight: 58} ); this.load.atlas("dude2", "assets/king_atlas.png", "assets/king_atlas.json"); } function create() { let floor = this.physics.add.staticGroup(); floor.create(0, 400, 'ground').setScale(3).refreshBody(); this.anims.create({ key: "dude1_idle", frames: [ { key: "dude1", frame: 0, duration: 1000 }, { key: "dude1", frame: 1, }, { key: "dude1", frame: 2, }, { key: "dude1", frame: 3, }, { key: "dude1", frame: 4, }, { key: "dude1", frame: 5, }, { key: "dude1", frame: 6, } ], frameRate: 10, repeat: -1 }); this.anims.create({ key: "dude2_idle", // frames: this.anims.generateFrameNumbers('dude2', { start: 1, end: 8 }), frames: [ { key: "dude2", frame: "Idle (78x58)_01", duration: 1000 }, { key: "dude2", frame: "Idle (78x58)_02" }, { key: "dude2", frame: "Idle (78x58)_03" }, { key: "dude2", frame: "Idle (78x58)_04" }, { key: "dude2", frame: "Idle (78x58)_05" }, { key: "dude2", frame: "Idle (78x58)_06" }, { key: "dude2", frame: "Idle (78x58)_07" }, { key: "dude2", frame: "Idle (78x58)_08" }, { key: "dude2", frame: "Idle (78x58)_09" }, { key: "dude2", frame: "Idle (78x58)_10" }, { key: "dude2", frame: "Idle (78x58)_11" } ], frameRate: 10, repeat: -1 }) this.dude1 = this.physics.add.sprite(100, 250, "dude1");"dude1_idle"); this.dude1.body.setSize(50, 30) this.physics.add.collider(this.dude1, floor); this.dude2 = this.add.sprite(150, 352, "dude2");"dude2_idle"); this.dude3 = this.physics.add.sprite(200, 250, "dude2", "Idle (78x58)_01");"dude2_idle"); this.physics.add.collider(this.dude3, floor); this.cameras.main.setBackgroundColor("#AAAAAA"); this.cameras.main.setZoom(2); this.cameras.main.setScroll(-100,80) } function update() { console.log( // `D1-F: ${this.dude1.frame.height} D1-B: ${this.dude1.body.height}`, // `D2-F: ${this.dude2.frame.height}`, `D3-F: ${this.dude3.frame.height} D3-B: ${this.dude3.body.height}` ) } </script> </body> </html> king_atlas.json
  14. Here's a small game I created using Phaser. Hope you enjoy it!
  15. Hi, I wanted to make a game that's really challenging and simple at the same time. Something that will require some skills and not just a simple mindless game that shows a lot of ads. Something that you will need to get used to first, learn the rhythm of the game and then be able to complete the levels. So after 5 months (only working on the weekends; not all weekends), I have finally released a playable version of the game in the Google Play Store. Let me know what you think. I would really appreciate some feedback and what you think about the game. It's not much, but hey, I'm actually proud of it Oh and one more thing, it really does require "some" skills. Play Store Link:
  16. Hi everyone! Before anything I wasn't sure if this was the correct place to post this, please moderators move it as you consider if this should go to some other place like Projects and Demos. Also, please consider that this is my first implementation ever! I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming. This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client. After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow. So.... This is a really simple base MMORPG game created based on the Colyseus samples: And on the Phaser 3 implementation from Jacky Rusly: As you will see I've considerable modified how the jrgame was interacting with in order to make it works as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client sorry Jacky!) The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far). Here's the link to the repo: Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback! I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like: But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus. I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful. I really hope this help more than one person, maybe someone like me who would love to get this as starting point. Best, Damian Reply
  17. Hi all I'm using Angular4 with Phaser 3 beta 20. I need to have separate classes for the Game Scenes so that I can use different game scenes any time I wish. I need to be able to call a function in the parent component that affects the parent component variables. This is probably a totally newbie question so please forgive me, but it's stumped me for the moment on how the scope works. Please see the following code: import { Component } from '@angular/core'; import Phaser from 'phaser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { phaserGame: Phaser.Game; carrot: any; preloadStatus: string = "Preloading"; config: any; gameScene: Phaser.Class; getScene() : any{ return { Extends: Phaser.Scene, initialize: function GameScene(config) {, config); }, preload: function () { this.load.image('carrot', 'assets/carrot.png'); console.log("Phaser game loading done"); this.FromInGame(); }, create: function () { this.carrot = this.add.image(400, 300, 'carrot'); }, update: function () { this.carrot.x += .2; } } } constructor() { let theScene = this.getScene(); theScene.FromInGame = this.FromInGame; this.gameScene = new Phaser.Class(theScene); this.config = { type: Phaser.CANVAS, parent: 'phaser-example', scene: this.gameScene }; this.phaserGame = new Phaser.Game(this.config); } FromInGame() : void{ console.log("called from in game"); this.preloadStatus = "Preload DONE!"; } } I need the FromInGame() function to be fired from the Scene's preload() function, which it is. However, in the FromInGame() function "this" clearly references the Scene because "theScene.FromInGame = this.FromInGame;" is setting it as a function on the Scene. Therefore when executing "this.preloadStatus = "Preload DONE!";" it adds a property preloadStatus with a value "Preload DONE!" to the Scene and rather than updating the this.preloadStatus in the Angular component. Any ideas how I would achieve this please? Thank you very much in advance. D
  18. I'm going through the tutorial, and added some tweaks. After all the stars are collected, the new stars and bombs appear, but collisions with the player and stars are not registered any longer. This is my code: <!DOCTYPE html> <html> <head> <script src=""></script> </head> <body> <script> var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); var score = 0; var scoreText; function preload () { this.load.image('sky', 'assets/sky.png'); this.load.image('ground', 'assets/platform.png'); this.load.image('star', 'assets/star.png'); this.load.image('bomb', 'assets/bomb.png'); this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 } ); } function create () { this.add.image(400, 300, 'sky'); scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); platforms = this.physics.add.staticGroup(); platforms.create(400, 568, 'ground').setScale(2).refreshBody(); platforms.create(600, 400, 'ground'); platforms.create(50, 250, 'ground'); platforms.create(750, 220, 'ground'); player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); this.physics.add.collider(player, platforms); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); stars ={ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); this.physics.add.collider(stars, platforms); this.physics.add.overlap(player, stars, collectStar, null, this); bombs =; this.physics.add.collider(bombs, platforms); this.physics.add.collider(player, bombs, hitBomb, null, this); } function hitBomb(player, bomb) { this.physics.pause(); player.setTint(0xff0000);'turn'); gameOver = true; } function collectStar(player, star) { if (star.dying) { return; } star.dying = true; var cnt = 0; star.setBounceY(0); var ph = this.physics; var timer = this.time.addEvent({ delay: 50, // ms callback: function () { cnt++; scoreText.setText('Score: ' + (score + cnt)); star.setScale(1.0-cnt/10); if (cnt === 10) { timer.remove(); score += 10; star.disableBody(true, true); if (stars.countActive(true) === 0) { stars.children.iterate(function (child) { child.setScale(1.0); child.enableBody(true, child.x, 0, true, true); }); var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); var bomb = bombs.create(x, 16, 'bomb'); bomb.setBounce(1); bomb.setCollideWorldBounds(true); bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); } } }, loop: true }); } function update () { cursors = this.input.keyboard.createCursorKeys(); if (cursors.left.isDown) { player.setVelocityX(-160);'left', true); } else if (cursors.right.isDown) { player.setVelocityX(160);'right', true); } else { player.setVelocityX(0);'turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } } </script> </body> </html>
  19. Hi all, I have a scene and a player, the player needs do something in the core game loop. Whenever I run into a situation like this I always end up creating an update method on the sprite/image/whatever and calling it from the scene like this: class Level1 extends Phaser.Scene { constructor () { this.player = new Player() } update () { this.player.updatePlayer() } } class Player extends Phaser.Physics.Matter.Image { updatePlayer(){ //do something } } It doesn't look too bad in this example, but I find things get messy once you start dealing with half a dozen game objects that all need to updated, sometimes I'll need to check if any of the game objects exist before calling their update method, adding to the mess. Is there a better way to do this? I know Unity/Unreal have game objects with update methods that just work™ without any need to connect them to the game's main update loop Thanks!
  20. Hi, I created a mobile game called “Circle Status” and developed it with my wife. The game takes place in a 2-dimensional world inhabited by polygons, inspired by Edwin Abbott’s Flatland universe. This is a world where polygons with fewer sides are seen as lower class citizens and those with many sides are considered the elite. You start off as a ‘lowly’ triangle and the goal is rise up the social ranks all the way to a circle. You do so by eating your peers and can use a variety of power-ups to help you along the way. We wrote up a blog on our process if anyone’s interested. The game can be downloaded here: Android Apple Please let me know what you think!
  21. Hi, I'm happy when I found this forum couple of weeks ago. I was reading many of the post regarding frameworks to learn more. Thanks! We (University of Extremadura) want to develop a free and open source game for highschools for the girls and boys to learn to program. The idea that we have is really similar to this game mechanisms: (thematic and language to learn will be different and our target are mobile web browsers). For the code editor we have already selected codemirror. However, for the game framework, being a really simple moving and interaction mechanisms (no phisycs, 2D, only with 4 different rooms and badgeds as reward), we are not sure about going directly with typescript, pixi or phaser. Any advice would be welcome.
  22. Hello, I'm looking at creating a fully responsive Phaser 3 game that would work for mobile (landscape/portrait) and desktop. I've been working with game development for a couple of years and I have a total of 7 years of programming experience. I recently started creating a game in Phaser 3 (5 months ago) and found it difficult to scale the game assets if you want the canvas to fit the entire parent div (which happens to be 100% window height and width, without using fullscreen). I've attached an image that somewhat describes what I'm trying to achieve. If the blue rectangle was the canvas I could be using the Phaser.Scale.FIT property and then positioned the canvas using a parent div. But, this is not what I need. My problem is with mobile portrait, I need the red area to also be canvas, whilst the blue area is the game (as it would look on landscape / desktop). This way particle effects or score could be drawn in the red area instead. The dream would be that I could make the game camera act the same way inside the canvas, as the canvas can inside a parent div. But I've only found the setZoom function on cameras that doesn't seem to do the job. Is there anyone of you that can recommend any resources (books, forums) that I can read to get a better understanding of how to scale a game in Phaser 3? Or perhaps have some tips on how assets/game can be scaled this way inside a canvas? I found some examples from phaser 2 and 3 that I've looked at for inspiration before deciding to create this post: Important notes: The game assets are designed based on canvas size 1280x720. The canvas has a transparent background, so it's really only important to make assets fit the blue area and without being stretched.
  23. there seems to be something wrong with the code, one button has to slow down and one button to speed up when I add this code, this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); but, when I add this code between generateBalls (), it doesn't work at all, it doesn't work, generateBalls() { const hitArea = new Phaser.Geom.Rectangle(0, 0, 32, 32); const hitAreaCallback = Phaser.Geom.Rectangle.Contains; const circle = new Phaser.Geom.Circle(400, 300, 220); const balls =, { key: 'balls', frame: [0, 1, 5], repeat: 5, setScale: { x: 3, y: 3 }, hitArea: hitArea, hitAreaCallback: hitAreaCallback, }); this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); Phaser.Actions.PlaceOnCircle( balls.getChildren(), circle); return balls; } generateDance() { this.spinSpeed = 0.003; return this.tweens.addCounter({ from: 220, to: 160, duration: 9000, delay: 2000, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); } update() { this.playerEyes.update(); Phaser.Actions.RotateAroundDistance( this.balls.getChildren(), { x: 400, y: 300 }, this.spinSpeed,; } I took the code from the Phaser 3 example this is
  24. Here is some Phaser 3 / SignalR multiplayer Tanks game for desktop or mobile: Please PLEASE send me some feed on your first glance of the game, and thank you in advance!! Edit (2019-Dec-19 10:25 p.m.): Fixed canvas for mobile but im working on buttons, so desktop meanwhile Edit (2019-Dec-21 06:02 p.m.): Added mobile joystick and button to shoot, it enables/disables when u r on mobile or not, in PC uses arrows and space bar. Added some console to check on objects. Edit (2019-Dec-23 12:13 a.m.): Added preload screen, ordered some messed code, and added Ping number to console. Soon: Players Hall of Fame! Edit (2019-Dec-25 10:42 p.m.): Had some problems with my hosting, so moved to Azure and now websockets work nicesly!. Fixed some animation and bugs too. Edit (2019-Dec-28 10:06 p.m.): Added High Score, now dead players/bots drop some "hearts" that give the one who take it some health, added input for "Player Name" to score the High Score. Edit (2019-Dec-29 10:06 p.m.): Fixed some bot AI issues to improve performance. Edit (2020-Jan-04 12:39 a.m.): Added tile map (and map collision logic applied to tile map).
  25. Hi all I have small problem. I have an spritesheet and background music, when i click on my sprite the music should be muted and I want to achieve this by watching variable named musicMuted. So when variable is false then music should play, else not. The problem is that when I change the variable in create function it is not updating i update function (always return false) Codepen below: