Search the Community

For some reason the following code isn't working. I've created all the tilesets, keys and images are correct and nothing is erroring in the console log preload this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); create const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') The assets are loading in fine too, but I haven't added a map before using tilesets so not sure where I could of gone wrong. The image also loads in fine when adding that in so I figured it might be something to do with the following JSON file. { "compressionlevel":-1, "height":20, "infinite":false, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":20, "id":1, "name":"ground", "opacity":1, "type":"tilelayer", "visible":true, "width":25, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.7.2", "tileheight":32, "tilesets":[ { "columns":3, "firstgid":1, "image":"..\/..\/Documents\/sprites\/tileset2.png", "imageheight":96, "imagewidth":96, "margin":0, "name":"newest", "spacing":0, "tilecount":9, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":"1.6", "width":25 } I'll add the full code here for anyone to look over class Level1 extends Phaser.Scene { constructor() { super({key: "Level1" }); } preload () { this.load.aseprite('alco', 'assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json'); this.load.aseprite('chef', 'assets/animations/alcochef.png', '../assets/animations/alcochef.json'); this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); } create () { this.width = 800; this.height = 640; const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') let playerPoints = 0; this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F); this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]); this.anims.createFromAseprite('alco'); this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco'); this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef'); this.chef.body.setCollideWorldBounds(true) this.physics.add.collider(this.chef, this.ground) this.chef.sideFacing = 'right' this.chef.moving = false; function colliderAlco(sprite) { playerPoints ++ console.log(playerPoints) // destroySprite(sprite) } this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco)) this.alco.play({key: 'rotatinglabel', repeat: -1}) // var frameNames = this.textures.get('chef').getFrameNames(); this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false}) } update() { if(this.keyF.isDown) { this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyD.isDown) { this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(100); this.chef.flipX = false if(this.chef.facing === 'left') { return this.chef.facing === 'right' } } if(this.keyW.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyA.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(-100); this.chef.flipX = true if(this.chef.facing === 'right') { return this.chef.facing === 'left' } } } } function destroySprite(sprite) { sprite.destroy(); } export default Level1; This is the index.js import Phaser from 'phaser' import Level1 from './scenes/level1' var config = { type: Phaser.AUTO, width: 800, height: 640, physics: { default: 'arcade', arcade: { debug: true, gravity: {}, } }, scene: [Level1], scale: { zoom: 1, } }; var game = new Phaser.Game(config);

Hello everyone! I'm JJ from animation studio, TVT and web design company, JIN Design in Singapore. I'm here to share a freebie, 2D game background. Freebie image preview can be viewed in the attachment. Download now in Google Drive

Hi, I'm Lewis, a freelance pixel artist looking to work on your great project. I've worked on a wide variety of projects boasting pixel art styles, but also projects involving clean vector art and all including smooth animation. My skills are: Pixel art Vector art Animation GMS 2.3 platformer programming (2D) Video editing Projects I've worked on/am involved with include: Kyle & Lucy animating and creating environment art, Sonic Studio (a fan game made in GM), Sonic 2 HD (fan game) creating enemies and environment art, Freedom Planet 2 creating backgrounds and stage art, and more. I'm available for hire! Contact me at [email protected] or message me via a PM. Enjoy some examples of my pixel art below: If you are interested in my work, feel free to contact me at [email protected] or in a PM. Thanks for taking a look, Lewis.

Hello, everyone! This is my first post here, so I want to give you a free background that you can use in your game development projects. The background is parallax ready and contains 5 layers. You can have it in PNG and AI. More details here: https://gumroad.com/inllusion_studios#wFEPW Cheers and thank you! Here's the preview:

Pixi.js is a great lib and it did help me a lot in building webgl-based apps. But when I try to render text with background, I run into some problem: 1. PIXI.Text has no straight way to fill a text with background ok.I tried to search the forum and find some methods like, I can use PIXI.Grahpics to draw a Rect or RoundedRect , then combine the text and the rounded shape into a container so it looks like the text has a background; In single line text, it appears so good but is this a right way? 2. I can't find a way to build 'tight' background with multi line text; What do I mean a 'tight' background? See the pic below: (the pic comes from https://css-tricks.com/multi-line-padded-text/ and if u read the article u can learn some tricks to make these special background in css) Well, come back to PIXI.js. I know that the text sprite is certainly a Rectangle by default, so when I add a 'background sprite' it's also a Rectangle:) And I find some useful filters like OutlineFilter but it can't use to outline a text , and I'm not an expert in writing gl shaders. Has anyone met the situation before(render multiline text with background) or can give me some advice? Thanks very much.

Hey! I'm Hanna, freelance 2d game artist, creating cool assets, illustrations and UI. I'm currently finalizing work for a game and will be soon available for new commissions. Check out my (quite unique) portfolio-website: habela.github.io Tell me about your project, ask for a quote, let me know about your budget or just say hi - [email protected] some of my work:

Hi! So I'm working on a 2D space shooter type of game and am trying to get a parallax background thing going. But I'm having trouble getting the math right. You can see my work in progress here: https://www.youtube.com/watch?v=Pea9yVbTD64 As stated in the video everything works if the players x and y are positive, but breaks when they are negative, and I can't figure out what I am doing wrong. Any help would be greatly appreciated. Or perhaps there is a better way to accomplish this? What I'm doing is randomly generating out a bunch of the Sprites, and then updating their position with this code. _Nebulas: is Array<NebulaParticle> which is listed below as well. p.distance: is a number between 1 and 5 to signify how far away the sprite is and is used to make them move slower when they are furher away. _Width and _Height are both arbitrary numbers to signify how big the area is that the parallax should cover, in the video they are both set to 80. OriginalOffsetX/Y is the original random position the Sprite was given. public update(delta: number, playerx: number, playery: number) { console.log(playerx + ", " + playery ); for (let i = 0; i < this._Nebulas.length; i++) { let p = this._Nebulas[i]; p._Sprite.x = (playerx + (this._Width / 2)) - (((playerx / p.distance) + p.OriginalOffsetX) % this._Width); p._Sprite.y = (playery + (this._Width / 2)) - (((playery / p.distance) + p.OriginalOffsetY) % this._Height); } } class NebulaParticle { public _Sprite: Phaser.GameObjects.Sprite; public OriginalOffsetX: number; public OriginalOffsetY: number; public distance: number; } Thank you very much.

I'm attempting to clear the path within the update function, you can see below: But for some reason, the path won't clear class Gun extends Phaser.Physics.Matter.Image { constructor(config, scene) { super(config.world, config.x, config.y, null, null, config.options); this.scene = scene; this.ship = this.scene.player this.graphics = this.scene.add.graphics(); this.path = new Phaser.Curves.Path(0, 0); } update() { this.graphics.clear() this.graphics.lineStyle(1, 0xcccccc, 1); this.path.lineTo(this.ship.x, this.ship.y); this.path.lineTo(this.scene.input.mousePointer.x, this.scene.input.mousePointer.y); this.path.draw(this.graphics) } } export default Gun; Here's the live demo - https://codepen.io/jurbank/project/live/AmPBBN/ And the project - https://codepen.io/jurbank/project/editor/AmPBBN Any thoughts? Thanks!

Hey everyone! My name is Rita. I am a freelance animator and illustrator. I have focussed on Animation over the last four years, coming from Illustration and Fine Arts background. I am a professional artist of academic training and more than 10 years of freelance experience, working in versatile media. I work with both traditional and digital tools, in particular seeking to achieve collaboration between the two. I am a big fan of aesthetics with passion for detail and high-quality craft. In the process of animation, my favourite stages are character and background design. To help you get a better sense of my skills and fit, my selected work can be found here: · My website: http://www.smallinkart.com. · My showreel: https://vimeo.com/224053115. Extracts from my creative portfolio: https://www.behance.net/Small_ink. Services I provide: - Concept design - Animation - Photography - Illustration - Character Design - Background Design - Gaming Props / Assets - Hand Painted Texture - Motion Design - Logo Design - Hand Painted Fonts Contact Details: web: http://www.smallinkart.com email: [email protected]

Hello, is there any way haw to loop background image in Phaser 3? I tried to something like this : function preload() { game.load.image("background", "background.png"); }, function create() { var background = game.add.tileSprite(0, 0, 500, 500, "background"); }, function update() { background.tilePosition.x += 0.5; }, but this isn't working. Thanks for any help

I have this game with a salmon background color. I can set the background to the proper color into the create function with: game.stage.backgroundColor = '#f3cca3'; The problem is that it takes a little while preloading the images and sounds and so it stays black in the meantime. I tried: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'meems_house', { preload: preload, create: create }); game.stage.backgroundColor = '#f3cca3'; But then it says 'Cannot set property 'backgroundColor' of null' indicating that it didn't find 'game' — however it doesn't make any sense because 'game' is NOT null as it was created one line above... PS: The only thing I can imagine is that although object 'game' was declared it was not properly instantiated yet because it's gonna happen into the create function — but this is still weird to me. Anyway I would like to know if there is a way to set the canvas background color before the create function... Thanks!

Hi all I've been trying to make a scroll image finder Where the user would scroll through a set of images and choose one. I was wonder how i could do this in phaser

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!

I have a background image that takes up my whole window. It renders in front of my text, even when all in a group, and using sendToBack isn't working. It renders behind my graphics, which is good, but why isn't my text coming forward as well? create: function(){ this.titles = this.game.add.group(); //background this.bg= this.game.add.sprite(0,0, 'bg'); this.titles.add(this.bg); this.bg.sendToBack(); //logo this.logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY -200, 'logo'); this.logo.anchor.setTo(0.5); this.titles.add(this.logo); //text for instructions this.style = {font: "26px Arial", fill: '#fff'}; this.text1 =this.game.add.text(this.game.world.centerX, this.game.world.centerY, 'Instructions: blah de blah de blah.', this.style, this.titles); this.text1.anchor.setTo(0.5); this.titles.add(this.text1); //start button this.startbtn=this.game.add.button(this.game.world.centerX, this.game.world.height-100,'start',this.startGame,this,1,0,1); this.startbtn.anchor.set(0.5); this.titles.add(this.startbtn); }

So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html

Hi all, for example we have 3 type of images(400x600px) for background. and we have the game size (400x600px too). how to better realize the progressively selecting 3 types (or more) of images with auto-scrolling? 1) create 2 images and move their Y-coordinate, then just switching the nameFrame. I think that this decision will slow down the performance of the game. to move so big images. 2) create via tileSprite object and move tilePosition.y, create the bitmap of back1 + back2, scroll them. then re-create the bitmap... and etc. any ideas?

