Search the Community

Showing results for tags 'sprite'.

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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 698 results

  1. Hi, I'm new to this amazing framework and I'd like to thank Rich and every contributor for this excellent work. People loving old good Ataris can't be bad ! As I'm learning Phaser, I try to port some tiny games I formerly coded for my son without any framework. Thus, I'm working on a prototype of starwars/star raider-like game : (no framework, canvas 2D, no preloader -reload until the cannons display, CTRL = fire) My yesterday attempt with Phaser is here : (no cannon yet) As you can see, I use sprites for the starfield here whereas I used only fillRect() in the canvas 2D version. I know Phaser is very effective in sprite management but I wonder if it would be better to use graphics to draw and render the starfield. Is it more expensive to draw and animate many small rectangles or circles drawn with graphics or to set sprites and use their body physics ? Considering I will have to use graphics to draw the lasers, maybe is it a good option to draw the starfield with graphics too ? In general, do you advice to opt for sprites or for graphics rendering in case where both could be used for quite the same result ?
  2. I'm trying to extend an object to the sprite class in my game.js I know this is achived with: MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype);MonsterBunny.prototype.constructor = MonsterBunny;But in the structure that is in the examples I'm not sure where to put it, I have it like this: BasicGame.Game.prototype = { MonsterBunny : function(game, rotateSpeed) { /*some code*/ }, Box : function(game, rotateSpeed) { /*some code*/ }, create: function () { }, update: function () { }}; /* I don't know where do I need to put this */ /*===========================================================*/ MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype); MonsterBunny.prototype.constructor = MonsterBunny; MonsterBunny.prototype.update = function() { // Automatically called by World.update this.angle += this.rotateSpeed; }; /*===========================================================*/I know this is more a JS (noob) question, but i couldn't find a solution, so help would be appreciated
  3. Hi, I'm new to Phaser, but not game/sprite engines. Javascript has some quirks I'm still getting used to, and perhaps this is one of them. My question is this: Why do I need to assign a different 'id tag' to an image for sprites to behave as separate instances? For example (preload function): game.load.image('reel', 'reel.png');game.load.image('reel2','reel.png');game.load.image('reel3','reel.png');Then, in my create function, I instantiate a couple custom classes (where the sprite itself resides): r1 = new Reel({x:201,y:130,img:'reel',cb_stop:cb_r1_stop});r2 = new Reel({x:201+128+10,y:130,img:'reel2'cb_stop:cb_r2_stop});r3 = new Reel({x:201+128+10+128+10,y:130,img:'reel3',cb_stop:cb_r3_stop});(class constructor where sprite resides): s = game.add.sprite(args['x'],args['y'],args['img']);Problem: So if I do not make these 'reel','reel2','reel3' any cropping, moving, or other modifications I make to the sprite itself (yes, separate instances as they are wrapped in their own class) I make to the sprite itself will apply to all 3 sprites no matter what -- as if it's modifying the image resource, not the sprite. As a temporary work around I just made 3 separate resources, but that can't be right, can it? Sooo, I'm doing something wrong. I'm just flying through the tutorials, so it's likely there's some other way to add/work with sprites and I'm missing it?
  4. Hello, I was studying from code in 'Tanks' example game that came with Phaser package in github. I was looking for line of code that set speed of enemy's bullet and how it shoot to player. I found this very line: bullet.rotation =, this.player, 500);It comes out that this line makes the bullet shoot to player. In my sense, bullet.rotation should only change the angle of the bullet, but didn't apply any velocity for it to move. Could you explain how does this work? p.s. Sorry for dumb question here. I am just trying to understand the code.
  5. Hello! I am working on a project at the moment, I had collision detection working for a player sprite to pick up a coin, but when I added in animation it stopped working! Can anybody help me please? var bg, hm, fixed, land, counter;var game = new Phaser.Game(500, 500, Phaser.AUTO,'',{preload: preload, create:create, update:update});function player(){ dx:0; dy:0; dist:0; time:0; speed:100; counter:0; moveBool:false; newX:0; newY:0; fps:5; xy:0;}function preload(){ game.load.spritesheet('playerSprite', 'images/character.png',32,32); game.load.image('bg','images/bg.jpg'); game.load.image('coin','images/coin.png'); game.load.image('hpxp','images/healthexp.png'); //'BG', ['Travel.mp3']); //music ='BG'); //;}function create(){, 0, 2000, 2000); land = game.add.tileSprite (0, 0, game.width, game.height, 'bg'); land.fixedToCamera = true; playerSprite = game.add.sprite(256, 256, 'playerSprite'); playerSprite.body.collideWorldBounds = true; playerSprite.animations.add('down', [0,1,2,1], 10, true); playerSprite.animations.add('left', [3,4,5,4],10, true); playerSprite.animations.add('right', [6,7,8,7], 10, true); playerSprite.animations.add('up', [9,10,11,10], 10, true); = 'player'; sprite4 = game.add.sprite(700, 220, 'coin'); = 'coin'; sprite3 = game.add.sprite(500, 110, 'coin'); = 'coin2'; sprite2 = game.add.sprite(40, 60, 'coin'); = 'coin3'; console.log('sprite2 created'); sprite2.body.customSeparateX = true; sprite5 = game.add.sprite(880, 600, 'coin'); = 'coin4'; sprite6 = game.add.sprite(1120, 300, 'coin'); = 'coin5'; hpxpbar = game.add.sprite(10, 10, 'hpxp'); = 'bar'; hpxpbar.fixedToCamera = true; text = game.add.text(80, 60, "Score: " +counter, { font: "25px Arial", fill: "#ff0044", align: "center" }); text.fixedToCamera = true; text.anchor.setTo(0.5, 0.5); playerSprite.anchor.setTo(0.5, 0.5); playerSprite.body.collideWorldBounds = true;; = new Phaser.Rectangle(200,200, 130, 130);, 0); //;}function getThere(){ player.speed = 100; player.newX = game.input.worldX; player.newY = game.input.worldY; player.dx = Math.round(player.newX-playerSprite.x); player.dy = Math.round(player.newY-playerSprite.y); player.dist = Math.round(Math.sqrt(player.dx*player.dx+player.dy*player.dy)); player.time = Math.round((player.dist/player.speed)*1000); player.moveBool = true; console.log("x" +player.dx); console.log("y" +player.dy); player.xy = Math.abs(player.dx)-Math.abs(player.dy); console.log(player.xy); playerAnimation();}function update() { //game.physics.collide(playerSprite, sprite3, collisionHandler2, null, this);// game.physics.collide(playerSprite, sprite4, collisionHandler3, null, this);// game.physics.collide(playerSprite, sprite5, collisionHandler4, null, this);// game.physics.collide(playerSprite, sprite6, collisionHandler5, null, this); game.input.onDown.add(getThere, this); if(player.moveBool){ game.add.tween(playerSprite).to({ x: player.newX, y:player.newY }, player.time, Phaser.Easing.Linear.None, true); player.moveBool = true; } if(playerSprite.x==player.newX && playerSprite.y == player.newY){ playerSprite.animations.stop(); } land.tilePosition.x =; land.tilePosition.y =; game.physics.collide(playerSprite, sprite2, collisionHandler, null, this); console.log("collision set");}function playerAnimation(){ if(player.dx<0 && player.xy > 0){'left'); if(playerSprite.x==player.newX && playerSprite.y == player.newY){ playerSprite.animations.stop(); playerSprite.frame=1; } // console.log(player.dx); } else if(player.dx>0 && player.xy > 0){'right'); } else if(player.dy<0 && player.xy < 0){'up'); } else if(player.dy>0 && player.xy < 0){'down'); }} /* if (cursors.left.isDown) { player.body.velocity.x = -150; if (facing != 'left') {'left'); facing = 'left'; } }*/function collisionHandler (playerSprite, sprite2) { sprite2.kill(); console.log( + ' collided with ' +; updateText();}/*function collisionHandler2 (obj1, obj2) { obj2.kill(); console.log( + ' collided with ' +; updateText();}function collisionHandler3 (obj1, obj2) { obj2.kill(); console.log( + ' collided with ' +; updateText();}function collisionHandler4 (obj1, obj2) { obj2.kill(); console.log( + ' collided with ' +; updateText();}function collisionHandler5 (obj1, obj2) { obj2.kill(); console.log( + ' collided with ' +;updateText();}*///function render() { /* game.debug.renderCameraInfo(, 32, 32); game.debug.renderSpriteCoords(hm, 32, 200); game.debug.renderSpriteCoords(fixed, 600, 200); *///}function updateText() {player.counter++;text.setText("Nope: " + counter);}
  6. Hello everyone, i was trying to do a little practice after i have finished the platformer tutorial, and am stacked with a weird problem, the sprite just move a little bit then it stops moving at all, even that the X velocity is different from zero, here is a link to see the problem : the code is there but, here you go : <script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() { game.load.image('blue','assets/blue.png'); game.load.image('sky','assets/sky.png'); game.load.spritesheet('cat', 'assets/myCat.png', 100, 100); }var speed = 250;function create() { //sky sky = game.add.sprite(0,0,'sky'); //platform platforms =; for(var i=0;i<32*25;i+=32){ var ground = platforms.create(i,,'blue'); ground.body.immovable = true ; } //the cat player = game.add.sprite(32,,'cat'); player.anchor.setTo(.5,.5); player.animations.add('run',[0,1,2],10,true); player.animations.add('jump',[3],true); player.animations.add('idle',[0],true); player.body.gravity.y = 6; player.body.bounce.y = 0.01; player.body.collideWorldBounds = true;}function update() { game.physics.collide(player,platforms); if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) ) {'run'); player.scale.x =-1; player.body.velocity.x =-250; console.log(player.body.velocity.x) } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) ) {'run'); player.body.velocity.x =250; player.scale.x =1; console.log(player.body.velocity.x) } else if (game.input.keyboard.isDown(Phaser.Keyboard.UP) ) {'jump'); player.body.velocity.y = -250; }else{ player.body.velocity.x = 0 ;'idle'); }}</script>thank you very much
  7. Hi everyone, I've been working on my game but I couldn't get past this error. What I'm trying to do is that everytime I kill and enemy with the wrong bullet, it spawns more enemy in the screen as a penalty. The problem is that when I kill and enemy, there's a change that "Uncaught TypeError: Cannot read property 'sprite' of undefined" would appear and the game stop. Here's the code so far: function killEnemy(bullet, enemy) { if (bullet != player) { bullet.kill(); } enemy.kill();}function penaltyRed(bullet, enemy){ if (bullet != player) { bullet.kill(); } enemy.kill(); spawnEnemies("RED"); // console.log("penalty red");}function penaltyGreen(bullet, enemy){ if (bullet != player) { bullet.kill(); } enemy.kill(); spawnEnemies("GREEN"); // console.log("penalty green");}function penaltyBlue(bullet, enemy){ if (bullet != player) {'' bullet.kill(); } enemy.kill(); spawnEnemies("BLUE"); // console.log("penalty blue");}function spawnEnemies (color) { if (color == "BLUE") { for (i = 0; i < 3; i++) { do { ghostEnemy = game.add.sprite(game.rnd.integerInRange(0,, game.rnd.integerInRange(0,, 'ghostEnemy'); } while (game.physics.overlap(ghostEnemy, player) || game.physics.overlap(ghostEnemy, blueEnemy) || game.physics.overlap(ghostEnemy, redEnemy) || game.physics.overlap(ghostEnemy, greenEnemy)); blueEnemy.create(ghostEnemy.x, ghostEnemy.y, 'blueEnemy'); ghostEnemy.kill(); } } else if (color == "RED") { for (i = 0; i < 3; i++) { do { ghostEnemy = game.add.sprite(game.rnd.integerInRange(0,, game.rnd.integerInRange(0,, 'ghostEnemy'); } while (game.physics.overlap(ghostEnemy, player) || game.physics.overlap(ghostEnemy, blueEnemy) || game.physics.overlap(ghostEnemy, redEnemy) || game.physics.overlap(ghostEnemy, greenEnemy)); redEnemy.create(ghostEnemy.x, ghostEnemy.y, 'redEnemy'); ghostEnemy.kill(); } } else if (color == "GREEN") { for (i = 0; i < 3; i++) { do { ghostEnemy = game.add.sprite(game.rnd.integerInRange(0,, game.rnd.integerInRange(0,, 'ghostEnemy'); } while (game.physics.overlap(ghostEnemy, player) || game.physics.overlap(ghostEnemy, blueEnemy) || game.physics.overlap(ghostEnemy, redEnemy) || game.physics.overlap(ghostEnemy, greenEnemy)); greenEnemy.create(ghostEnemy.x, ghostEnemy.y, 'greenEnemy'); ghostEnemy.kill(); } } }What happens in the spawnEnemies fuction is this: I create a ghostEnemy that has the same size of the normal enemies, but its sprite is an transparent image. Then I check if it collides with the player, the blueEnemy (group), the redEnemy (group) and the greenEnemy(group). If it does, it's not a suitable place and the while loop gets another position for me. If it doesn't collide, then it's an OK position and I create an actual enemy with ghostEnemy's X and Y position. And then I kill ghostEnemy. I use this code so every enemy spawns in a random location, but not on top of any other enemy/player. And it works fine when I call it. The only problems is when I call this function when an enemy is killed (the penaltyBlue/red/green functions). It's kind of a long problem so I understand if you don't have time to read all this. If anyone wants to download the game and see the problem in action, here it is:
  8. Hi, Is there a way to batch sprites together to save precious drawcalls (mainly on devices) when they originate from the same sprite sheet? From what I see it seems atlases are used only as sources of bitmaps, they don't batch sprites together. Or am I wrong? Is there any other way in Phaser? Sorry if I missed it somewhere in docs, examples or here on forum, but I completely failed to find any bit of the information. Thanks!
  9. I've been looking through the Phaser source code for the "right" or "developer-intended" way to remove a sprite from the game when it moves off-screen. There appears to be an "inWorld" property that I can check. Excellent! But even better, I saw something called "onOutOfBounds" that appears to automatically check for this condition and trigger a Phaser.Event or a Phaser.Signal -- and here it gets a bit murky for me. I suspect that after creating a sprite (called "bullet" for instance) I should be able to handle this behavior by coding something like: ??? ); where ??? involves a call to kill() (or destroy() when it is added to the library). Any thoughts on what ??? should be?
  10. I noticed that my sprites lag behind the tilemap, when the camera starts to move. The tilemap scrolls along smoothly, but the position of the sprites doesn't seem to be updated right away, so they jump ~1px at the beginning of the camera movement. This happened in 1.1.2 as well as the current dev build. Can be reproduced in the sci fly example by adding the following in the create function: group =;for (var i = 0; i < 100; i++){ group.create(,, 'phaser');}(createMultiple somehow didn't create anything) Is this a bug and/or is there a way to fix this?
  11. I noticed some odd behaviour of sprite bodies. If I take a sprite, set visible to false and start moving it around while rendering the body with game.debug.renderSpriteBody, the body will actually stay where it was. This is especially strange when I use kill to temporarily depose of a sprite, because the body will still be present in the game. This lead to two bugs in my project: 1. My invisible enemies are now almost impossible to hit, because they don't carry their bodies with them 2. Somehow the body of my projectile is able to collide on it's last position, when I used reset after using kill. I was not able to reproduce this in the examples, so I don't know what strange factor is contributing to that. I destroy my projectile now so this doesn't happen, though I would have liked to reuse it. The invisible enemies could be achieved with empty frames, but I don't like that solution either. So basically I want to know if this is supposed to happen and if so, how I could implement enemies that can turn invisible without needing an empty frame in their spritesheet.
  12. Hey guys, Hopefully my last lame thread topic (getting over the noob stage...), but I was wondering what everyone's attitudes and methods are to game sprites or the characters, backgrounds, objects etc. What program do you use to create your sprites and why? I'm in two minds at the moment. I'm thinking either photoshop or Illustrator, but leaning more towards Illustrator so I can create scalable graphics cause just because you think a sprite would look good at a certain size, then you code it and demo it and eek.... Too big or too small. With the vector graphics of Illustrator, I can resize the images perfectly to any size I want and still keep a great quality. Plus with layers, I can make a base and then add different layers for different stages of movement. Or is that all wrong? Thanks in advance!
  13. I'm going to build a cool animated game, simple mechanics and few game objects (around limit of 50) without counting particle effects if any. The main goal a want to succeed is to make smooth animation. All animation is going to be sprite/frame based, and still a lot of games use 3 to 4 frames for animating a character running left, or top My main question is when frames are too many... If i make 10 frame for walking left, 10 frame for walking to top, then 10 frames for walking to bottom, and 10 frame for a idle animation: Then I've got to have 40 frames of character for the most basic animations. Then lets consider: jump, duck, slide, lean and so on.... Also should I consider making a transitional frames from: jump to duck for example: When player jumps, and the land he isn't landing straight to idle animation, but is a bit crouching then - if player press: "duck" instead of finishing the animation to stand up, and then make the player duck, i want to stop the animation on the 7 frame of jump animation and start playing jump-crouch to duck animation... Because this is a wide description I'll search and throw some examples from the web which I rate as good spite animations... but also I''ll be vary happy if more people share their vision for in game animations, or some article they find useful... I'll update the topic with my own research too Ahh also very important detail: A character for my future game will have a average size ot 200 x 200 px - so I think this makes the need of more frames to make animation more smooth since if a characters is 50 x 50 px - art. then you can't make so many diferent body positions and so on.
  14. Hi i have this code personaje=game.add.sprite(x,y,'hero') personaje.animations.add('run')'run', 12, false,{HERE THE CALL BACK WHEN ENDS});How can i call a callback when de sprites ends ? Ty
  15. I have a tile of about 100 hexagons, and it seems they are not performing greatly on mobile. Since they are the background, can I somehow pre render them to a single sprite and render it instead?
  16. is there a way to handle collisions of an object depending on the side colliding? for example top, bottom, left, , right so for example I have a character and I want it to do something when it collides on the left side of a sprite, but when it is on top, just continue. PD: i think the chat is down, I don't know if it is known.
  17. I am very new to phaser but what I am trying to achieve here is lots of sprites (in a group) moving at a constant speeds in different directions. This is the code I have so far: var game = new Phaser.Game(600, 400, Phaser.AUTO, '', { preload: preload, create: create, update: update });var enemies;var numOfEnemies = 10;function preload() { game.load.image('gold', 'assets/gold.png');}function create() { game.stage.backgroundColor = 0x8C8C8C; enemies =; for (var i=0; i<numOfEnemies; i++) { createEnemy(); }}function update() { for (var i=0; i<numOfEnemies; i++) { enemies.getAt(i).x += Math.random()*2; enemies.getAt(i).y += Math.random()*2; }}function createEnemy() { enemies.create(Math.random()*(game.width-32),Math.random()*(game.height-32),"gold");}The problem here is that the speed of each object in the group changes every update. I think the solution here would be to make it so that every object created has a set speed in the createEnemy function but it is different for each object in the group. How would I do something like this?
  18. If I do this: h = game.add.sprite(0,0, "hospital");h.x = 49900 - h.width;h.y = findGround(h.x + h.width) - h.height + hospitalOffset * 0.5; The sprite will display at 0,0 (top-left of the screen... ignoring the camera location) as a brief flicker before moving to the correct location.I'm guessing this is down to some precalculated transforms which aren't updated by the x,y setters.What function should I call to recalculate the transform to prevent this flicker? (Notice that I can't position it directly because I need the width and height of the sprite which aren't available until after it's been created)
  19. Hi forum, I am working on a proof of concept for a game where i need to be able to place buildings (like any RTS you know). I already have some terrain generation going (I do not use tilemaps) with trees and later on other stuff. I'd like to know if it is possible somehow to calculate where a user can place buildings, and possible even draw (using PIXI.Graphics) a green colored area (around the building) where it is possible to place / install it. Circle based collisions would help at this stage, but alpha channel transparency checks would be better: i have tree textures as transparent 256*256 and 512*512 PNG's with shadow, i'd like to know when a building is being placed right near a/some tree(s). (no preloader, working version. zooming is buggy but too lazy to work on that right now :> ). Thanks for any tips / pointers!
  20. Well i'm updating old Phaser code to 1.0 Well some renaming and function moved to new objects and so on I'm a bit stuck here: function preload() {, 416); myGame.load.image('logo', 'assets/images/logo.png'); myGame.load.image('bg', 'assets/images/bg_prerendered.png'); myGame.load.atlasJSONArray('tiles', 'assets/textureAtlas/breakout.png', 'assets/textureAtlas/breakout.json');}function create() { myGame.add.sprite(0, 0, 'bg'); paddle = myGame.add.sprite( / 2, - 48, 'tiles'); paddle.animations.add('paddle_big', ['paddle_big.png'], 10, false, false); paddle.animations.add('paddle_small', ['paddle_small.png'], 10, false, false);}And the error that hit's me is : Uncaught TypeError: Cannot read property 'uuid' of null phaser.js:20495 Phaser.AnimationManager.addphaser.js:20495 creategame.js:277 Phaser.StateManager.loadCompletephaser.js:7851 Phaser.Game.loadCompletephaser.js:10273 Phaser.SignalBinding.executephaser.js:8426 Phaser.Signal.dispatchphaser.js:8312 dispatchphaser.js:8115 Phaser.Loader.nextFilephaser.js:23026 Phaser.Loader.jsonLoadCompletephaser.js:22920 _xhr.onload What i checked is that: paddle.animations.add('paddle_big'); - works, but there isn't a frame name specified paddle.animations.add('paddle_big', [1], 10, false, false); - agian works but is hard to tell what frame is 1,2,3, etc. So I suppose that there is new way of doing this but I'm stuck on this from one hour and decided to share my frustration. I checked old examples TS, and all news examples which are so little compared with TS examples so I'm offering to convert some of the old ones to 1.0 because I'll gain some more knowledge too but first I must pass the atlas texture problem.
  21. Enigmafan

    Tiling sprites

    Hello, another question... Suppose I have a game of chess. What would I use to render the playing board? I was thinking one could take 2 graphics, a white square and a black square and use them to build the 8x8 board. Would I use tiling sprites for this? Or is there something else you would use? I was thinking of sometimes changing the playing board. Can I erase the contents of a container? Do I need to 'destroy' the tiling sprites used before? Thanx in advance for your answers.
  22. Enigmafan

    ID of sprite

    Hello all, I have just stated using pixi.js (and linking it :-) as well as javascript. I usually program in Java. When I create a bunch of sprites, I put them in an array to keep track of them. The user is able to click on the sprite and drag it along. But I need to check the direction the sprite may move to, which is different for every sprite. But when the ontouch or similar event is triggered, I have no way to correlate the sprite touched with the sprite in my array. I have looked through the api, but found no way to do this. The solution I've come up with is; extend the sprite object (as you would in java) and include an ID or other reference. But my programming skills in javascript are not enough to know if that is possible. Does anyone have a suggestion if this is a good solution? Does anyone have another solution? Thanks.
  23. Hi, Do you know if there is a way to use the tiling sprite object with a texture having a size being not a power of 2 ( Even if it is a bit less efficient ) ?