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 142 results

  1. Hi All i was wondering if someone could help me with a phaser state query. I have been learning phaser from phaser.io and its all for a html index file however the code seems to be different then to what i need if i was to build a game with states. For example i have a player walking animation but converting it for js states seems to be very difficult, i cannot find a tutorial anywhere. Any chance someone could point me in the right direction? happy to share the code Thanks
  2. Can someone tell me, please, why collision does not take place during animation? Here is a game : https://oobarbazanoo.github.io/JumperKisame/.
  3. I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group = game.add.group(); group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); c.name = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  4. Hello, I have a problem with handling the collision between sprites. I have a group of enemies and a player sprite. I want none of the sprites to be able to move trough each others. At first I had the enemy body set to immovable and that disabled the player from pushing the enemy around upon collision. However, when I added more enemies to the group, I found that if the enemy bodies is set to immovable = true - they will be able to walk straight trough each others even if they have an internal collision detection (as that is the case between two immovable bodies). So if i set immovable to false - the enemies will appear solid when colliding with each other, but the player is able to push the enemy. What is it that I have not understood? I just want all the sprites solid.
  5. Okay so I have a rectangle boundary and I have 4 circles. Each of which I want to collide within this boundary. Is there a way to collide each sprite within this boundary without using p2? var rectangleBoundary = new Phaser.Rectangle(0, 120, 900, 1800); var c1 = game.add.sprite(200, 350, 'qcircle'); var c2 = game.add.sprite(500, 190, 'qcircle'); var c3 = game.add.sprite(120, 30, 'qcircle'); var c4 = game.add.sprite(590, 120, 'qcircle');
  6. sprites

    Hello all, I am new here and playing with Pixi.js using latest build but learning with old tutorials and examples. My question is I am working on a Board Game: Jackpot game Problem: I want to generate 3 Random Sprite images on canvas but how to do that. I tried but it's not working, how to pass random fruit image into sprite and display it on canvas. Thanks in Advance. PIXI.loader .add("images/48.png", "images/49.png", "images/50.png", "images/52.png") .load(setup); function setup() { var randomFruits = ["images/48.png", "images/49.png", "images/50.png", "images/52.png"]; function getRandomFruit(fruits) { var num = Math.floor(Math.random() * fruits.length); if (num === 0) { num = 1; } var fruit = fruits[num]; console.log(fruit); } getRandomFruit(randomFruits); let orange = new PIXI.Sprite.fromImage(fruit); orange.scale.set(0.6); orange.x = (app.renderer.width / 2) + 230; orange.y = (app.renderer.height - container.height) / 2 + 20; app.stage.addChild(orange); }
  7. Hi guys may I ask a quick question? I'm working with Phaser and I'm using the module pattern, creating a module that has a prototype of Object.create(Phaser.Sprite.prototype) and creating an instance of that in the main module. The problem is the sprite seems to be created in the main module in the create function but the image of the sprite is not loading and i cant find the problem or set the image. Thanks so much!!
  8. I am having a really weird issue. I am creating a sprite from an image as follows: var grid1_texture = new PIXI.Texture.fromImage("whiteSquare.jpg"); Now this works fine and I am able to add this to the stage. I basically want to add all my images to a folder called resources. So I changed the code to this: var grid1_texture = new PIXI.Texture.fromImage("/resources/whiteSquare.jpg"); When I do this, I can see in Brackets editor that the link is being made however, the sprites do not get rendered on the stage. Please help!
  9. Hi, I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties. But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!
  10. Hi, is it possible to make a sprite visible through the walls/meshes/other Sprites? Is it possible to make it visible always? PlayGround: http://www.babylonjs-playground.com/#1MJ5GH Its important because if the player is behind something he have to be visible. Also aims/marks in a labyrinth should be visible always. Thank
  11. Is there any way to add a listener that triggers when a sprite is visible by the camera?. The object Sprite contains inCamera, but it seems to re compute the bounds of the sprite according to this: http://www.html5gamedevs.com/topic/8936-does-phaser-handle-object-visibility-according-to-camera/, and that can be expensive. In my case I need to do this for many sprites on the screen, so I want to know if there is a more efficient way to do it.
  12. Edit: The solution to get Sprite2D with transparent areas working is to set "hasAlpha" on the Texture to "true". --- Hi, I want to use sprites2d (in canvas2d) made from png files that have transparent areas. expected behavior: Transparent areas are rendered transparent actual behavior: transparent areas are rendered not transparent It gets super weird, if I set opacity on the sprite to 0.999 everything works fine. Working, with opacity 0.999 http://www.babylonjs-playground.com/#DSJDT#11 no longer working with opacity 1.0 (or opacity removed): http://www.babylonjs-playground.com/#DSJDT#12 I will use the 0.99 opacity workaround for now., but this seems buggy - I would like my sprite to be rendered according to the alpha channel, and it's weird that this only seems to happen if I set opacity to 0.99. Maybe I missed another property?
  13. Hi, I have an idea of a game in which there would be a player who could collect different items(boots, helmet, pants, etc) It would really be a pain if I had to draw: 10 animation frames for normal character, 10 animation frames for character in boots, 10 animation frames for character in pants, 10 animation frames for character in pants,in boots, And so on..... You got me..(Of no, think of Minecraft or Terraria or Starbound where you can wear armor and stuff) So, my question is - Is it possible(in Phaser) to take different images(One for body, one for head, one for legs) and put them together and move,animate as if it was one image... Or maybe you have other suggestions?
  14. I am working on a project in which the user creates a system of points by adding them one-at-a-time. These points are also draggable, and clicking on existing points sets the clicked point as active. That's all working fine. When using a simple mouseDownCallback, clicking one of these existing points creates interference between the activities of the new point and the old point. I want to be able to determine what sprites, if any, a clicked point contains and run a function only if the spot is unoccupied. If I can do this via the activePointer versus specifically mouse, that's preferred, but not necessary. Can someone point me in the correct direction?
  15. I have an issue where I've got a row of rectangular sprites, drawn with phaser graphics, sitting in a seamless row. I then have some circle sprites set to move with set velocity in any of four directions (200x200, 200x-200, -200x200 or -200x-200) and bounce off this row of rectangular sprites. However, and this is behavior I've noticed before in a similar situation, whenever a circle sprite hits a rectangular one directly on the corner, the velocity drops drastically and it's direction changes substantially. Any clue on why this particular behavior occurs and any steps I can take in fixing it?
  16. tl;dr when I move parent, child position is updated too late, how to manually force to update child position when I move parent? Hello, in my game I have a group of sprite objects (Ships) this.shipsGroup = game.add.group(); Each Ship before adding to this.shipsGroup have two other groups as children : var actualShip = game.add.group(); var surrounding = game.add.group(); for (var m = 0; m < 3; m++) { var temp = game.add.sprite(-halfSize - 50 + l*50, tempy, 'red'); temp.anchor.setTo(0,1); tempy+=50; if(m == 1 && l > 0 && l < ship.unitSize+1) { actualShip.add(temp); } else { surrounding.add(temp); } } ship.addChild(actualShip); ship.addChild(surrounding); this.shipsGroup.add(ship); Note: every child object has position relative to parent (so child position (0,0) is on parent) Everything is fine up to this point. I'm moving my ships using something like that in every possible direction (I'm moving them on 50x50grid). This check is in update method of game. if(this.draggedShip.position.x - game.input.mousePointer.x >= 50 && some_boundary_condition) { this.draggedShip.position.x-=50; this.checkOverlap(); } So, after my ship has moved to next grid, I'm calling checkOverlap function to check on top of which grid fields actually is the ship. (I have seperate group of sprites for each grid field) checkOverlap: function() { for (var i = 0; i < this.draggedShip.children[0].length; i++) { for(var j = 0; j < this.fieldsGroup.children.length; j++) { if(this.draggedShip.children[0].children[i].overlap(this.fieldsGroup.children[j])) { this.fieldsGroup.children[j].alpha = 1; } } } }, What is wrong : it looks like sprite.overlap uses OLD children positions (before parent move). So when I move my ship 1 field to the left, the result of this checkOverlap function are fields where the ship was in previous step. How it should be: children positions should be updated before my checkOverlap call. How can I force to do it? I was trying to call update on childrens but it didn't work. Phaser 2.6.2
  17. Hi, I'm new to Pixi.js and I'm trying to make a simple scene, in RPGMaker Style (with different tiles on the ground to draw the scene). I coded a little app that simply creates all the needed sprites, adds them to a Container (or ParticleContainer, tested both), adds the whole container to the scene, and manages a few keyboard inputs. The result is highly laggy... What am I doing wrong? I would happily look for other ways to do this but I think I'm doing what guides show, so I don't get it. Here is the code : http://pastebin.com/C9UUK8nL Thanks !
  18. Hi guys Recently I'm testing my game on iphone7, I found out that the phone heat up very soon even though I have not started playing it, so basically there are just around 30 static sprites. When I reduced the number to less than 10, the temperature drop obviously. Eventually, this problem is resolved by changing the renderer from Phaser.AUTO to Phaser.CANVAS, but I don't understand why the canvas perform better than webgl, and why it only happens to iphone7(on iphone6+ or 7+ are totally fine), has anyone had the same problem can explain it to me?
  19. I've got a wee game where I've created a group of circles and a group of rectangles (they're called slots in the code) which are placed randomly on the canvas. The circles move around the world pseudo-randomly and when they intersect with a slot, the text at the top of the screen should change. However, I'm struggling to 'traverse' the groups properly: my function only checks one specific circle against one specific slot. I'm still pretty new to Phaser, and this 'game' is cobbled together from various examples so I'm sorry if it doesn't make much sense. Here's the sandbox: https://phaser.io/sandbox/edit/EilDwRdH And here's the markup of the specific functions I'm using to check intersection: function update() { circles.forEach(function(c_circle) { slots.forEach(function(c_slot) { if (checkOverlap(c_circle, c_slot)) { text.text = 'Overlapping: true'; } else { text.text = 'Overlapping: false'; } }); }); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(spriteA, boundsB); }
  20. Here's my situation: When the main game state starts, it generates a couple hundred objects (sprites, images, etc) scattered around the world, but when I change to a different state, the objects are removed as normal, and when I change states back to the main state, the objects are re-generated. I'm trying to figure out a way to not re-generate that large number of already-generated objects when I switch back to the main state. I already know that game.state.start() gives you the option to not clear the world, but this keeps the objects from the previous state displayed. Is there a way to store those objects so they don't appear when the state changes and then reappear on the screen where they were when the state is set back to the first state? More details: I'm making an AR mobile game that uses random seeds based on the current geolocation and time (rounded to minutes) to generate objects with limited lifetimes. I'm trying to make it so that objects that are close to being destroyed still appear even though re-generating the objects would not generate them. For example, an object was generated 5 minutes ago and will die in 2 minutes. The state changes and the player does stuff in that state then goes back. The object still should have 1 minute left before it disappears but it is already gone because time has moved forward to the point where it would not generate the object again. I'd like that object to remain and live out that last minute of its life since it was there before the player changed states and should be there when they get back.
  21. I am looking at this Phaser example, and am simply trying to replace the aliens sprites with simple filled circles drawn by graphics - I've also removed the car, I just want some sprites moving around the area randomly. Unfortunately, the sprites appear with the "no image" graphic. I'm not sure what I am doing wrong here, any help is appreciated: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); var aliens; var sprite; function preload() { sprite = game.make.graphics(0,0); sprite.beginFill(0x00FFFF, 1); sprite.boundsPadding = 0; sprite.drawCircle(50, 50, 100, 100); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); aliens = game.add.group(); aliens.enableBody = true; for (var i = 0; i < 10; i++) { var s = aliens.create(game.world.randomX, game.world.randomY, sprite); s.name = 'alien' + s; s.body.collideWorldBounds = true; s.body.bounce.setTo(0.8, 0.8); s.body.velocity.setTo(10 + Math.random() * 40, 10 + Math.random() * 40); } }
  22. Hi!, I'm new to Phaser, I just started a day ago and it looked pretty interesting, But lately I've been having some problems with certain sprites that will break the game if I try to add them as an animation (will go into a black screen as soon as starting), and if i try to stop all animations and start the game with no animations, trying to see the sprite at least frozen, the game will just show any other sprite on the list avoiding the 'broken' sprite. I'm using a JsonHash from TexturePacker (the trial version) "walk/07": { "frame": {"x":113,"y":2,"w":38,"h":48}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":38,"h":48}, "sourceSize": {"w":38,"h":48} }, "walk/08": { "frame": {"x":112,"y":110,"w":39,"h":46}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":39,"h":46}, "sourceSize": {"w":39,"h":46} }, "batk/01": { "frame": {"x":2,"y":54,"w":39,"h":52}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":39,"h":52}, "sourceSize": {"w":39,"h":52} }, "batk/02": { "frame": {"x":43,"y":165,"w":33,"h":51}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":33,"h":51}, "sourceSize": {"w":33,"h":51} }, "batk/03": { "frame": {"x":2,"y":2,"w":64,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":64,"h":49}, "sourceSize": {"w":64,"h":49} }, "batk/04": { "frame": {"x":69,"y":2,"w":41,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":41,"h":49}, "sourceSize": {"w":41,"h":49} }, "batk/05": { "frame": {"x":77,"y":110,"w":32,"h":52}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":32,"h":52}, "sourceSize": {"w":32,"h":52} }, Here's part of the Json, the sprites that wont work are the "batk/**". And the meta "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "Kenshin.png", "format": "RGBA8888", "size": {"w":237,"h":218}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:5c2cc8f899f401916073813f8a57c05c:859f44caf8d84d1347ca0147886ae398:b98d3e23e0675afb80a9fc68a5d2d511$" } I remade the Json and the png and still the same sprites won't work. KenshinChar = game.add.sprite(36, game.world.height - 120, 'Kenshin', 'batk/03'); Tried to start the game with a bg and basically just one of the sprites, without animation and it avoided the sprite showing the first sprite of the Json. Here's the whole png. and these are the ones that won't work. I'm just trying the framework so I borrowed some sprites from a certain ds game. I have absolutely no idea what's happening, sorry if it's something dumb I'm missing.
  23. 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() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer('collision'); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 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' }); this.map.setCollisionBetween(2,34, true, 'collision'); //player this.player = this.game.add.sprite(100,50,'player'); this.game.physics.arcade.enable(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); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('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
  24. Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: http://emilyso.com/portfolio/game-artgraphics/ http://emilyso.com/portfolio/concept-art/ http://emilyso.com/portfolio/2d-animations/ If you feel my style of art would be suitable for your project, please contact me at: emilyso321@gmail.com Otherwise, please feel free to check out/play some games I've worked on: http://emilyso.com/games/ Thank you for your time and consideration. I hope you enjoy my work
  25. 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.