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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 174 results

  1. Animating Sprites

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  2. Sprite Animations

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  3. Spritesheets with 2d array of sprites

    Apologies if newbies ask this all the time, but I'm new to Phaser and don't know what to search for. I want to make a spritesheet with m rows and n columns, where every sprite on the top row is the first cell of an animation that plays when the sprite is at that orientation. So if I have a sprite sheet that is 5 cells across and 3 cells deep, I want the middle top cell to represent a spaceship when it is facing forward with cell 1 of the animation of the spaceship jets, then the middle middle cell is the spaceship facing forward with cell 2 of the spaceship jets animation, and the middle bottom cell is the last cell of the spaceship jets animation. How do I tell phaser to loop through these cells on the spritesheet when no key is pressed? The left turn animation is similar - how do I tell phaser to loop through 3 cells of left turn animation in the 2d spritesheet plane? Is there any speed advantage to having sequential animation cells next to eachother, or does it not matter so I could place all the animation cells in a line on the spritesheet and display any of them whenever? (The spritesheet attached isn't finished, but you can imagine)
  4. Hey guys, is it possible to select a sprite (via actionManager or scene.pickSprite, whatever) so the sprite transparency is taken into account? For example, in this playground the sprite is a circle: https://www.babylonjs-playground.com/#PVYYAQ , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,
  5. is there a gradient tint in phaser?

    is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|
  6. 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,
  7. 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);
  8. 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!
  9. 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?
  10. 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
  11. 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.
  12. 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?
  13. 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!
  14. 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() { }
  15. 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>
  16. 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?
  17. 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?
  18. 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.
  19. 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
  20. 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)
  21. 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.
  22. 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?
  23. 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??
  24. (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!
  25. 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);