Search the Community

I have bitmap fonts in my tilesheet (e.g. "1", "x", "2", ...etc), is there any way to parse that and use that in my game? Or do I have to use a separate file that just has those bitmap fonts? Thank you for your help in advance.

Hi everyone. I'm trying to implement a pause option in my game. I have two scenes, the scene where the game is being played and the scene when it's telling you that the game is paused. From the playGame scene I have this code to move to the paused scene goToPaused(){ this.scene.pause(); this.scene.start('paused'); } This works as intended. The playGame scene is paused and it starts the paused scene. Now, from my paused scene I have this code to resume the playGame scene and stop the paused scene. resumeGame(){ this.scene.stop(); this.scene.resume('playGame'); } However this gets me the following error: Uncaught TypeError: can't access property "cut", s is null I don't know whats happening. Any ideas? Here is my project: Spaceship Shooter

As we know render text in pixi have two great ways 1 text (base on canvas and do not worry about language) 2 bitmaptext (can render customize text from a pre-load map) These way will be blurred when I scale the stage (zoom up) because their resolution are fixed. Can I use the way in threejs,use some path and curve(like svg)to generate shape and use PIXI.Graphics to render? Or what else way can deal with the blurred problem?

I've been playing around with pixi-layers for a few days now and I've noticed 2 things: The layer.on("sort", ...) callback is being called continuously (on each tick if I had to guess). Each elements within layers have an updateOrder attribute that's continuously incrementing: Screen Recording 2020-06-04 at 21.38.49.mov All of that lead me to believe that layers are being continuously re-sorted (I may be mistaken), and I was wondering what was the point of doing such thing? Wouldn't be better to listen for an element's zOrder to change? This behavior can be observed on the example files as well.

Hello! I want to center the Container with the preservation of the perspective and so that it always fits into the window. But Pixi Container doesn't have a constant size. How do I achieve this?

Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;

So I started a project in es5 javascript and put everything in one huge game file. This quickly became hard to manage so I decided to use ES6 Javascript and break things out into their own classes. However, I then realized that there are times when these different classes need to display and modify the same data. In a part project I've used Redux with react which was pretty awesome, and I've used shivering very similar in angular 2 (Ngrx library). In another post about React it seems like people are saying the virtual DOM, JSX, and all that is pretty much useless with the way that phaser renders in canvas and doesn't really use any HTML. However, I just stumbled across this really cool jsfiddle that uses the redux library, straight up, as a way to manage state with redux alone: https://jsfiddle.net/archierocks183/zygz2ksm/17/ What do you guys think about this? Do you think it's a good way to go? Does anyone have any projects where you've gone down his route (or something similar)? How did it go? Just trying to get ideas and figure out how to manage state in my growing app. Thanks!

This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.

Hi guys, How do I make it that the black square moves with the red square but NOT scale? Example: jsfiddle When you click on the small blue square the big white square gets smaller. The big red square scales with the white square. This is what I want but... the little black square should not scale but change position, is that possible? The black square should be in the red square BUT with the same height and width.

Let's say I make a game in Phaser that: contains just a single scene on that scene there is a giant tilemap loaded with collisions set with ,setCollisionBetween() or similiar there are multiple sprites scattered all across the map, they collide with the player How does Phaser handle the tilemap, the sprites and collision in this case? Does it update the entire tilemap wherever the player is or only the chunk that is currently within the camera bounds? Does it check collisions with tiles and sprites that are only within the camera bounds or everywhere on the map despite the player not even being there? Is everything built for me internally or do I have to implement my own tile,sprite and collision loading to not waste performance?

Hello guys, I'm new to game development but I have some background on HTML/CSS/JS that's why I found Phaser perfect for me. So far I'm really loving it but can't understand some basic game logics. For example: What is the best way to build platforms? I was reading about groups but not sure is it the right way to do it. Let's just say that I have sprite and I want to build specific pattern. So far I tried : Every platform is diffrent sprite Using single tile to build platforms Also is there any books or other sources for information about game logics and good practices? Thank you and sorry for my bad English

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

Hey guys, I made a game on my Macbook pro, I use scale.set() in many places and use the screens height/width to help place sprites. The problem is that my Macbook has a retina screen (which has a pixel density of 2.0). When I play my game on a non-retina (normal 1.0) screen the game is blown up to look massive. The way to fix it would be to divide any numbers I use for size/position by the pixel density. This however seems weird as I have to have this everywhere somevar * game.device.pixelRatio Is there a way to do this better?

