VincentB

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. Thanks @jamespierce for the fast answer, I was missing the X and Y coordinates and it now works. For my particular case there is no image but instead a graphic object. Since I added it myself I know its size, and I do not need to worry about the bubble spike. The fix was to add the following: // place the text in the center of the bubble this.textObject.setOrigin(0.5); this.textObject.setX(containerWidth / 2); this.textObject.setY(containerHeight / 2); Pretty simple... but I needed the guidance, thanks for that ! 😉 Hopefully this will help someone else in the future so here is attached the version with the 3 lines added, Bubble-sample-fixed.zip Bubble-sample-fixed.zip
  2. Hi guys, I have been struggling with the text alignment within a container in order to create a bubble dialog box. I create a container, add graphics inside and then text. However I cannot understand how to have the text centered within the container. I saw in an old post something like label.setOrigin(0.5); which do no work in this case. Here is the result on Chrome followed by the result on a mobile device (emulated with Chrome, just for information) Since more code is always better, I isolated this particular example in the Bubble-sample.zip file attached Just run "npm install" and "npm run start" then go to http://localhost:8080/ and click in the canvas. I'm looking for a global solution that would center some text within a container, independently of the number of lines, I'm certainly missing a big concept here... 🙂 Bubble-sample.zip
  3. @rich Thanks for the fix ! Tried Phaser v3.3.0 and have now the TileSprite scaling working Below is the working code for future readers. 'use strict'; class GameScene extends Phaser.Scene { constructor() { super('GameScene'); } preload() { this.load.image('background1_clouds_1', 'assets/background/background1_clouds_1.png'); this.load.image('background1_clouds_2', 'assets/background/background1_clouds_2.png'); this.load.image('background1_clouds_3', 'assets/background/background1_clouds_3.png'); this.load.image('background1_clouds_4', 'assets/background/background1_clouds_4.png'); this.load.image('background1_rocks_1', 'assets/background/background1_rocks_1.png'); this.load.image('background1_rocks_2', 'assets/background/background1_rocks_2.png'); this.load.image('background1_sky', 'assets/background/background1_sky.png'); } create() { // Get the window sizes let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // Find the center of the top space let topBackgroundXOrigin = windowWidth / 2; let topBackgroundYOrigin = (windowHeight / 5) * 1.5; let topBackgroundHeight = (windowHeight / 5) * 3; // Base width and height of the images let imageBaseWidth = 1920; let imageBaseHeight = 1080; let heightRatio = topBackgroundHeight / imageBaseHeight; // Add the sky image at the right location and resize it to take all the space, no scaling needed let skyImage = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'background1_sky'); skyImage.setDisplaySize(windowWidth, topBackgroundHeight); // Add each layer one by one this.cloud1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_1'); this.cloud1.setScale(heightRatio); this.cloud2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_2'); this.cloud2.setScale(heightRatio); this.rocks1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_1'); this.rocks1.setScale(heightRatio); this.cloud3 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_3'); this.cloud3.setScale(heightRatio); this.rocks2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_2'); this.rocks2.setScale(heightRatio); this.cloud4 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_4'); this.cloud4.setScale(heightRatio); } update() { this.cloud1.tilePositionX += 0.05; this.cloud2.tilePositionX += 0.05; this.rocks1.tilePositionX += 0.10; this.cloud3.tilePositionX += 0.15; this.rocks2.tilePositionX += 0.20; this.cloud4.tilePositionX += 0.30; } } module.exports = GameScene You can download the images for free from here https://craftpix.net/freebies/free-horizontal-2d-game-backgrounds/
  4. VincentB

    Scale a tilesprite

    @Shex could it be related to what I'm trying to do here ? I saw as well that we could scale the TileSprite in Phaser 2, like here https://phaser.io/examples/v2/tile-sprites/animated-tiling-sprite tilesprite.tileScale.x = ... tilesprite.tileScale.y = ...
  5. Hi guys, I have been struggling for days on setting up a parallax background for the game I'm working on and I need guidance to understand "why?" Below is where I am, and I cannot get to properly size the TileSprite to later use it for the parallax. 'use strict'; class GameScene extends Phaser.Scene { constructor() { super('GameScene'); } preload() { this.load.image('top-sky-background', 'assets/background/sky.png'); this.load.image('top-rocks1-background', 'assets/background/rocks_1.png'); } create() { // Get the window sizes let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // Find the center of the top space let topBackgroundXOrigin = windowWidth / 2; let topBackgroundYOrigin = (windowHeight / 5) * 1.5; let topBackgroundHeight = (windowHeight / 5) * 3; // Add the sky image at the right location and resize it to take all the space, no scaling needed let skyImage = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'top-sky-background'); skyImage.setDisplaySize(windowWidth, topBackgroundHeight); // Base width and height of the images let imageBaseWidth = 1920; let imageBaseHeight = 1080; // -------------------- // Add it as an image // -------------------- // Apply ratio on the width //let newImageWidth = imageBaseWidth * (topBackgroundHeight / imageBaseHeight); //this.rocks1 = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'top-rocks1-background'); //this.rocks1.setDisplaySize(newImageWidth, topBackgroundHeight); // -------------------- // Add it as a TileSprite // -------------------- this.rocks1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'top-rocks1-background'); //this.rocks1.tilePositionX = topBackgroundXOrigin; //this.rocks1.tilePositionY = topBackgroundYOrigin; //this.rocks1.setSize(windowWidth, topBackgroundHeight); //this.rocks1.setDisplaySize(windowWidth, topBackgroundHeight); //this.rocks1.autoScroll(-0.5, 0); // not implemented in Phaser3 yet // alert('tilePositionX:' + this.rocks1.tilePositionX + '; tilePositionY:' + this.rocks1.tilePositionY + '\n' // + 'position x:' + this.rocks1.x + '; postion y:' + this.rocks1.y + '\n' // + 'width:' + this.rocks1.width + '; height:' + this.rocks1.height + '\n' // + 'displayWidth:' + this.rocks1.displayWidth + '; displayHeight:' + this.rocks1.displayHeight); } update() { this.rocks1.x -= 0.05; } } module.exports = GameScene What the TileSprite gives me is the attached result (ScreenShot1) with the mountain down below and very big. The second result (ScreenShot2), with the mountains properly placed is achieved when using a simple "image" approach, and of course that's what I'd like to achieve with the TileSprite, so it can be repeated automatically from what I understood. I played with everything I could find in the TileSprite object, width, displayWidth, position, etc. but I just don't grasp how it works. Anything to help me continue would be appreciated, as you can imagine I would like to scale down the "rocks" so it can be adapted to any resolution (hopefully...)
  6. Thanks all, I'll try all this. Sorry I was away 1 week, couldn't reply before.
  7. Hi guys, How can I get my image loaded from the cache ? It seems it was possible in Phaser2 but I'm not sure in Phaser3. I looked at https://phaser.io/phaser3/api/cache and it seems there is currently no support for that, can you confirm ? edit: I'm loading the image normally with this.load.image('top-sky-background', 'assets/background/sky_sd.png');
  8. If I may suggest something, there could be a repo with a basic setup, and a number of branches that add features to it, e.g. - javascript + webpack (like https://github.com/photonstorm/phaser3-project-template) - ES6 + webpack - Typescript + webpack - Typescrypt + ESLint + webpack - Typescrypt + webpack + cordova (mobile oriented) .... So if we take the example of the webpack fix (with raw-loader), this would be done in the master branch and merged back in all branches using webpack. Instead of having developers creating their own repo with a different boilerplate, they could create a branch and just do something different, even far away from the master, like "ES6 + yarn + XXX + YYY" Then the most important would be to document/explain the different branches and what is inside, so it can become a central point for starting phaser 3 development.
  9. Hi Sergey, Some issues were reported here https://github.com/photonstorm/phaser/issues/3206 and there https://github.com/photonstorm/phaser/issues/3202 related to the build with webpack. A discussion is ongoing in this topic about creating a common boiler plate I had the same experience as you, what I did is use the following simple boiler plate https://github.com/photonstorm/phaser3-project-template. I updated the webpack version to latest, added webpack-cli and that's all, it worked. Good luck :-)
  10. Hi guys, I'm new to Phaser, I'm new to npm/webpack/and else and I got to tell you I spent the last 3 days to learn how things work to start up my project. I didn't succeed yet I got the webpack issue and after searching for a while I saw the workarounds and ended up here. What a relief ! I'm not going to contribute to anything since I don't know anything, but just to let you know that creating an official boilerplate is going to help a lot so I totally support you. In the meantime I'm going to use the https://github.com/photonstorm/phaser3-project-template and start testing around. Please continue