Search the Community

Showing results for tags 'tileset'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 48 results

  1. Collision works with single Sprite and the Map, but it doesn't with objects created with function createFromObjects. The callback function never displays the console.log() message. The sprites move through the tiles, never colliding with the map. I'm new to phaser3, so maybe I'm missing something. Here's the code: preload() { this.load.image('tiles', 'assets/levels_tileset.png'); this.load.tilemapTiledJSON('level1', 'assets/maps/map1.json'); this.load.spritesheet('player', 'assets/dude.png', {frameWidth: 32, frameHeight: 48}); this.load.spritesheet('enemies', 'assets/spritesheet_enemies.png', {frameWidth: 47, frameHeight: 47}); } create() { var map = this.make.tilemap({ key: 'level1' }); var tiles = map.addTilesetImage('levels_tileset', 'tiles'); this.layer = map.createDynamicLayer('blocks', tiles, 0, 0); this.layer.setCollisionByExclusion([-1]); this.player = this.physics.add.sprite(100, 450, 'player'); this.player.setBounce(0.2); this.player.setCollideWorldBounds(true); this.player.body.setGravityY(300); this.physics.add.collider(this.layer, this.player); this.right = true; this.enemies = this.physics.add.group(); this.enemies = map.createFromObjects('enemies_objects', 'enemy1', { key: 'enemies' }); this.enemies.forEach((child) => { if(child instanceof Phaser.GameObjects.Sprite) { child.setFrame(4); } }); this.physics.add.collider(this.enemies, this.layer, this.bounce, null, this); } update() { this.enemies.forEach((enemy) => { if(enemy instanceof Phaser.GameObjects.Sprite) { if(this.right === true) { enemy.x += 1; } else { enemy.x -= 1; } } }); } bounce() { console.log("Collision!"); if(this.right === true) { this.right = false; } else { this.right = true; } } How can I fix this?
  2. In Tiled (1.1.3) you can make a layer that includes multiple different embedded tilesets. The resulting JSON has an array in the tilesets property. See complete example https://pastebin.com/jYP4buQc . I can't get this to load in Phaser. I've tried several things, but anything after the first tileset throws an error one way or another. Here's the latest attempt: function preload() { this.load.tilemapTiledJSON('map', '/maps/phaserTest.json'); this.load.image('phaserTestImg', '/maps/phaserTest.png'); this.load.image('Door0', '/maps/Door0.png'); this.load.image('Floor', '/maps/Floor.png'); this.load.image('Wall', '/maps/Wall.png'); } function create() { var map = this.add.tilemap('map'); var tileset = map.addTilesetImage('Wall', undefined, 16, 16, 0, 0, 1); var tileset2 = map.addTilesetImage('Door0', undefined, 16, 16, 0, 0, 2); var tileset3 = map.addTilesetImage('Floor', undefined, 16, 16, 0, 0, 3); var layer = map.createStaticLayer(0, tileset); var layer2 = map.createStaticLayer(1, tileset2); var layer3 = map.createStaticLayer(2, tileset3); //debugger; var graphics = this.add.graphics(); //[...] (I've also tried using map.createStaticLayer with the string name of the layer from Tiled JSON, this is just the latest failed experiment.) My guess is this isn't supported and I have to create my maps differently in Tiled, but I am brand new to Phaser and I might just be missing something obvious. Back in 2013, Rich seemed to say it wasn't supported but 2013 is quite a long time ago and I know a lot has changed with tileset handling since then. So my questions: 1) Can you make a map in Tiled that has multiple (embedded) tilesets in a single layer, and use that JSON from Phaser successfully? If so, can I get a hint on how to do this correctly? 2) If this isn't supported, what is the best alternate approach in Phaser 3? Two things that occur to me are making a Tiled map that has a separate layer for each tileset, or combining lots of little tilesets together into a mechagodzilla tileset so I can lay out a whole bunch of features in a single layer. Or something different. Opinions?
  3. danrhan

    Slow performance with tilemap.

    Hello, I made a script to draw map from dungeon keeper game. I use the tileset extract from the game to draw it. Just for fun =) To draw the full map i need a huge stage of 8160x8160. (85*3*32px) So i draw only a part of map. But CPU up to 100% when i move mouse or keyboard... I use chrome and the last release of pixijs 4.7 I don't unsterdand. Can you help me to optimize my script ? Sorry, i don't speak english very well... Project.zip
  4. Games

    Tiled/Sprite collision

    Hi, I want to ask how to collide sprite with a tile in layer on map created in tiled. So far I have this, but it doesnt work /* global demo, game, Phaser */ demo.stateMaze = function(){}; var ball; var playerSpeed = 3; var map; demo.stateMaze.prototype = { preload: function() { game.load.tilemap('map-maze', 'assets/maps/hole_in_a_park/maze/mapa.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tileset-maze', 'assets/maps/hole_in_a_park/maze/tileset.jpg'); game.load.image('ball','assets/imgs/gula.png'); }, create: function() { game.stage.backgroundColor = '#FFFFFF'; //Starting physics game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map-maze'); map.addTilesetImage('tileset','tileset-maze'); //CallBACK map.setTileIndexCallback(15, this.collisionHandler(), this); normal = map.createLayer('normal'); normal.resizeWorld(); wall = map.createLayer("wall"); wall.resizeWorld(); normal.renderSettings.enableScrollDelta = true; wall.renderSettings.enableScrollDelta = true; ball = game.add.sprite(0, 80, 'ball'); ball.anchor.setTo(0.5, 0.5); //Enabling ball physics game.physics.enable(ball); game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.input.onDown.add(function(){ if (game.scale.isFullScreen) { game.scale.stopFullScreen(); } else { game.scale.startFullScreen(false); } }); }, update: function() { //Collide game.physics.arcade.collide(ball, wall); if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { ball.scale.setTo(1, 1); ball.x += playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { ball.scale.setTo(-1, 1); ball.x -= playerSpeed; } if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { ball.y -= playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { ball.y += playerSpeed; } }, collisionHandler: function() { console.log("COLLISION!!!"); } }; But it never write COLLISION!!! so can anyone tell me what to do ?
  5. Thanks for your help, anyone who can spare the time. I've been digging around other threads and have found similar issues but not specifically what's happening to me, and I haven't found a solution yet. Basically Phaser is rendering the wrong tiles when I load my tilemap and tileset image. I'm using a tileset image that is 512/512, divided into a tileset with 16 rows and 16 columns of 32/32 tiles. My tilemap tiles are 32/32. I load the tilemap json object, and the image, as I'm supposed to, and then in the create function create the layers and add the sprite. My sprite is colliding with walls, but the tilemap looks like the tiles are simply a few tiles over from the index of the tiles I placed when I made my map. Everywhere I've read says this is a problem with the tileset not being divisible by the map tiles height/width but that's clearly not the case here. Other people say it's a problem with phaser's implementation of tilemaps, but I can't figure out how to fix the problem short if editing the json by hand which seems stupid. No discernible effect is observed when I change the firstgid in the json, either. Some code: function preload() { game.load.tilemap('map', 'maps/wintertest32.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('wintertest32', 'img/snowy.png'); game.load.image('player', 'img/singlebunny.png', 32, 32); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('wintertest32', 'wintertest32'); backgroundLayer = map.createLayer('backgroundLayer'); platformLayer = map.createLayer('platformLayer'); groundLayer = map.createLayer('groundLayer'); foregroundLayer = map.createLayer('foregroundLayer'); groundLayer.resizeWorld() map.setCollisionBetween(1,6000, true, groundLayer, true) player = game.add.sprite(32, 32, 'player'); player.frame = 1 and so on... }
  6. RayIT

    Using tileset with json

    I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment. Now in code loop through the JSON and try to create the level/map. Problem is that it renders the same tile and not the different ones. If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls) I tried several things. It looks like pixi does create all sprites with same tile? Many thanks Raymond // load json var level = require('../map/level1.json'); var tileHeight = level.tileheight; var tileWidth = level.tilewidth; var layers = level.layers; var height = level.height; var width = level.width; var tileset = PIXI.utils.TextureCache["./images/terrain.png"]; for(var l = 1; l < 5; l++ ) { // Layer var data = layers[l].data; for(var i = 0; i < data.length; i++) { // Postition on screen var y = i / height | 0; var x = i % width | 0; // Which tile we should use if( data[i] != 0) { var tileRow = (data[i] / 32) | 0; var tileCol = (data[i] - (tileRow * 32))-1 | 0; console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight); var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h tileset.frame = rectangle; var layer = new PIXI.Sprite(tileset); layer.x = x * tileHeight; layer.y = y * tileWidth; this._game.stage.addChild(layer); } } } level1.json
  7. Hey guys, I'm having trouble swapping tiles in a Tilemap. In all the examples it seems like to get a tile object (to pass into map.putTile) it has be selected from an already instantiated tile that's part of the map. What I'd like to do is create a new tile from the map's tileset. Is this possible?
  8. I am developing a game using phaser. I wanted to add a feature where user will get alert before any obstacle comes. I am planning to assign a property, "jump": true, to a tile or an object. Is there any way to read this property of the tile that user is passing by. I am following this tutorial for game development - https://software.intel.com/en-us/html5/hub/blogs/how-to-make-a-sidescroller-game-with-html5/. Is there any other better way to achieve this? Your suggestions/ code snippets will be helpful. Thanks
  9. danteAGAIN

    display an element of a tileset

    Hello everyone, I need help, i want display an element of a tileset, but i don't understand how to do that. function preload() this.game.load.image('stone', 'assets/tiles/tiless.png'); function create() this.stone = this.game.add.image(720, 78, 'stone'); i guess , i need a key or other but i don't understand how write and found this key. my tileset is 32*32
  10. jopcode

    TileMap doesn't show correctly

    Hi!, i use tiled for create a map, but when i try show the map in the game, this doesn't show correctly (the map in tiled) And the map in the game: The main file: class Main extends Phaser.State { create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.add.sprite(0, 0, 'Sky'); this.map = this.game.add.tilemap('Tilemap'); this.map.addTilesetImage('Tiles', 'Tileset'); this.layer = this.map.createLayer('Platforms'); this.layer.resizeWorld(); this.wrap = true; this.cursors = this.game.input.keyboard.createCursorKeys(); } update() { if (this.cursors.left.isDown) { this.game.camera.x -= 8; } else if (this.cursors.right.isDown) { this.game.camera.x += 8; } if (this.cursors.up.isDown) { this.game.camera.y -= 8; } else if (this.cursors.down.isDown) { this.game.camera.y += 8; } } } export default Main; Any idea or solution?(sorry for my bad english)
  11. Hello all, I am currently trying to make a simple platformer, but am having trouble detecting collision with a tile layer. After looking through many of the other forum posts here about this problem, none of the fixes seem to work for me. 'World 1' layer is the background and 'Collision' is the layer that contains the platforms. To my understanding, I should just be able to use map.setCollisionBetween() on the tiles that I want to use as the ground, which I think I did correctly. I also made sure to enable physics for the player and the collision layer. For some reason, though when I console.log(game.physics.arcade.collide(player, col)), it always returns false. When I run console.log(player.body.blocked), it only returns true when the player is on the window boundary (because of collideWorldBounds=true). Can anyone see what I'm doing wrong? var game = new Phaser.Game(800, 480, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('bgmap', 'assets/tilemaps/maps/superMarioBG.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('bgtiles', 'assets/tilemaps/tiles/super_mario.png'); game.load.image('player', 'assets/sprites/georgeRight.png'); } var map; var bg; var col; var player; var cursors; var jumpButton; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#787878'; map = game.add.tilemap('bgmap'); map.addTilesetImage('SuperMarioBros', 'bgtiles'); bg = map.createLayer('World1'); bg.scale.set(2); bg.resizeWorld(); col = map.createLayer('Collision'); col.scale.set(2); game.physics.arcade.enable(col); map.setCollisionBetween(1,40,true,col); col.resizeWorld(); player = game.add.sprite(0,game.world.height - 150,'player'); player.scale.set(1.5) ; player.anchor.setTo(.5,.5); cursors = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); game.physics.arcade.enable(player); player.body.bounce.y = 0.2; player.body.gravity.y = 500; player.body.collideWorldBounds = true; } // function update() { game.physics.arcade.collide(player, col); player.body.velocity.x=0; game.camera.follow(player); if (cursors.left.isDown) { player.body.velocity.x -= 500; } else if (cursors.right.isDown) { player.body.velocity.x += 500; } if (jumpButton.isDown && player.body.onFloor()) { player.body.velocity.y = -550; } console.log(player.body.blocked); } function render() { } };
  12. Hi guys, I've been making a game project recently which I wanted to add some relatively basic lighting effects to. I really struggled with anything I found online and basically everything seems broken. After researching alpha masking and texture rendering at runtime I've come up with a demo which finally puts the entire piece together so people can use it. I really hope this makes a difference to peoples learning experience, their games and their appreciation for PixiJS. I welcome any mods to the pen as I'm not the best at writing super hot JS, I just want it to work. The demo includes moving a light cookie, changing its alpha, and overlaying a rectangle to emulate day/night - all which blend together nicely. The code can be found here: Thanks a lot guys, Some footage inside a working game demo can be seen here: And some more of my game concept can be seen here: This is the effect it has when used as lighting in my game, keeping in mind i have extra shadows on the tileset: Jammy.
  13. I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: http://www.html5gamedevs.com/topic/3218-continuously-scrolling-background/ I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?
  14. Jobarbo

    Support of slanted tile in Phaser

    Hi to you all. Hi have a question. I'm making a platformer game using phaser and , for now, arcade physics. I make my level in Tiled and export them in JSON. I noticed that since Tiled work with png tileset and that tiles are square. My character do not detect a slope or slante corner. It stands on a invisible cube border. What i was wondering is, is it possible for phaser to detect slanted slope using arcade or should i move to P2JS. Also how do I tell phaser to ignore the transparent part and collide only with the image? I tried making object layer coutouring all the platform for a more precise collision but it seems i'm not able to create a collision layer with a Tiled object layer. or maybe i'm doing it wrong. function create() { map = game.add.tilemap('niveau2'); map.addTilesetImage('tileset','background'); map.addTilesetImage('hints','hints'); backgroundLayer = map.createLayer('background'); collisionLayer = map.objects.evenement.find( o => o.name == 'platform'); collisionLayer.visible = false; console.log(collisionLayer); map.setCollisionByExclusion([],true,collisionLayer); collisionLayer.resizeWorld(); //map.setCollision(1) player = game.add.sprite(32, game.world.height - 150, 'star'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; player.body.gravity.y=10050; // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(player, collisionLayer); //more code }
  15. javier.hernandez.montes

    Phaser Arcade Physics with Tile Collision editor

    Hello all! I was trying to trim the collision size of one tile in Tiled, but then in Phaser the body of that tile it's the same. Does anyone know if is it possible to use Arcade Physics from phaser to get the trimmed collision size of the grid? I am waiting for your response. Thank you so much tilemapAux.json tilemapAux.tmx
  16. I've been creating a flying game in phaser yet I'm having issues with collision and any answers I've found online are of no use. My game js is this: window.onload = function() { var map; var layer; var sprite; var cursors; var game = new Phaser.Game(500, 160, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('tilemap', 'level.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'tilesheet.png'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#a9f0ff"; //game.add.sprite(0, 0, 'sky'); map = game.add.tilemap('tilemap'); map.addTilesetImage('tiles', 'tiles'); groundLayer = map.createLayer('GroundLayer'); map.setCollisionBetween(1, 100); //backgroundlayer = map.createLayer('BackgroundLayer'); groundLayer.resizeWorld(); groundLayer.debug = true; sprite = game.add.sprite(0, 0, 'player'); sprite.anchor.set(0.5); // sprite.body.bounce.y = 0.1; // sprite.body.gravity.y = 2000; // sprite.body.gravity.x = 20; // sprite.body.velocity.x = 100; // TODO: add animations game.physics.enable(sprite); game.camera.follow(sprite); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(sprite, groundLayer); game.physics.arcade.TILE_BIAS = 40; sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; sprite.body.angularVelocity = 0; if (cursors.left.isDown) { sprite.body.angularVelocity = -200; } else if (cursors.right.isDown) { sprite.body.angularVelocity = 200; } if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(sprite.angle, 200, sprite.body.velocity); } } function render() { game.debug.body(sprite); } }; and my tilemap json is this: { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"BackgroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }, { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"GroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":16, "tilesets":[ { "columns":50, "firstgid":1, "image":"tilesheet.png", "imageheight":1280, "imagewidth":800, "margin":0, "name":"tiles", "spacing":0, "tilecount":4000, "tileheight":16, "tilewidth":16, "transparentcolor":"#5a5268" }], "tilewidth":16, "version":1, "width":100 } yet no matter what I try, the player just wont collide with ANY of the sprites. What could be the issue?
  17. Heya, I'm trying to implement a scene similar to Party Hard house where the wall tiles height is twice their width. When you walk from the bottom you stand in front of the wall, but when you walk from the top you go behind it. It's like walls in isometric games, but from a straight perspective. Is there any way to implement this using Tilemaps? It seems I'd need to create each wall as a separate object and just define collision to half the height, anchored to the bottom. I am also using TILED Map editor and don't think I can really do it inside it either (so I'd have to "fake" it in-game with higher wall tiles). I played with square tiles and adding a foreground layer to display the upper half of the walls BUT it only works presuming that the object sprites approaching from bottom are never tall enough to overlap the top half of the wall (otherwise it would be rendered in front). I want characters as tall as the walls and I want them to be able to walk pretty close from the bottom, so this approach doesn't work. Any ideas aside from creating each wall as a separate object and manually sorting depth based on the y coord of the wall / character sprite?
  18. tokegameart

    2D Game Art Bundle

    Available Now! Over 90 items in one huge bundle (Character Sprite, GUI, Game Kit, Platformer) 2D Game Art Bundle – 2017 New Year Bundle Items that noted “Sold by Tokegameart” presented in one huge bundle “2D Game Art Bundle – 2017 New Year Bundle” Over 90 items are included. Character Sprite Alien Boss Sprite Android Boss Big Hands Robot Bob The Caveman Brock From The Metro Squad Castle Guard Sprite Chibi Knight 01 (The White Bull) Chibi Knight 02 (The Roman Knight) Chibi Knight 03 (The Golden Helmet) Chibi Knight 04 (The Gladiator) Chibi Muscular Viking Christopher The Police Dungeon Bosses Dungeon Guard Sprite Evil Bot Character Sprite Genki and Dragon Sword Sprite George From The Space Squad Sprite Ghost 01 Good Boy Jack The Thug Jake Adventurous Boy Jane Adventurous Girl Joana From The Metro Squad Joe From The Metro Squad Karen From The Metro Squad Micro Style Character – Arabian Executioner Micro Style Character – Chinese King Micro Style Character – Roman Knight Mike The Counter Terrorist Priest – Tiny Style Character Pumpkin Ghost Skull Knight Skull Warrior Super Black Cat Super Boy Super Cat Super Monkey The Executioner The Shaman Tiny Armored Samurai Tiny Army – Sam Tiny Australian Soldier Tiny Chinese Soldier Tiny Cowboy Tiny Crystal Monster Tiny Guy – Arnold Tiny Ice Monster Tiny Knight Tiny Lava Monster Tiny Mummy 01 Tiny Mummy 02 Tiny Rock Monster Tiny Style Character – Barbarian Tiny Style Character – King Tiny Style Character – Knight Tiny Style Character – Pirate Tiny Style Character – Skull Tiny Style Character – Witcher Tiny U.S Soldier Tom The Police Viking – Tiny Style Character Zombie 01 – Scar Forehead Zombie Zombie 02 – Anime Zombie Zombie 03 – Meat Clever Zombie Wife Zombie 04 – G.I. Joe Zombie Zombie 05 – Exposed Brain Zombie Warrior – Tiny Style Character Bad Piggy Fairy Tiny Stlye Character Goblin Tiny Style Character Wizard Tiny Style Character Archer Tiny Style Character Ogre Tiny Style Character Ninja Tiny Style Character Super Bunny Super Panda Cartoon Enemy Pack 01 Cyclop Tiny Style Character Gold Miner Tiny Style Character Game Kit Jetpack Buddy GUI Classic GUI Snowy GUI Stone Age Themed GUI Western Game UI Cartoon RPG GUI Tileset Cartoon Town Egyptian Tileset Fantasy Tileset Snowy Platformer Game Tileset Spaceship Game Platformer Top-Down Dungeon Platformer Tileset Top-Down Forest Tileset Top-Down Snowy Game Tileset DOWNLOAD NOW! Visit : http://tokegameart.net/ Facebook : https://www.facebook.com/tokegameart/ Contact : support@tokegameart.net
  19. Hi everyone, we're team of game designers and we created site with free game assets. You can to use for commercial projects as well as non-commercial ones. https://craftpix.net/freebies/ No attribution or link back to this site is required, however any credit will be much appreciated. We update a collection every week.
  20. kovalson

    Rendering tiled map

    Hi there. I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github. Basically I tried to render my tiled map and got stuck. To specify my problem: I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter). I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties). I've got a regular two-dimensional array that simulates the map. For example: var map = [ [2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 2, 2, 2, 2, 2], ]; I'll skip the init and assignments. Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this: var texture = loader.resources["tileset"].texture; var s; for rows for cols // I frame the texture to get the tile I'm interested in // for example air (x: 0, y: 0) or the ground (x: 64, y: 0) texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 ); // create sprite out of the framed texture s = new PIXI.Sprite( texture ); // add the sprite to the stage stage.addChild( s ); // Anakin vs Luke texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 ); Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions: 1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file. 2. If not, can it be easily done without any other libraries?
  21. Hi again Gamedevs,Grizzly 2d game assets are available on gamedev market, check them out un der this url:http://bit.ly/2b9dExVThese assets aren't included in the "2d miraculous bundle", i will be adding them later on,You can purchase the "2d miraculous bundle" by visiting the url below:http://bit.ly/1m4ozv8Also, Check the video that i made showing the proper use of Fassous latest assets, and how they look once timed correctly !Video: http://bit.ly/2bv1vBPHave a nice day !
  22. Hi guys, I've built one or two small, simple games with Phaser before but this is the first time I'm working with tilemaps. Hopefully someone can offer some advice. I'm working on a topdown game. I created a tilemap in Tiled with 3 layers. (floor, wall 1 and wall 2 ). The problem is I can get collisions to work on a single layer if I combine the wall layers into the same layer as the floor (so I just have one layer), but I can't get the player to collide with a second layer. TLDR: Is is possible to set up tilemap collisions with multiple layers? Thanks in advance. I've been stuck on this all day.
  23. Hi everyone! First things first, a disclaimer: I'm French, I read a lot in english but I rarely have the opportunity to write or speak in English, so forgive me for that . I'm a beginner in the world of gamedev and Phaser in particular. I've already tried EaselJS (CreateJS) a couple years ago for a little game prototype I made using hand-made tilemap (based on a simple two dimentional array). I wanted to try something more robust this time, I searched across the Web for a good gamedev framework and stumble upon Phaser. It seemed to me the best tool to go, so here I am! It's my first time using Tiled for creating my tilemaps. I've use the excellent roguelike tileset from KenneyNL (kudos to him! ). I've set up a simple sample map (to try a few Tiled features), followed several tilemaps examples provided on phaser's website. You can check the layers I'm using : Note that the collision layer contains only a tile (a red/brown dot) that I'm currently using as a visual marker (there's no collision implemented yet). My tileset is 16x16. The map is 200x200 tiles. I'm exporting it as JSON, layers data as CSV. I'm also using states (which is really a cool feature that I was missing with EaselJS). I've set up a jsfiddle hosting a stripped version of my source code with a few comments to explain the logic. There's also a fiddle with the JSON file of the tilemap if it can help. I'm using a deadzone for my camera, and added a visual representation of this deadzone. Everything is correctly loading, the map and all the layers are displayed accordingly, with the visual deadzone and my character (I'm on Ubuntu 14.04 x64 with a GTX 660 and using the latest Google Chrome version). Everything looks fine, I can move my character within the camera's deadzone while the camera is not moving (which is what I was looking for). I haven't set up a FPS debug but I feel that the framerate is stable and should be around 60fps. It all feel smooth, not shattered at all. So far so good. But the issue is coming when the deadzone is reached and that the camera begin moving to follow the player (e.g. when I'm moving far right), as follows : At this point, I feel a huge framerate drop! Any movement feels shattered, jerky. But as soon as the character gets back in the deadzone and the camera is moving no more, everything goes back normal. I've tried with another map of 100x100 and 50x500 tiles, with just one layer and a tileset of 4 sprites, and the results were the same... I think I'm missing something, or I must have done something wrong. I cannot believe that the problem would come from Phaser not correctly supporting tilemaps! My goal is to build a very simple stripped-down version of a Harvest Moon-like prototype, just for fun, for my pleasure. So I really need to work with tilemaps. I'm sad that a cannot acheive this with Phaser . Sam Vieten (SamTheMighty on these forums) gave me some advice on Twitter, about using a plugin (englercj/phaser-tiled) to optimize tilemaps implementation of Phaser. Is it really necessary to use this plugin? It's a bit of a shame if Phaser cannot handle tilemaps alone ... Anyway, thanks for you help!
  24. Hi all! I'm doing a platformer game and I'm thinking about optimisation. I was wondering if it could be a good idea to scale down all my original assets, and scale them up in the game (to reduce loadings). So my first question is : what's the cost of scaling? Is this technique worth it or are the gains meaningless? Then, I was trying to apply that to the tilesets of my map and I'm struggling with API. These three methods seem to badly interact : cache.getImage() : return an HTML image (how is that useful, really?) or an image. Here I fetch my downscaled image.tilemap.addTileset() : takes a string key or a bitmapData. Not an image! So I create a bitmapData from the image (fetched in cache), and scale it uptileset.setImage() : takes an image! Damn. I have to change my newly created bitmapData back to image. In my game I change the tilesets' images every now and then, so I have to use these 3 methods. The fact that tilemap.addTileset() doesn't take an image as parameter is very weird and forces me to go from image to bitmapData, and bitmapData to image. Is there something I'm missing? Is there an easier way to do that? Thanks guys!
  25. Hi all! I'm facing a weird issue right now. I want to make a game where the mood could suddenly change and for that, I'd like to swap the art of the tilesets. So current map has one layer, with one tileset, and on user action the tileset might change to another (real-time). The topography of the map doesn't change : just the art. The technique I use for this purpose is to use tileset.setImage("myTileset"). However, when I do that I get exceptions : Phaser.Tileset - image tile area is not an even multiple of tile sizephaser.js:93537 Phaser.Tileset - actual and expected number of tile rows and columns differBut that happens even if I try to swap current tileset with itself! (which obviously has the correct dimensions, as it's correctly displayed right now!) The code : create(){ this.map = this.game.add.tilemap("map-json"); this.map.addTilesetImage("tileset1", "tileset1-img"); this.map.createLayer("layer"); // Space key to change tileset this.spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.spaceKey.onDown.add(this.changeTileSet, this); } changeTileSet(){ console.log("Changing tileset"); this.map.tilesets[0].setImage(this.game.cache.getImage("tileset1-img", true)); }Sorry guys, I wanted to do a sandbox but I couldn't find any way of uploading the JSON atlas without having cross-domain issues. If anyone has a solution for that too, I'd be happy!