I'm trying to update a rectangle drawn using drawRect by changing the value of fillColor but I can't get it to work. Here's my code: var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create}); function preload() { } function create() { this.rect = game.add.graphics(0, 0); game.stage.backgroundColor = '#FBFAFA'; this.rect.beginFill(0xf44253); this.rect.lineStyle(15, 0xf44253, 1); this.rect.drawRect(350, 250, 100, 100); game.input.onDown.addOnce(changeColour, this); window.graphics = this.rect; } function changeColour() { debugger; var newColour = Phaser.Color.hexToRGB('#42f445'); this.rect.graphicsData[0].fillColor = newColour; console.log("clicked"); } On mouseclick changeColour is getting called and I can see in the debugger this.rect.graphicsData[0].fillcolor is being changed from 16007763 to 21165125 which are the correct color values in 0xAARRGGBB format. Do I need to call a function to get this.rect to redraw the rect primitive? I know I can call this.rect.clear() and call beginFill/drawRect again with the new color but I'd seen other examples on this forum of people just setting fillColor directly.

Hi guys, I was wondering, how do I get my picture added to that top image thing on the homepage? Yknow it shows like a posts image, then u can check out the link below it? Thanks,

Hello, guys. I'm trying to set up a workplace using CreateJS and Typescript. So far I tried only to use VisualStudio for this. I see everyone using the "createjs." namespace, can't find it in .d files from here: https://github.com/borisyankov/DefinitelyTyped Or is there another way of using Typescript with all the typing, intellisense and debugging?

Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I was able to get the even to fire if I made the graphic into closed path will fill. But unfortunately that will not work for my purpose. Is there any way to accomplish this? Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape? Thanks in advance!