Hello, I'm new to the Phaser framework and I'm trying to have a single backgound and logo througout all the states in a phaser game. I add the background image in the very first state but when I start the next state using: this.game.state.start("State2"); the background image disappears. Do I have to load the background image in every state? Thanks

Hi, I'm having issues trying to add a gradient to the background of my platformer game. I have worked out that, due to the WebGL renderer, the images used need to be either square or width = height x 2. My issue is that the stage is width = height x 4. I thought I could just add two image layers and align them next to each other with the "repeat" property set to "no-repeat" but this does not work. Even though the offset for my second level is correct the image is getting repeated over the first image. Is there a better solution. What I need is a gradient that goes from dark to light top to bottom but also changes from left to right so that it feels that night is falling as you walk through the level. I hope this makes sense, you help would be much appreciated. Thanks Dave

Hey I'm having a problem and I hope you guys can help me. I'm trying to put a background image for my stage. The stage is already done the way I want, but the background image is not showing up. This is the code: window.onload = function() { var game = new Phaser.Game(1200, 600, Phaser.AUTO, 'game-area', { preload: preload, create: create, update: update, render: render }); var manager = null; var emitter = null; var circle = null; function preload() { game.forceSingleUpdate = true; game.load.image('background', 'bg.jpg'); game.load.image('uni', 'uni2.png'); game.load.path = 'assets/particles/'; game.load.images(['red', 'blue', 'yellow', 'white']); } var uni; var background; function create() { manager = this.game.plugins.add(Phaser.ParticleStorm); background = game.add.tileSprite(0, 0, 1200, 600, 'background'); var data = { lifespan: 6000, image: ['red', 'blue', 'yellow', 'white'], vy: { min: 1, max: 2 }, blendMode: 'ADD', scale: { initial: 0, value: 0.3, control: [ { x: 0, y: 1 }, { x: 1, y: 0 } ] } }; manager.addData('basic', data); emitter = manager.createEmitter(); /*var well1 = emitter.createGravityWell(200, 100, -0.5);*/ var well2 = emitter.createGravityWell(900, 50, 10, 200); var well2 = emitter.createGravityWell(850, 400, 20, 200); circle = manager.createCircleZone(8); emitter.addToWorld(); emitter.emit('basic', 0, 0, { zone: circle, total: 6, repeat: -1, frequency: 20 }); // To make the sprite move we need to enable Arcade Physics game.physics.startSystem(Phaser.Physics.ARCADE); uni = game.add.sprite(game.world.centerX, game.world.centerY, 'uni'); uni.anchor.set(0.5); } function update() { circle.shape.x = game.input.x; circle.shape.y = game.input.y; uni.x = game.input.x-30; uni.y = game.input.y - 50; } }; I really do not know why this line of code "background = game.add.tileSprite (0, 0, 1200, 600, 'background') " is "breaking" the canvas. Not even the animation is running. Sorry for my bad english. Not my first language. Thanks

I am running my game as "transparent", directly in the body element, and setting a repeated tile background in the body through CSS. If I enter fullscreen mode through a button click that triggers this.game.scale.startFullScreen(), the background tiling disappears and there's just a black background. If I enter fullscreen mode "manually" (by physically pressing F11), the background remains. What am I missing about how to start fullscreen mode? How can I preserve the background?

I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: http://www.html5gamedevs.com/topic/3218-continuously-scrolling-background/ I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?

I'm developing point&click quest adventure (something like Machinarium) I have a background, for example, like on the bkg1.ipg I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop. Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk Does Phaser have any tools for that?

Hello, all. I'm wondering if anyone knows a way of placing a large image in the background of a game made using the Phaser Isometric Plugin. Is sorting within groups the only way of layering objects? Is it possible to place an object behind all others, regardless of position? This may be something of a silly newbie question. I've been using the plugin for about three days. Thank you very much for reading and considering. Any input is very much appreciated. -JStan

Hi All, Is it possible to draw something after babylon clear canvas and right before it draws all the 3d components? If not, is it possible to prerender the image use for the code following, instead of start loading it when I call this script? var url = "https://upload.wikimedia.org/wikipedia/commons/e/e9/Gradient_1024x768.jpg"; var background = new BABYLON.Layer("back", url, scene); background.isBackground = true; Thanks.

Hey, It seems using CACHESTRATEGY_CANVAS changes the background color of the canvas: http://babylonjs-playground.com/#1GWM8Z#0 http://babylonjs-playground.com/#1GWM8Z#1 without caching on the left: