Search the Community

Showing results for tags 'sprites'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 169 results

  1. Proper way to animate sprites

    I'm wondering what the best way to animate a sprite is. Is there a basic example or tutorial out there somewhere? I have ten images in a spritesheet that are part of an idling animation, and I made a texture for each of the images. I put the textures in an array, and my plan is to just change the texture of my sprite each frame in the gameloop, looping through the array of textures over and over again. Maybe using Sprite.setTexture ??? Is that a good way to go about it? Any links to info or tutorials would be much appreciated. Thanks,
  2. Hi, I'm currently preloading in a single sprite atlas (png image with a json data file) for one sprite (by this i mean a character i want to animate). However, the problem is that the sprite atlas image file is pretty big (over 8000x6000 sometimes) and there's FPS drops on lower end machines/older browsers. I'm not 100% sure that the FPS drops are caused by the large image file, but when i reduced the sprite atlas image file's size, it fixed the issue. My question is, is there a good way I can assign multiple sprite atlases to one character/sprite? Also, would that even help the issue? I want to keep decently high resolution frames so in the end this solution doesn't actually reduce the total size of images being preloaded, just preloads multiple smaller images instead of one huge one. I want to do something like: game.load.atlas('mysprite', 'assets/sprites1.png', 'assets/sprites1.json'); game.load.atlas('mysprite', 'assets/sprites2.png', 'assets/sprites2.json'); this.sprite = game.add.sprite(game.world.centerX, 300, 'mysprite'); // 'walking' is part of the sprites1.png this.sprite.animations.add('walking', Phaser.Animation.generateFrameNames('walking', 1, 6), 5, true); // 'flying' is part of the sprites2.png this.sprite.animations.add('flying', Phaser.Animation.generateFrameNames('flying', 1, 6), 5, true);
  3. Hi guys, So, I stuck in a little problem here. I'm building a chat system for my casual game, but I'd like to put icons in the middle of the text, like Whats App messages with emoticons. Does anyone know how can I do it or have any ideas to solve it? EDIT: Just to clarify, the text and emoticons (images/sprites) must be rendered in the same sentence, like when we sent a message with emoticons on the WAPP chat. Thanks!
  4. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: https://www.babylonjs-playground.com/#41N19L#3 @Deltakosh @Wingnut @JohnK Any incites Guys?
  5. I'm trying to kill a sprite after it passes the bounds in my game. I've tried using the phaser example https://phaser.io/examples/v2/sprites/out-of-bounds this is my entire script, please help me <script type="text/javascript"> var game = new Phaser.Game(1040, 450, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; var player; var bot; function preload(){ game.load.image('sky','assets/rpg-bg.png'); game.load.spritesheet('player','assets/player-walk.png', 87,125); game.load.spritesheet('player-attack','assets/player-shot.png', 113, 132); game.load.image('player-death','assets/player-death.png'); game.load.spritesheet('bot','assets/bot.png', 112, 141); } function create(){ game.physics.startSystem(Phaser.Physics.ARCADE); // Backgrounds game.add.sprite(0, 0, 'sky'); bot = game.add.sprite(1000, game.world.height, 'bot'); game.physics.arcade.enable(bot); bot.body.gravity.y = 100; bot.anchor.setTo(0.5, 0.5); bot.body.collideWorldBounds = true; bot.body.checkCollision.none = true; bot.animations.add('run'); bot.animations.play('run', 10, true); bot.checkWorldBounds = true; bot.events.onOutOfBounds.add(killBot, this); // Player player = game.add.sprite(32, game.world.height, 'player'); game.physics.arcade.enable(player); player.body.bounce.y = 0.1; player.body.gravity.y = 100; player.body.collideWorldBounds = true; player.animations.add('run'); player.animations.play('run', 10, true); } function update(){ // Bot Movement bot.body.velocity.x = -150; } function killBot(bot){ bot.kill(); } </script> Thank you
  6. Controlling rendering of sprites

    Hello everyone, I have a case where I have lots of sprites on screen and each sprite has a Phaser.Text attached to it. Right now, I'm rendering in this order : renderSprite -> renderText, renderNextSprite -> renderNextText, thus having to flush the context every time I draw the text since it's not using a common sprite atlas. What I'd like to do is : renderAllSprites -> renderAllTexts So my question is, is there a way to tell Phaser not render any of these objects, and in the render() function of my current state, call what to render manually ? I'm opened to other suggestions, but please bear in mind that I cannot switch to bitmap fonts due to the fact that I need to support many languages. Thanks.
  7. I'm in search for a way to dynamically change a sprite. Let's say I have a spriteManager with spriteA.png. and a sprite called sprite linked to said manager. I want to change the sprite/spriteManager to spriteB.png. This might happen once every frame, so simply creating a new sprite won't quite cut it. I see the manager has a sprites array as well as a _spriteTexture, but I don't see any function that allows me to change these. Am I missing something that would allow me to do this, or are there issues I should be aware of?
  8. Hi peeps, I've already published a similar topic not a while ago, but we couldn't really reach any conclusion: http://www.html5gamedevs.com/topic/32079-sprite-occlusion-for-performance/ I have this demo: http://devel.arinnova.com/tests/3dmaps/babylon_demo/ I'm trying to get a similar forest to this three.js scene: https://www.piste.io/#!/cortina . Notice how the forest is really dense and the FPS are really good. What I've already tried without success: 1) Loading meshes instead of sprites and applying LOD mechanism resulted in very low FPS. 2) Using mesh instances instead of sprites, still very low FPS 2) Temechon kindly helped me and coded a LOD function for sprites, but unfortunately it was more or less the same FPS as without the LOD. 4) Showing all the 54k trees, but using a particle system instead of sprites, which helped to reduce the draw calls, but the FPS were still low. 5) I've implemented a "poor man's LOD". I separated the 54k trees into 9 chunks, each chunk corresponding to a specific area. Then at every frame I calculated the distance from the camera to the central point of each area. If it was close enough to the camera, I showed the area trees and if not, I removed them. This way at each frame I had to calculate distances to only 9 points instead of 54k points, which helped but visually it was not pretty at all. Even applying a brown texture on the terrain underneath the trees, the chunks of trees appearing and disappearing all at once are very noticeable. 6) I also reduced the tree image size to 128x128, just in case, but I'm not sure it had an effect on FPS. Using an image of a pine tree or a leafy tree would create much more perception of a dense forest, but unfortunately I can't use those. The scene is a winter map of a specific real-world area with leafless trees and I'm trying to be as realistic as possible. A silly idea I've also tried was using an image of a group of trees instead of an image of a single tree. It obviously looked fake, especially when rotating the camera. Some other ideas that I've had but have not tried: Solid Particle System -> as it has more effect on performance than a simple particle system and I've already tried that. Octrees -> could this help me? I've read the tutorial but I'm not sure I understand how could I apply it to sprites. I don't know how camera.maxZ works internally, but is there possibly any way to apply it only to sprites, so the nearest sprites only are visible? Could I implement my own camera that does this? tldr; I'd like to show ~200.000 trees in my scene with minimal performance drawback. Thanks a lot in advance!
  9. How to set hitbox?

    I cannot figure out how to change the hitbox size of my player, the character doesn't fit through a hole in a fence so I want to change the hit box sizes. I already tried this https://phaser.io/examples/v2/arcade-physics/offset-bounding-box but this did not work for me, my screen went black when i did this. // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { }
  10. Player and Colliding Objects

    Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with. How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. My game.js // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html>
  11. Hello everyone, Is is possible to implement some occlusion or LOD-like mechanism for sprites in Babylon? I have a scene with a very large terrain and some forest areas represented by thousands of tree sprites. There are so many sprites that they actually affect performance. Could someone point me in the right direction? Is there a way to adapt LOD for sprites? Or could I put the camera into some kind of transparent mesh and in some way occlude the sprites behind the mesh walls?
  12. Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn = game.add.group(); this.middleColumn = game.add.group(); this.rightColumn = game.add.group(); Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this https://github.com/trueicecold/phaser-scrollable . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?
  13. Bad Filter/Shader performance ?

    I recently started experimenting with Filters (shaders) and while it runs well when using a single filter on the world, applying a filter to my sprites seems to be killing performance. Even a simple filter that does nothing but output the color set on just 50 sprites is dropping my framerate from 50 to 18, even when sprites are offscreen. Is that to be expected? It makes filters virtually unusable unless very sparingly.
  14. Hitbox is too high for collision

    Here is my code: https://pastebin.com/iH355eYP. The problem is, when a "bullet" collides with a "character" from an area above the character's "head", it is being counted as a collision. I've tried all of the advice I could find on the forum such as setting the height/width of the sprite body and whatnot, still no success
  15. Sprite edges getting cropped

    Hi, I notised pixels at the edges of my sprites are getting cropped, adding a 5 px margin around the textured areas have fixed it, but it still seems odd so i wanted to report it incase there's a bug somewhere. var grass_SPM = new BABYLON.SpriteManager("grass", "./grass.png", 2500, 400, scene); zoomed screenshot, original is 400*400 (transparent area above the texture) as can be seen on the following screenshot, the top is fine, but both left, right and bottom are being chopped. (the visible seams are just a missing adjustment from changing sprite size)
  16. The subtleties of adding children

    I'm starting to use Phaser, and am mystified by the subtle complexities of how the API differs for sprites vs groups. Let's look at the process of creating a display element, and then adding it as a child of another display element at a given x,y. 1. Creating a sprite and adding it as a child of another sprite at a given x,y parent.addChild(game.make.sprite(x,y,"artkey")) 2. Creating a sprite and adding it as a child of a group at a given x,y parent.add(game.make.sprite(x,y,"artkey")) Why do we need to use add here, instead of addChild? 3. Creating a group and adding it as a child of a sprite at a given x,y g = parent.addChild(game.make.group()); g.x = x; g.y =y; Why is there no way to make a group with a given x, y in one step like sprites? Why the need to manually set position in two extra steps? 4. Creating a group and adding it as a child of a group at a given x,y g = parent.add(game.make.group()); g.x = x; g.y= y; For this, we use add and then we also need the two extra steps. Did I get the taxonomy correct here? Why is every combination different? Thanks.
  17. Hey! I've been getting started on developing a game for Phaser, and I've run into an issue. It's a bit hard to describe, but I linked an image of my game to kind of describe it. The balls that you see on screen are meant to go inside that box. They move across the screen. I want them to not be visible outside the box, that way it looks like they ease into it. The problem is, I'm not sure how to do this without it going over my background (the lines that you see on the outside of the box). How can I make it so the sprite is only visible inside the box?
  18. Bizzare Display Bug - Multiplayer

    Does this behavior sound familiar to anyone? Working on a multiplayer client. I have a player prototype that is created when the client is told that a new player has joined the server: Player = function (id, game, player) { this.x = 300; this.y = 300; this.id = id; this.dir = "-1"; this.game = game; this.player = player; this.sprite = game.add.sprite(300, 300, 'ms',1); this.sprite.anchor.set(0.5); this.sprite.animations.add('right', [6,7,8],4,true); this.sprite.animations.add('left', [3,4,5],4,true); this.sprite.animations.add('down', [0,1,2],4,true); this.sprite.animations.add('up', [9,10,11],4,true); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.body.setSize(72, 32,28,96); this.nametext = game.add.text(236, 364, this.player, { font: '14px Arial', fill: '#ffffff' }); this.nametext.anchor.set(0.5); }; That player creation is stored in an array... Then whenever I receive an update i pool through the array and update accordingly: // Update User Info socket.on('userupdate',function(data) { info = data.split(','); if(info[0]!=myid){ info = data.split(','); for(a=0; a<totalplayers; a++){ if(playerArray[a].player == info[0]){ playerArray[a].sprite.x = info[1]; playerArray[a].sprite.y = info[2]; playerArray[a].dir = info[3]; } } } }); I've checked that the data comes in is proper. Here is the REALLY weird thing. When im clicked on the screen the sprite does not show up at all. When i click OFF the browser and lose focus, the sprite appears and updates correctly... I`m sure I am making a dumb mistake??
  19. (FIXED) V4 9-Sliced Sprites

    Hi all, been trying to dig into PixiJS a little more. Sorry if this has been covered before but struggling to find anything relating to V4. Is there a plugin or something that enables 9-slicing of sprites? Mainly for the use in UI elements, (buttons borders, frames etc?) Thanks in advance!
  20. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);
  21. Accessing Sprite Object indirectly

    I was looking around at the tutorials and the examples and I did not see anything about how to access via the game object or some other object a collection of the added sprites. I am new to Phaser so I might have missed it. I also searched the forums but I did not see anything. However, if you all know where a thread is or how do to it I would really appreciate a nudge in the right direction.
  22. Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();
  23. Hello all! I have a sprite with some children, 3 sprites and a text. The text floats above the sprite and moves with it. I have 4 layers that in my map and the sprite is rendered after layer 2. The problem is that the text ends up behind part of the map that sits in layers 3 and 4. Is there a way to force the text to the top of everything?
  24. I looked at the documentation on how to create a sprite https://phaser.io/docs/2.6.2/Phaser.GameObjectFactory.html#sprite It takes in the following parameters x y key frame group It's very easy to add a sprite with just the first three parameters car1 = this.game.add.sprite(800, 400, 'car'); But it fails when I try to add the car to a group car1 = this.game.add.sprite(800, 400, 'car', objects); If I went with the first declaration and then added objects.add(car1) it will then work I need to use the second declaration because my codebase is becoming way too large, and I need fewer lines. Not sure, why this is failing. Maybe an update killed this functionality?
  25. Hello, I am creating a game with Phaser and I guess it is quite large, at least there are a lot of sprites. Using Phaser.AUTO which went to Phaser.WebGL on my desktop (i7-4770k @ 4ghz, 16gb RAM, GTX 970 4GB) I can't even maintain a 60fps (usually around 48-55fps) and there is noticeable stutter on 720p. The same is true for my 2015 Macbook Pro 15". I doubt I'd get any better results on a less powerful computer. I heard that using text with WebGL slowed it down a bunch? but that is a question for a different thread I guess. Anyway, I was searching for a way to speed up my game and came across the idea of switching from WebGL to Canvas. I did that, and on my Mac I got a solid 60fps (haven't tested on desktop yet). The only problem is that Canvas does something weird to some of my sprites (specifically ones with thin borders). I have attached two partial screenshots of my game with box sprites. As you can see, one of the box sprites is perfectly box-like, that one is running on WebGL. Once I switch over to Canvas the box sprites look like the other screenshot - lopsided. Is there a way I can fix this?