Hello, Phaser Community! I'm new to HTML5 development, and i've got some problems. Currently i'm working on platformer movement. If a character moves to the edge of the platform, he gets instantly moved to the beginning of that platform, GIF - http://imgur.com/4mKZoH3 Here's my Level1 code: Game.Level1 = function(game){}; var map; var layer; var player; var player_test; var heart; var MAX_SPEED = 48; var ACCELERATION = 1; var DRAG = 500; var GRAVITY = 920; var JUMP_SPEED = -250; var RIGHT = true; var LEFT = false; var JUMP_TIME = 0.5; Game.Level1.prototype = { upInputIsActive:function(duration) { var isActive = false; isActive = this.input.keyboard.downDuration(Phaser.Keyboard.Z, duration); isActive |= (this.input.activePointer.justPressed(duration + 1000/60) && this.input.activePointer.x > game.width/4 && this.input.activePointer.x < game.width/2 + game.width/4); return isActive; }, upInputReleased:function() { var released = false; released = this.input.keyboard.upDuration(Phaser.Keyboard.Z); released |= this.game.input.activePointer.justReleased(); return released; }, leftInputIsActive:function() { var isActive = false; isActive = this.input.keyboard.isDown(Phaser.Keyboard.LEFT); isActive |= (this.game.input.activePointer.isDown && this.game.input.activePointer.x < this.game.width/4); return isActive; }, rightInputIsActive:function() { var isActive = false; isActive = this.input.keyboard.isDown(Phaser.Keyboard.RIGHT); isActive |= (this.game.input.activePointer.isDown && this.game.input.activePointer.x > this.game.width/2 + this.game.width/4); return isActive; }, create:function() { map = this.add.tilemap('lv1', 8, 8 ); map.addTilesetImage('Tileset', 'tileset'); layer = map.createLayer(0); layer.resizeWorld(); map.setCollisionBetween(1,5); player = this.game.add.sprite(this.game.width/4, this.game.height - 32, 'player'); player.animations.add('run_left', [0, 1], 13, true); player.animations.add('run_right', [2, 3], 13, true); player.animations.add('idle_left', [8, 8, 8, 8, 8, 8, 9, 9, 9, 9], 5, true); player.animations.add('idle_right', [10, 10, 10, 10, 10, 10, 11, 11, 11, 11], 5, true); heart = this.game.add.sprite(this.game.width/2, this.game.height/2, 'heart'); heart.animations.add('idle', [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8], 18, true); player_test = this.game.add.sprite(this.game.width-20, this.game.height - 20, 'player_idle_test'); player_test.animations.add('test_idle', [0, 1, 2, 3, 4], 13, true); this.physics.enable(player, Phaser.Physics.ARCADE); this.physics.arcade.gravity.y = GRAVITY; player.body.maxVelocity.setTo(MAX_SPEED, MAX_SPEED * 10); }, update:function() { this.physics.arcade.collide(player, layer); var onTheGround = player.body.blocked.down; heart.animations.play('idle'); player_test.animations.play('test_idle'); if (player.body.velocity.y>0) { if (LEFT == true) player.frame = 6; if (RIGHT == true) player.frame = 5; } if (this.leftInputIsActive()) { player.body.velocity.x += -ACCELERATION/3; LEFT = true; RIGHT = false; } else if (this.rightInputIsActive()) { player.body.velocity.x = ACCELERATION/3; LEFT = false; RIGHT = true; } else { player.body.velocity.x = 0; if(LEFT == true && RIGHT == false && onTheGround && player.body.velocity.y == 0) { player.animations.play('idle_left'); } if(RIGHT == true && LEFT == false && onTheGround && player.body.velocity.y == 0) { player.animations.play('idle_right'); } } if (this.leftInputIsActive() && player.body.onFloor) { player.animations.play('run_left'); } if (this.rightInputIsActive() && player.body.onFloor) { player.animations.play('run_right'); } // Set a variable that is true when the player is touching the ground if(onTheGround) { DRAG = 2250; ACCELERATION = 750; } else { DRAG = 1750; ACCELERATION = 1000; } // If the player is touching the ground, let him jump if (onTheGround) { this.jumping = false; } // Jump! Keep y velocity constant while the jump button is held for up to 150 ms if (this.upInputIsActive(100) && (this.jumping == false)) { player.body.velocity.y = JUMP_SPEED * JUMP_TIME; player.animations.stop(); if(LEFT) { player.frame = 7; } if(RIGHT) { player.frame = 4; } } // Reduce the number of available jumps if the jump input is released if (this.upInputReleased()) { this.jumping = true; } } }

Alright, been stuck on this for a few days and starting to think I'm overlooking a very simple solution. I have a character that I want to walk back and forth on the screen. He needs to walk to one edge, turn around, then walk to the other edge, again turn, walk, etc.; rinse and repeat. I've tried simply '+=' and '-=' on his x coord with an if statement but he wont seem to walk in the other direction. Example, writing 'steve.x += 1;' then 'steve.x -= 1;' won't work. He gets to one edge but then stops. I've also tried using tweens but he seems to become jittery as he's a spritesheet already, maybe? His physics body will stay, but the pixels themselves seem to move outOfBounds. Anyway, here's the full code for what I'm working on, any help is greatly appreciated. http://pastebin.com/V0GM7z3w Also still learning Phaser so any feedback on code flow is helpful too! Thanks!

I'm really liking Phaser, and am trying out converting a WIP Flixel project. I'd like to do a bloom filter over the whole canvas. What's the best way of going about this? I have a working bloom filter already; I'm just trying to figure out how to apply it to an entire Game or State. Sprites seem to have the filters property, but Game doesn't seem to have an equivalent. I've tried drilling into the Pixi code, but its filters don't seem to be superclasses of Phaser's filters, and I thought I'd ask a question before hacking away any further.

sprite.events.onInputUp.add(function(){},this); game.input.onUp.add(function(){},this); They are triggering when I click sprite.help!

Hello fellow 3D engineers, at the moment I'm working on a replacment of our old 3D system (was a plugin). I am using babylon for this and I am really impressed so far. The work flows easily through the hands. So I have a small problem, might be a really small one. We have a costumizeable pavillon. I build the Roof construction for one side of the roof. (it has a repeating triangular form). Then merged the mesh, created six instances and rotated them around the center to place them properbly. The main work is finished (calculation and boolean subtractions). Now I just want to polish the scene with shadows etc. I have already read what to do to sovle the problem with self shadowing (bias value). But what I see now is that the roof parts a illuminated the wrong for me. Please look at the screenshot. Is this right? It looks wrong. I can't say whether this is a bug or I am doing something wrong. Thanks for any help and best regards Kevin

Take a look at the WebGL rendering in this fiddle: http://jsfiddle.net/intrinsica/L9z655jy/ Note the extension of the polygon beyond the 200px width it is defined to be. Is this a bug or a feature? If it's a bug, I'll file an issue. For reference, the fiddle includes a PIXI Canvas rendering and a ProcessingJS rendering. Thanks.

Hi, I have been using Pixi.js for a few months now and I am wondering if it is possible to erase lines drawn on a PIXI.Graphics object. Basically I have some functionality where I am able to draw on a Graphics object on a Sprite using mouse and touch events. My issue is that the sprite has a texture which is not just 1 color. If the texture was blue I would just draw with blue color to "erase" the lines i had drawn earlier with another color. If I was not using Pixi.js I could use the functionality shown here: http://cssdeck.com/labs/jwvajze4/ This eraser functionality is excactly what I need, but I need it in Pixi.js. Is it possible to adapt this same functionality in Pixi.js? Any suggestions or tips would be great.

In my game I want an animation to play when the player collides with a red block and dies. I used the arcade physics system and said a function called gameOver should trigger when the player and a block overlap. The animation I'm using is an explosion, the function then calls for the player to be killed and removed from the canvas and for the explosion sprite to be added and for it's animation to play. The problem is that the function only plays the first frame, I'm assuming this is because either the function only runs once after they overlap or because the player dies and therefore without the player nothing is overlapping and the function stops. Tl;Dr: how do you make a death animation play after a sprite dies Thanks for any help My code: *Note the relevant part is coloured green. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var Rx = Math.random () * 800; // ball spawns in a random placevar Ry = Math.random() * 600;var Bx = Math.random () * 800; var By = Math.random() * 600;var Gx = Math.random () * 800 var Gy = Math.random() * 600;var colours = ["redBlock","greenBlock","blueBlock"];var colour = colours[Math.floor(Math.random()*2)];var score = 0; var scoreText;var collideCounter = 0;var playerX = 10;var playerY = 10; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");this.game.load.spritesheet("explosion","assets/explosionSheet.png",433,410);this.game.load.image("block","assets/block.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); Rblock = game.add.group(); Rblock.enableBody = true; for (var i = 1; i < 4 ; i++){var RblockT = Rblock.create(i * Rx,i * Ry,"redBlock"); // x and y are randomy coordinates the ball spawns atRblockT.body.velocity.setTo(200,200);RblockT.body.collideWorldBounds = true; RblockT.body.bounce.set(1);} Bblock = game.add.group(); Bblock.enableBody = true; for (var i = 1; i < 4; i++){BblockT = Bblock.create(i * Bx,i * By,"blueBlock"); // x and y are randomy coordinates the ball spawns atBblockT.body.velocity.setTo(200,200);BblockT.body.collideWorldBounds = true; BblockT.body.bounce.set(1);} Gblock = game.add.group(); Gblock.enableBody = true; for (var i = 1; i < 4 ; i++){GblockT = Gblock.create(i * Gx,i * Gy,"greenBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Gblock);GblockT.body.velocity.setTo(200,200);GblockT.body.collideWorldBounds = true; GblockT.body.bounce.set(1);} player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.body.collideWorldBounds = true;player.scale.setTo(0.2,0.2); explosion = this.game.add.sprite(800,700,"explosion");explosion.animations.add ("explode",[1,0,2],2,true); scoreText = this.game.add.text(16,16,"Score:0",{ FontSize: "32px",fill: "#CCFFFF"});test = this.game.add.text(16,32,"test:",{ FontSize: "32px",fill: "#CCFFFF"});test2 = this.game.add.text(16,50,"test:",{ FontSize: "32px",fill: "#CCFFFF"});} function update() {this.game.physics.arcade.overlap(player,Rblock,gameOver,null,this);this.game.physics.arcade.overlap(player,Gblock,addPointG,null,this);this.game.physics.arcade.overlap(player,Bblock,addPointB,null,this); function addPointR (player, RblockT){score += 1;scoreText.text = "Score:" + score;RblockT.kill();} function addPointG (player, GblockT){score += 1;scoreText.text = "Score:" + score;GblockT.kill();} function addPointB (player, BblockT){score += 1;scoreText.text = "Score:" + score;BblockT.kill();} function gameOver(){player.kill();explosion = this.game.add.sprite(player.body.x,player.body.y,"explosion");explosion.anchor.setTo(0.5,0.5);explosion.animations.play("explode");} playerY = player.body.velocity.y; //playerY tracks the y coordinate of the player and is used to tell where the explosion should spawnplayerX = player.body.velocity.x; //playerX tracks the x coordinate of the player and is used to tell where the explosion should spawnplayer.body.velocity.x = 0;player.body.velocity.y = 0; if (cursors.up.isDown){player.body.velocity.y += -200;} if (cursors.down.isDown){player.body.velocity.y += 200;} if (cursors.left.isDown){player.body.velocity.x += -200;} if(cursors.right.isDown){player.body.velocity.x += 200;}}