Search the Community

Showing results for tags 'sprites'.

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
    • Web Gaming Platform
    • 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 192 results

  1. I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() {'tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV);'tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32);'player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() {;; cursors = game.input.keyboard.createCursorKeys(); ='tilemap');'snow_tiles_32', 'tiles'); = '#80e3ff'; this.ground ='collision'); this.ground.resizeWorld();,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' });,34, true, 'collision'); //player this.player =,50,'player');; this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true);;; } function update() {, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150;'right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar
  2. Is there a way to position every frame with different positions in MovieClip in case where frames are different sizes. As much as I explored, I couldn't find a way, because frames created with new PIXI.Rectangle have only x,y (which is frame position on spritesheet) and width and height.
  3. I am building the interface for a game and one part has a grid of square buttons. When the user hovers over the button, a information box (as a sprite) and some options appear as an overlay underneath the button and the user should be able to click the button to make a selection. The problem I have is that as soon as the mouse moves beyond the boundary of the button, my onMouseOut event kicks in and closes the overlay before the user has a chance to click anything in it. So what I need to implement is some logic that says "On mouse out of button, check to see if the mouser is above the overlay sprite. If it is then don't hide it. If it's not then do hide it. So is there any way of simply getting a boolean answer to "is the mouse pointer over this sprite"
  4. Hello. Noob question. Hard time reading and understanding isometric docs. I want to create a isometric sprite. Not add it, but create it: I know that I can add it like game.add.isoSprite(). It is like when I create a group and create a sprite in it with "player1 = group_name.create(...);" I would like to create a isosprite. Is not implemented in isometric plugin? Do I have to add a isoSprite to the world and then add it to the group with group.add?
  5. I have some vector art stuff, and i was wondering if anyone know any form to load vector art into phaser? I found some post like this :, but that post doesn't really answer my question. Thanks!!!!!
  6. I am working on a robot game and I am using phaser library. My requirement is to pass the x y coordinates to robot(sprites) and it should move according to that coordinates without any velocity or speed. Every one is using speed to move the sprite. So, kindly give me some suggestions. Now I am using following code for moving sprites: // The following code is for the robot movement // This is initial velocity player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -200; } else if (cursors.right.isDown) { player.body.velocity.x = 200; } if (cursors.up.isDown) { player.body.velocity.y = -200; } else if (cursors.down.isDown) { player.body.velocity.y = 200; }
  7. View the jsfiddle demonstrating the issue (just click and drag the circle - relevant code on line 102). When I add a circle to the stage with Pixi.Graphics and drawCircle( 150, 100, 50 ), the circle when dragged becomes offset by it's position ( +150, +100 ) in the Graphics container. (and if we request the circle.position it's also inaccurate) What's the best way to add a shape to the screen and set it's position if it's not through a Graphics container?
  8. Hey guys, Just wanted to show my little in-development game engine. I decided to create my own engine as Panda.js didn't got any updates for several months. The goal here is to have a lightweight but powerfull game engine with awesome performances, whatever the device is (ie. Android) while being able to use Canvas+ (so, no DOM is used as Canvas+ doesn't supports DOM). What I've already done: Game config via `config.js` file ; Game scenes ; Ultra-customizable Sprite class that allows to modify everything drawing related ; Mouse events support (click, move, hover, down, release, out) and Drag & Drop support ; Built-in physics engine (made on my own, so a bit hacky/buggy but I plan to fix these issues :p) ; Only redraw what needs to by using a simple variable on every scene children: `needsUpdate`. What I want to do: Implement built-in networking to allow multiplayer games/apps ; Implement UI elements like Text, Buttons, Scrollable panels, Inputs to allow devs to make real Canvas UI ; Fix the overall bugs ; Add some helper classes ; Maybe implement SAT.js for collisions detection/solving ; And finally, build the game I started this engine for :). So this is an "ambitious" project that aims to allow doing things other engines wasn't able to offer me. Source code (Gitlab): Demonstration: Feel free to contribute to the code, open issues if you find them, create issues for suggestions too. Or simply leave a message here. Thanks for reading, I hope I'll be able to drive this project the right way.
  9. this is my first post so i apologize if i'm posting incorrectly. i'm trying to have a button change its frame and some of the others in the group. the buttons display fine initially and i can successfully change the properties but i cannot visually get them to change frames when one is clicked. on the other hand, if i want to change only one button that works (you can see that i left the code commented out for that). i left the changing button frames line blank because i've tried so many things and nothing seems to work. var GameState = { preload: function(){'btnSht', "tFassets/btnSprtSht.png", 100, 100, 4); }, create: function(){ btnArray = [ {x: 50, y: 200, id: 1, frm: 0}, {x: 150, y: 200, id: 2, frm: 0}, {x: 250, y: 200, id: 3, frm: 0}, {x: 350, y: 200, id: 4, frm: 0}, {x: 450, y: 200, id: 5, frm: 0}, {x: 50, y: 300, id: 6, frm: 0}, {x: 150, y: 300, id: 7, frm: 0}, {x: 250, y: 300, id: 8, frm: 0}, {x: 350, y: 300, id: 9, frm: 0}, {x: 450, y: 300, id: 10, frm: 0}, ]; this.btns =; var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum =; btn.frame = element.frm; btn.inputEnabled = true;, this); }); }, btnFunc: function (sprite, event) { //console.log(sprite.idNum); /* this works to change the one clicked if (sprite.frame == 0) { sprite.frame = 1; count++; } else { sprite.frame = 0; count--; }; */ btnArray.forEach(function (element){ //resets all back to zero before element.frm = 0; //assigns new frame value to appropriate btns for (var i = 0; i < sprite.idNum; i++){ this.btnArray[i].frm = 1; }; //check to make sure values are changed and they are console.log(btnArray); //change btn frames visually }); }, update: function(){ }, }, game = new Phaser.Game(600, 400, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState'); tF.js
  10. I am trying to create a game where I have created one player and at the background I have added tiled map. The problem is how can I get the player coordinate every time so that I can replace the tiles covered by the player. Thank you !
  11. Hello, I've been following a Phaser spring example and I've been trying to remove the overlay sprite it draws on my circular physics body (I assume it adds this when I call body.setCircle(5)). Does anyone know how to remove this? I don't want to remove the body, I still want the physics, I just don't want the extra debug drawn sprite. Thanks
  12. I am trying to create a simple Multidimensional array that will add a sprite to the spot example [0,0] I was following how this was doing by doing something similar like: this.tileGrid = [ [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null], [null, null, null, null, null, null] ]; but all I want is being change those position in the grid to sprite and none of the animation just simply to be there. addTileItem: function(x, y){ //Choose a random tile to add var tileToAdd = this.tileTypes[1]; //Add the tile at the correct x position, but add it to the top of the game (so we can slide it in) var tile = this.tiles.create((x * this.tileWidth) + this.tileWidth / 2, 0, tileToAdd); //Animate the tile into the correct vertical position{y:y*this.tileHeight+(this.tileHeight/2)}, 500, Phaser.Easing.Linear.In, true) //Set the tiles anchor point to the center tile.anchor.setTo(0.5, 0.5); //Enable input on the tile tile.inputEnabled = true; //Keep track of the type of tile that was added tile.tileType = tileToAdd; //Trigger the tileDown function whenever the user clicks or taps on this tile, this); return tile; }, I think I am overthinking the problem but I been at this for a while any help would be greatly appreciated.
  13. Hi I'm trying to do a small product presentation with features and benefits displayed as a sprites around product and I had no problem with that. What I have problem with and have no idea how to handle this issue is a need of fading out this sprites while camera moves from one side to another. What would need to be done to get this kind of effect? I found this as an example of effect I'd like to achieve. Fading effect
  14. Hello everyone, I have this doubt (little introduction before): I think is really helpful to use a sprite property to "store" another sprite. For example, when I have several enemies and I want all of them to have a health bar I can do something like this: var enemies =; for(var i = 0; i < 5; i++){ var enemy = game.add.sprite(0, 0, "enemy", 0); var health = game.add.sprite(enemy.x, enemy.y, "bar", 0); = health; enemies.add(enemy); } By doing this, I can easily locate the health bar in the game later. For example if I want to change the bar's frame I only have to: enemies[i].health.frame = 1; I can do this several times, for example if I want to add a magic bar to the enemies, a text with the name, etc. The problem is, when I want to move the enemy sprite. At this moment, I create a tween for the 'main' sprite, and another tween for each of the properties: game.add.tween(enemies[i]).to({...}); game.add.tween(enemies[i].health).to({...}); game.add.tween(enemies[i].magic).to({...}); This is ok when you have just one property for each sprite, but when the numbers go up, it starts to look... problematic. Specially when each enemy have different properties. I was wondering if there's a way to move a sprite and 'all the sprites that belongs to them' at the same time with a single tween. Thank you! Gonzalo.
  15. Hi there, Im having some issues with performance when i render thousands of sprites. Currently having issues with loading around 20k sprites, but eventually plan on having more (maybe even up to 60k) around the map. I did some research and found this is a somewhat common issue but cannot get a clear and concise answer. I ran some chrome profiles on my game to see whats holding me back: here are my results. To be honest, I don't really understand what that information means other than 20k sprites is too much. (I have a fairly decent computer and its slightly choppy at 20k trees, at say 60k its very choppy) Also, when I say choppy, I mean like it looks choppy, my movement is still fine (to make the point that its not like the game loop thats lagging). Essentially I have 20k trees being placed around a very large map that's being rendered with a tileSprite. However, it's not the map size that is holding me back since the performance I get is very dependent on the number of tree sprites. The tree's have no physics enabled on them and are just rendered and placed in a group then never touched again. Here is a snippet from my create function and how i render the trees. for(var i = 0; i<20000; i++){ treeX = Math.round(Math.random()*(mapSize-1)); treeY = Math.round(Math.random()*(mapSize-1)); temp = position(treeX, treeY); createTree = game.add.sprite(temp[0],temp[1], 'tree2'); treeGroup.add(createTree); } The position function I called in the loop just gets the pixel location of the tree's based on a tile, as shown below: var position = function(col, row){ column = (33*col+1); rowFin = (33*row+1); return [column, rowFin]; }; Any ideas as to how i can beef up my performance? Any way I could not render the tree's until they are in view? (Kill then revive when seen?) Any tips are greatly appreciated! Side note (if its useful), right now all I have is the tileSprite background, 20k trees, and movable player sprite. Edit: Would creating a chunk system be a good idea? If so anyone have any idea where to start with the best way to make one?
  16. Hi, dear game developers. I had seen that link on examples load-polygon-1 or var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('contra2', 'assets/pics/contra2.png'); // Load our physics data exported from PhysicsEditor game.load.physics('physicsData', 'assets/physics/sprites.json'); } var contra; var start = false; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); contra = game.add.sprite(400, 300, 'contra2'); // Enable the physics body on this sprite and turn on the visual debugger game.physics.p2.enable(contra, false); // Clear the shapes and load the 'contra2' polygon from the physicsData JSON file in the cache contra.body.clearShapes(); contra.body.loadPolygon('physicsData', 'contra2'); // Just starts it rotating game.input.onDown.add(function() { start = true; }, this); } function update() { if (start) { contra.body.rotateLeft(250); } } function render() { } , and i'm trying create json like that, since i saw that example. I saw some suggestions about physics editor or mapeditor tiled. i installed it, but i have no idea about creating json like that despite researching how its doing on internet. Probably i need some help
  17. Hi Guys, I have been battling with this for some time now. I'm kinda newbie with phaser too. Currently I'm trying to build a football game where the player adds the ball (both are sprites) to his own sprite and moves around with it until is moment to "kick" the ball, sending it in any direction. My problem is that I can't seem to be able to release the ball once its been attached. I tried "moveToXY" or "AccellerateToXY" but nothing seems to be doing it. I also tried bypassing the collision "attach" behavior as it seems that it may be a problem but I dont think that is the problem, unless someone tells me otherwise. Here's a screenshot of the game so you can have better context . How can I release the ball from the sprite and send it on a given direction? What do you think is the problem? ... kick: function(direction, speed){ var ball = this.sprite.getChildAt(0); this.sprite.removeChildAt(0); game.physics.arcade.moveToXY(ball, direction.x, direction.y, speed); this.possession = false; }, ...
  18. I'm working on a game where the player character can change into different colors, depending on which power-up he takes. All animations are basically the same, except the sprite index is offset. The player sprites at index 0 through 7 are red, 8..15 are the same sprites but green, and 16..23 are blue. If the walking animation sprites are index 1,2,3 etc. for red, they are index 9,10,11 etc. for green (just add +8), and for blue add +16. See the sprite sheet example in the attachement (they are ripped and edited Megaman sprites, but that's just a placeholder graphic for now). I can't change the frames array of an animation AFAIK, so should I just add all the separate animations for each color, so something like this? this.animations.add("walking_1", [ 1, 2, 3, 4], 6, true); // red this.animations.add("walking_2", [ 9, 10, 11, 12], 6, true); // green this.animations.add("walking_3", [17, 18, 19, 20], 6, true); // blue this.animations.add("jumping_1", [ 5, 6], 6, true); // red this.animations.add("jumping_2", [13, 14], 6, true); // green this.animations.add("jumping_3", [21, 22], 6, true); // blue // and then later"walking_" + this._powerup_idx); // red green or blue The thing is, I want to expand it to 6, or maybe 8 power-ups and colors, so is there maybe a more clever way to handle this sort of sprite index offset in Phaser? Or is this the way to go?
  19. hi there, if i create a Sprite and assign a BitmapData as its texture. then i can operate over the sprite texture(bitmapdata) using the bitmaps methods like getpixels? or how can i erase it after that ( i mean the bitmapdata)? thanks in advance
  20. I'm starting work on a game where I want to be able to randomly generate NPCs. These NPCs could have different faces, haircuts, eye colors, outfits, etc. I'm wondering what the best way is to handle this situation. These are the options I've considered: Design a spritesheet for every possible combination of feature. Let's say there's only 4 heads, 4 haircuts, 4 outfits and 4 "held items", that's 4x4x4x4 sprites, each of which would need multiple frames of animation. No thanks. Design a spritesheet per feature. One for the heads, one for the haircuts, etc. all partially transparent. Then use z-layers in CSS to overlay them into one complete NPC. Maybe there's some framework that I'm not aware of that would handle this more elegantly? Currently I'm considering option 2. I'd use a javascript function to determine whether this guy gets haircut 1, 2, 3 or 4, and use that variable to get the correct sprite. But I'm wondering if there is a 'tried and true method' for this. I might be really overcomplicating or oversimplifying things. I've only just started designing this thing so I'm not stuck on any particular framework yet. Any input would be much appreciated!
  21. Hi I need to find the distance between a player sprite and the closest sprite to it in a group of sprites, I know this can be done by iterating through each of the sprites in the group and checking them individually however, I was hoping phaser had a built in way of accomplishing this. Once the player is within a certain distance, it will die so if phaser has an event for this that will work as well. Thanks for any help
  22. Can we apply any plugin to gridify the sprites in a container? I am trying to group the sprites in a container so that I can move the container instead of all images inside it but I want sprites not to be overlapped.
  23. Hello, I'm a previously flash developer and learning games development using phaser and noticed that many things are done differently here. For example, you make an animated character something like that: game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json'); What if you have 20 animated characters in a game? Will you load 20 png and 20 json files? Then there will be other asset files. Is there a way to combine assets so that there are few load requests from the server.
  24. I've stumbled across an undesirable effect. When I add a filter to a sprite, and rotate it, the sprite is smoothed (blurred a small amount, looks like linear maybe) and also, it shakes slightly (you have to look closely to see it, but it becomes very apparent on small sprites. I don't know if this is phaser or pixi, but I was wondering if anyone knew of a way to alleviate the effect. The position thing looks to be loss of precision on the position or at least the effect makes it look like that, jumping from one pixel location to the next or something like that. The other I don't know about. There's no interpolation in the filter, the only thing I'm really doing is gl_fragcolor = texture2D(uSampler, vTextureCoord); both effects are removed if you just comment out the line: sprite.filters = [filter]; (removing the filter) here's a link to the simple example: and here's the code for that example: <html id="html" style="overflow: hidden;" ng-app="html"> <head> <title>Example</title> <meta name="author" content="glitchedRaven"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <script src="phaser.min.js"></script> </head> <body style="background: green; margin: 0vh; padding: 0vh;"> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }, true); function preload() { game.load.image('texture', 'test.png'); } var filter; var sprite; function create() { // Shader by Kali ( // Image patched by Richard Davey var fragmentSrc = [ "precision mediump float;", "uniform float time;", "uniform vec2 resolution;", "varying vec2 vTextureCoord;", "uniform sampler2D iChannel0;", "uniform sampler2D uSampler;", "void main( void ) {", "vec2 uv = gl_FragCoord.xy / resolution.xy;", "uv.y *= -1.0;", "uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);", //"vec4 texColor = texture2D(uSampler, uv);", "vec4 texColor = texture2D(uSampler, vTextureCoord);", "gl_FragColor = texColor;", "}" ]; // Texture must be power-of-two sized or the filter will break sprite2 = game.add.sprite(310, 230, 'texture'); sprite = game.add.sprite(0, 0, 'texture'); sprite.width = 400; sprite.height = 300; sprite.x = 400; sprite.y = 300; sprite.anchor.set(0.5, 0.5); sprite.scale.set(1.5, 1.5); sprite.smoothed = false; var customUniforms = { iChannel0: { type: 'sampler2D', value: sprite.texture, textureData: { repeat: true } } }; filter = new Phaser.Filter(game, customUniforms, fragmentSrc); filter.setResolution(1024, 1024); sprite.filters = [ filter ]; } function update() { sprite.rotation += 0.01; filter.update(); } </script> </body> </html> As I understand it, filters use a canvas element behind the scenes to render, but is there any way I can set the imageSmoothingEnabled property of that element? Or make the filtered sprite match the unfiltered sprite some other way? To be honest, the position shaking thing is more troublesome to me than the smoothing thing, is there a way to keep the location steady?
  25. I've recently started work on a new game, experimenting with the Rotates Isometric plugin and its mostly going great. I'm using the LPC base assets for my prototyping art because they are widely available and nicely animated (picture attached), but then the bugs started appearing. Every time the character moves in a direction I play the walking animation for that direction. All directions are fine, other than the upwards movement. After the upwards animation finishes (when the player and let go of the key) the sprite continues to float slowly up (-y) at a rate of about 5px/sec, until the player puts in another movement control, at which point everything is fine and the sprite flies back to where it was before it started to float away. The game registers both the x + y velocities as 0 while floating, as they should be, and I've run out of options to try. My other, more game breaking, problem is that when the player attacks the sprite plays the animation, but flies up (again -y) almost exactly 50px. Again the game logs the velocity of the sprite as 0 while this is happening, nevermind what direction the player attacked the sprite always flies up (-y). I threw both of these problems into the same question because I thought there were many similarities between the two, and perhaps they are related. Below I'll put in the Player Movement function, but if anything else is needed please feel free to ask. Not meaning to bed but I desperately need a hand with this, my boss loves what I've produced so far and is pressuring me to produce something concrete with it. function movePlayer(direction){ switch(direction){ case 'up': player.body.velocity.x = -player.speed; player.body.velocity.y = -player.speed;'walk-' + direction); playerDir = direction; _moving = true; break; case 'down': player.body.velocity.x = player.speed; player.body.velocity.y = player.speed;'walk-' + direction); playerDir = direction; _moving = true; break; case 'left': player.body.velocity.x = -player.speed; player.body.velocity.y = player.speed;'walk-' + direction); playerDir = direction; _moving = true; break; case 'right': player.body.velocity.x = player.speed; player.body.velocity.y = -player.speed;'walk-' + direction); playerDir = direction; _moving = true; break; default: player.body.velocity.y = 0; player.body.velocity.x = 0; player.animations.stop(true); player.frameName = 'walk/' + playerDir + '/0'; _moving = false; break; } }