Search the Community

Showing results for tags 'tiled'.



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

  1. I am trying to make an android build via cocoon.io using Canvas+ The game imports json tilemap data generated by Tiled. The game works fine in the browser, it evenr works when I use cocoon.io's webview instead of canvas+ (very slow though, like 1 FPS). I understand that this is probably a cocoon.io issue, but maybe someone else had this problem? Any idea what might be wrong?
  2. Phaser 3 Animated Tiles Plugin

    I've prepared a plugin in time for the release of Phaser 3 today: support for animated tiles. The plugin parses tile animation data configured in Tiled and then, well, animates layers (dynamic layers required). All you need is three lines of code; one for preloading the plugin, a second for installing the plugin and the third for initializing it for a map. Features: Animate tiles as configured and displayed in Tiled. Support for unlimited tile animations, layers, maps, and tilesets. Use the API to manipulate the rate (multiplier of the frame duration set in Tiled) globally or for a certain tile id or map. Animations adapt to the timeScale set by the Phaser 3 API. Add and remove animated tiles any time. API demo: http://metroid.niklasberg.se/phaser-animated-tiles Playable demo (question marks are animated tiles): http://metroid.niklasberg.se/phaser3platformer/ Github repository: https://github.com/nkholski/phaser-animated-tiles Suggestions are welcome and if you use the plugin, please tell!
  3. I have created tilemap using Tiled software of pixel size 1200x1000. While rendering it using phaser I have set width equal to 500 and height equal to 400.After this only map of 500x400 area is loading and remaining part is missing. How can I show the full map in 500x400 area on my webpage?
  4. I am developing a game where I need to zoom in entire map also I can be able zoom out. I have created a tilemap using tiled software and rendered it using phaser.js. How can I add this function to my game?
  5. Hi people, i'm new into Phaser and its community. I made a little test map with an Object Layer in it, the idea is to add some traps sectors or teleports where if the player touches it, it will teletransport it to some random place. Hence, it won't add any texture to it, i just want to have that area to collide with my player. Is this possible? without having to attach a texture to it? I used the square polygon to do so on Tiled Maps. Exported it as JSON. So here's my Object JSON: { "draworder":"topdown", "name":"objects", "objects":[ { "height":10, "id":1, "name":"trap1", "rotation":0, "type":"trap", "visible":true, "width":128, "x":445.41, "y":627.62, "gid": 2 }, { "height":10, "id":3, "name":"trap2", "rotation":0, "type":"trap", "visible":true, "width":64, "x":1023.87, "y":627.54, "gid": 2 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }], Then i created a group of traps and try to iterate them one by one to avoid them from falling due to gravity: traps = game.add.group(); traps.enableBody = true; // Get all traps map.createFromObjects('objects', 2, null, 0, true, false, traps); traps.forEach(function(trap) { trap.body.immovable = true; trap.body.allowGravity = false; }); I get the trap individual objects properly, but the problem that i found is, i'm not able to get the width/height i set on Tiled or shows up on my JSON. They are both equals to 1. Why did i lose those width & height values? but others don't such as `x` and `y` coordinates. What do you recommend to do to achieve the same effect? I just want certain areas to be "readable" so i can call functions after collision. It works fine when i set the texture, but also sets the default height x width of the texture applied, and i don't have any way to get the real Tiled values so i can resize my texture properly. Right now if I add a texture it works with this: this.physics.arcade.overlap(player.character, traps, this.resetPlayer, null, this); Even if i try to get the objects by doing: var trap = map.objects['objects'][1] The object returned doesn't contain any width/height. This is what it's returning: gid:2 name:"trap2" properties:undefined type:"" visible:true x:1023.87 y:627.54 I don't know if i explained myself correctly. Hope someone helps me Thanks in advance.
  6. I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library. <!DOCTYPE html> <html> <head> <title>Basic Platformer game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="js/phaser.min.js"></script> <script src="js/phaser.js"></script> </head> <body> <div id="phaser-game"></div> <script type="text/javascript"> (function() { var game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tile2', 'floor2.png'); game.load.image('player','bot2.png'); } var map; var layer; var marker; var player; var currentTile; var cursors; var curser; function create() { game.stage.backgroundColor = '#787878'; game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('floor2','tile2'); currentTile = map.getTile(0, 0); layer = map.createLayer('Tile Layer 1'); player = game.add.sprite(20, 20, 'player'); game.physics.p2.enable(player); player.body.fixedRotation = true; layer.resizeWorld(); marker = game.add.graphics(); marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 20, 20); cursors = game.input.keyboard.createCursorKeys(); game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); game.physics.arcade.enable(player); </script> </body> </html>
  7. Pretty straightforward question: I want to draw my collision layers in Tiled, preferrably using the Polyline tool. I would use createFromObjects, but I don't really need the polyline to appear as a sprite, or appear at all (except for debug mode as a collision layer). Phaser: 2.6.2 Physics: Arcade Create() { ... map = game.add.tilemap('mario'); map.addTilesetImage('tileset', 'tiles'); layer = map.createLayer('Tile Layer 1'); boundary = map.objects.boundaries[0]; player = game.add.sprite(map.objects.mainPlayer[0].x, map.objects.mainPlayer[0].y, 'dude'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; ... } Update() { ... game.physics.arcade.collide(player, boundary); ...
  8. 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 ?
  9. Camera problem - following player

    Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player this is how it looks following the player... (the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this. here's my code : scenes.scene3 = function(){}; //Player speed var link, vel = 150; //Map/Level var map; //Tiled Layers var floor, water,walls; //Object Tiled Layers var rocks var bushes1, bushes2, bushes3, bushes4; scenes.scene3.prototype = { preload: function (){ game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png'); music = game.add.audio('openWorld'); music.addMarker('openWorld', 0, 16, true); game.renderer.resize( 1216/2, 800/2); }, create: function (){ //Game itself game.world.setBounds(0,0, 1216, 800); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level_01'); map.addTilesetImage('tiles'); floor = map.createLayer('ground'); walls = map.createLayer('walls'); water = map.createLayer('water'); map.setCollisionBetween(0, 100, true, 'walls'); map.setCollisionBetween(0, 100, true, 'water'); //Objects layer related rocks = game.add.physicsGroup(); map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks); rocks.forEach(function(rocks){rocks.body.immovable = true;}); bushes = game.add.physicsGroup(); map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes); map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes); map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes); map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes); bushes.forEach(function(bushes){bushes.body.immovable = true;}); // music.play('openWorld', 0,1,true); // Player link = game.add.sprite((centerX-500), 100, 'LinkMovement'); link.scale.setTo(0.25, 0.25); link.animations.add('walkHorizontalRight', [6,7,8]); link.animations.add('walkHorizontalLeft', [9,10,11]); link.animations.add('walkVerticalDown', [0,1,2]); link.animations.add('walkVerticalUp', [3,4,5]); game.physics.enable(link); link.body.collideWorldBounds=true; //Life bar life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar'); life.scale.setTo(0.15, 0.15); life.animations.add('fullHP', [0]); life.animations.add('twoHP', [1]); life.animations.add('oneHP', [2]); life.animations.add('Dead', [3]); cursors = game.input.keyboard.createCursorKeys(); var b1 = game.add.button(900,300, 'buttonFire', function() {fire();}); b1.scale.setTo(0.25,0.25); game.camera.bounds = (608,400); game.camera.follow(link); }, update: function (){ game.physics.arcade.collide(link, walls); game.physics.arcade.collide(link, water); game.physics.arcade.collide(link, rocks); game.physics.arcade.collide(link, bushes); if(cursors.up.isDown){ link.body.velocity.y = -vel; link.animations.play('walkVerticalUp', 9, true); } else if(cursors.down.isDown){ link.body.velocity.y = vel; link.animations.play('walkVerticalDown', 9, true); } else{ link.body.velocity.y = 0; link.animations.stop('walkVerticalUp'); link.animations.stop('walkVerticalDown'); } if(cursors.left.isDown){ link.body.velocity.x = -vel; link.animations.play('walkHorizontalLeft', 9, true); } else if(cursors.right.isDown){ link.body.velocity.x = vel; link.animations.play('walkHorizontalRight', 9, true); } else{ link.body.velocity.x = 0; link.animations.stop('walkHorizontalRight'); link.animations.stop('walkHorizontalLeft'); } }, fire: function(){ console.log('firing') var bullet = bullets.getFirstDead(); bullet.reset(link.x, link.y); }, drawHealthBar: function(){ if (hitPoints === 3) { life.animation.play('fullHP'); } else if (hitPoints === 2) { life.animation.play('twoHP'); } else if (hitPoints === 1) { life.animation.play('oneHP'); } else if (hitPoints === 0) { life.animation.play('Dead'); } } };
  10. 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... }
  11. Hi all, First off, apologies if I'm jumping the gun a bit here since I'm not sure if Mike's work on the Tilemap API is still a WIP or if it's wrapping up. That being said, the Tilemap API is near and dear to my heart due to its role within my personal projects. After poking around the recent Tilemap commits I'm curious about one thing: Are there plans to maintain layer ordering of layers within a Tilemap object as they are within the Tiled JSON? For instance: In a particular map I have something like the above where layer 1 is beneath layer 2 and object layer 1 is between layers 2 and 3. In the current build of v3 as was the implementation in v2, we lose this relationship between layers once we parse in our JSON. Current parser for reference: https://github.com/photonstorm/phaser/blob/master/v3/src/gameobjects/tilemap/parsers/parsetiledjson/index.js Within the final Tilemap, we are given the properties "objects," "layers," and "images" (ignoring collision for time being). Is there any plan to include a property on a Tilemap object that contains the ordered (as they are in the JSON) array of all layer types that are currently supported? My first instinct would be to suggest having the "layers" property serve that purpose and instead rename the existing property to "tileLayers" for the sake of being specific. That being said, a shout-out to Mike for doing an excellent job cleaning up and improving the Tilemap API. I'm excited to put it through its paces!
  12. How to use collision in phaser

    I've been trying to get my collision to work in phaser, I created my map in tiled so as far as i know i'm you use something like this "map.setCollisionBetween(264, 265, true, 'foreground');" I got the coordinates by calculating the id's from the tiles from the png file that i used in tiled. It creates the collision but not where i want it. I will insert the png file i used. so the tiled id goes like from the top left and right being 264 and 265. The bottom left and right is 297 and 298 the collision is working like this: My script looks like this: Any ideas why this is happening or how i can fix it? Thanks
  13. I created a Mario map in tiled. Then when i try to put it into phaser it wont load. its giving me this error I've searched the internet and haven't found any solutions to this problem. My javascript file lists as follows: Please help, Thanks EDIT: I fixed this problem but now i have a new one. I'm get this error Anybody know how to solve it? Thanks
  14. MyGameBuilder

    Hello, It has been a while since our last post here! MyGameBuilder was formed through a creative joining between the first versions of MyGameBuilder and MightyEditor. The main purpose of MyGameBuilder is to teach users game development in a collaborative manner, where more experienced developers can help others. If you are completely new to the game development you can: Play games - we have some nice user made games! Play with the actormap engine, which doesn't require any coding experience to make a game. Fork game and alter it to make it your own. Start taking guided lessons to learn programming basics, and even create a Phaser based game on your own, If you get stuck doing any of these things, there is usually somebody online who will be glad to help. After finishing the basic tutorials, there are some game related challenges to start practicing with. Main parts of MyGameBuilder: Graphic Editor - easily create your own pixel art, or import graphics here Actor and ActorMap - are part of the ActorMap engine, which allows you to build game without coding. It's as simple as assigning graphics to an actor, defining the Actor's behavior, and placing Actors on the ActorMaps to interact. Also, if you have used an earlier version of MyGameBuilder, you can import your game into the new version. The Map Editor allows you to build maps for your games. It uses the TileMap format so you can convert your graphics into tiles, and put them on the map.You can also import TileMap in JSON format or load TileMap directly into a Phaser game. The Sound Editor allows users to quickly create sound effects, like a coin pickup or a melee hit. There is also a music editor, which you can use to create background music for your game. Currently you can generate metal or 8 bit music, or import your own mp3 file. With the Code Editor, there is no limit to what you can create. The Code editor has a beginner-friendly code mentor which will show information about keywords used in the programming. Also it has JSdoc support so users can describe functions with JSdoc comments, the code mentor will pick those up and show as help info. Code Editor supports full ES6 JavaScript syntax and will automatically pick-up imported modules and share their info with the code mentor. The latest addition is our Hour of Code project: this is a gaming tutorial used in a worldwide classroom project that has users of any experience level program a dwarf character to complete game goals with basic JavaScript commands. Check it out here: https://v2.mygamebuilder.com/hour-of-code And all of this is completely free! It would be really nice if you could share your game developing experience when you were a beginner: How did you begin? Where did you get all the necessary information to build a game?
  15. Hey guys, I'm using the Tiled map editor and creating it with the code below: //GAME PRELOADER this.load.tilemap('map_testmap', 'assets/phaser_assets/maps/map_testmap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('grass', 'assets/phaser_assets/tiles/grass.png'); this.load.image('spike', 'assets/phaser_assets/tiles/test_spike.png'); //GAME CREATE create: function() { // this.scale.pageAlignVertically = true; this.world.setBounds(0, 0, 2000, 1400); this.physics.startSystem(Phaser.Physics.ARCADE); this.stage.backgroundColor = '#3A5963' // this.add.sprite(0, 0, 'sky'); var map = this.add.tilemap('map_testmap'); map.addTilesetImage('grass', 'grass'); map.addTilesetImage('spike', 'spike'); map.setCollision([0, 1, 2, 15, 16, 17, 18, 19, 20, 30, 31]) this.layer = map.createLayer('Tile Layer 1'); // this.layer.fixedToCamera = false; // this.layer = map.createLayer('Tile Layer 1', 2000, 1400); // this.layer.anchor.setTo(0.5); // this.layer.position.set(this.world.centerX, this.world.centerY); this.layer.resizeWorld(); However, when I start the game up, my layer looks like this, but my actual layer looks like the image on the right. So my question is, how can I push the layer down on the canvas programmatically? I've tried changing the position, but it seems that the collision doesn't move with the layer's position. Any help would be greatly appreciated!
  16. hey guys, I'm making a puzzle game having some grids/tiles.It have almost 100 levels.If i make that in tiled can i store level data for those 100 levels in one json.If i manually create json leveldata and create levels ,will there be any efficiency problem.Because maximum sprites in a level may be 30 something.Which will be the Best choice? .
  17. I'm currently working on automating the loading process of my tilesets/sprites/Tiled map data into my application and I've run into the following snag: When creating the layers of my map (i.e. invoking myTilemap.createLayer(...)) I cannot see any obvious way of preserving the order of tile layers and object layers as they were in the Tiled JSON. From what I can see in the Phaser docs and in Phaser.js itself, it appears that Phaser parses out the tile and object layers into separate groupings within the Tilemap object: layers[] & objects{} respectively. This is fine, but there's no way I can see to tell where my object layers are supposed to be relative to the tile layers. For instance, I have this in Tiled: Tile layer 1 Object layer 1 Tile layer 2 But in the Tilemap object, I get: layers = [Tile layer 1, Tile layer 2] Objects = {Object layer 1} Without relying on naming convention, I can't tell that object layer 1 is between the two tile layers. Am I missing something or is this just the way it is right now? I've got plans to refactor the Phaser.js code locally to address this, but I wanted to reach out here before getting my hands dirty to see if I am missing the easy solution. Thanks in advance for any pointers!
  18. Hi everyone im currently making a game for my project and i am a newbie to phaser and i really strugling to learn it. Can someone assist me or help me to build my game? i really appreciate it please.
  19. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  20. Destroying coins in collision

    Hi guys! I am newbie to phaser and i would like to ask question and guide me in my project. I am currently developing a game for my project. My game will collect coins and coins that have question to be answered and will be evaluated if the user can play next level. Im using Tiled. And i am having trouble when the collision on the coins it increase the score multiple times before it will gone. Here is my code. Hope you guys help me. getCoin:function(){ map.putTile(-1,layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; scoreText.text = 'Score: ' + score; } It replaces the tile with a tile that didnt exist so i appears to be gone.
  21. I have spent some time finding out how to animate tiles in a tile map loaded from a Tiled map exported to JSON. At first I built a utility class called TileMapAnimator (TMA) to animate some tiles using manual data and eventually I extended the class so that it could load animated tile data directly from the map files. With TMA you define your animations in Tiled and load them directly into your Phaser game! I'm sharing this code in the hope that others may find it useful. If you have invested into loading Tiled maps using the built in functions, I believe you can include animations in your game with very little retrofitting. TMA can animate hundreds of tiles without any notable performance degradation. Some usage restrictions apply: In TMA, each animation uses a fixed frame interval for all the tile frames. Tiled actually allows you to specify different durations per frame. Hence TMA picks the first duration as the frame interval. TMA requires tile animations to be defined on one of the tiles included in the animation. This is because TMA scans the map layer for these tiles and sets up the animated tiles at the designated locations Only one animated tile layer is supported for now. Perhaps I will extend TMA to support animation in multiple layers. How to use TMA Import the TMA class: import TilemapAnimator from "../graphics/TilemapAnimator"; In preload(), load the tile map and associated tile sets using the built-in Phaser map loading functions: this.load.tilemap('TileMap', 'assets/maps/world1/TileMap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('Ground', 'assets/graphics/world1/Ground.png'); Load the tile map again, but this time as a raw JSON file: this.load.json("TileMapAnimations", 'assets/maps/world1/TileMap.json'); In create(), set up the map and layers as usual: const tilemap = this.add.tilemap('TileMap'); const groundTileset = tilemap.addTilesetImage('Ground', 'Ground'); const groundLayer = tilemap.createLayer('Ground'); Create an instance of TMA, passing the game.time object, the tilemap and the layer containing the animations: const tilemapAnimator = new TilemapAnimator(this.time, tilemap, groundLayer); Load the animation into TMA, by specifying the cache key of the raw JSON object loaded in prefetch() using game.load.json(....) and start the tile animations: tilemapAnimator.addAnimationsFromTilemap("TileMapAnimations"); tilemapAnimator.start(); That's all there is to it! Note: I am no NPM expert, but if anyone is willing to turn this into an NPM package or some other practical library, please get in touch so we set it up! The TMA class file is attached below. TilemapAnimator.js
  22. Tiled Map Not Loading - Beginner Question

    Hi everyone, I'm brand new to game dev, and despite many hours of searching on forums, I'm still stuck - would so appreciate any help or pointers. Here is what I have: <script type="text/javascript"> var game = new Phaser.Game(800, 800, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('testmap', 'assets/testmap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('Sky', 'assets/images/Sky.png'); game.load.image('Stars', 'assets/images/city_bg.png') game.load.image('Buildings Back', 'assets/images/city_bg.png') game.load.image('Buildings', 'assets/images/city_bg.png') game.load.image('Collision', 'assets/images/cityobjects.png') game.load.image('Collision2', 'assets/images/cityobjects.png') } var map; var layer; function create() { game.stage.backgroundColor = '#000000'; map = game.add.tilemap(); map.addTilesetImage('Sky', 'Sky'); map.addTilesetImage('city_bg', 'Stars', 20, 20); map.addTilesetImage('city_bg', 'Buildings Back', 20, 20); map.addTilesetImage('city_bg', 'Buildings', 20, 20); map.addTilesetImage('cityobjects', 'Collision', 20, 20); map.addTilesetImage('cityobjects', 'Collision2', 20, 20); layer1 = map.create('level1', 40, 40, 20, 20); layer1.resizeWorld(); } function update() { } </script> </body> </html> Sky, Buildings, Stars, Buildings Back, Collision, and Collision2 are layers in Tiled. The tiles are 20x20 and I made sure the .png files were divisible evenly by 20 (that was a previous error message). Now, I no longer have any error messages, but nothing but a black box shows. I know I must be missing something obvious. Thanks for your help!
  23. Hi there, I wanted to start to create a 2D top down game with Tiled and Phaser3 but I am running into some issues. I created some tile layers (wall, floor tiles) and object layers (e.g. agent) and exported it as JSON. My preload function: this.load.json('map', 'assets/tilemaps/0.json'); // Each 32px of size this.load.image('wall', 'assets/images/game/tiles/wall.png'); this.load.image('floor', 'assets/images/game/tiles/floor.png'); this.load.image('agent', 'assets/images/game/agents/agent_0.png'); My create function: var tileSize = 32; var map = this.cache.json.get('map'); var mapWidth = map.width; var mapHeight = map.height; var wall_layer_data = map.layers[0].data; var walls_tilemap = this.add.staticTilemap(wall_layer_data, 0, 0, tileSize, tileSize, mapWidth, mapHeight, 0, 'wall'); Map json (Created with Tiled Version 1.0.3) : Is basically an array of layers: "layers":[ { "data":[0, 0, 2], // etc "height":17, "name":"walls", "opacity":1, "type":"tilelayer", "visible":true, "width":29, "x":0, "y":0 }, { // Next layer for tiles and object layers } Now my issue is that the wall tiles are drawn everywhere (whole map size and 0 and 2 are basically a wall tile). I saw in the examples that all tiles are now in one layer and not separated ones and that all images are also in one file. Is there a way to have multiple layers and separated image files? Furthermore is there still a way to extend a Sprite and then use it with createFromObjects()? Does that method still exists? My goal is to render a json file I created in Tiled. Some of them are simply static tiles, some of them with collision and some of them have extended functionality and therefore need their own Sprite class. Thank you very much!
  24. Tilemap issue

    Hey guys I'm new to Phaser, I looked on Youtube and phaser examples for answers but didn't find any helpful one. I get this error on the console TypeError: location is undefined[Learn More] phaser.js:97736:25 getIndex http://127.0.0.1:5000/assets/phaser.js:97736:25 getTilesetIndex http://127.0.0.1:5000/assets/phaser.js:97770:16 addTilesetImage http://127.0.0.1:5000/assets/phaser.js:97313:19 create http://127.0.0.1:5000/main.js:36:5 loadComplete http://127.0.0.1:5000/assets/phaser.js:28709:13 finishedLoading http://127.0.0.1:5000/assets/phaser.js:75801:9 processLoadQueue http://127.0.0.1:5000/assets/phaser.js:75756:13 asyncComplete http://127.0.0.1:5000/assets/phaser.js:75828:9 fileComplete http://127.0.0.1:5000/assets/phaser.js:76711:13 loadImageTag/file.data.onload http://127.0.0.1:5000/assets/phaser.js:76098:17 Here is my code: var game = new Phaser.Game(500, 400, Phaser.AUTO, "", { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet( "marioSmall", "assets/images/marioSmall.png", 34, 34, 6, 1 ); game.load.image("ground", "assets/images/ground.png"); game.load.tilemap( "map_01", "assets/tileset_json.json", null, Phaser.Tilemap.TILED_JSON ); game.load.image("tiles", "/assets/items.png"); } var mario; var ground; var map; var layer; function create() { // ground = game.add.sprite(0, 370, "ground"); // game.physics.arcade.enable(ground); // ground.body.immovable = true; // mario = new Mario(100, 100, 2000, 800, 200); map = game.add.tilemap("map_01"); map.addTilesetImage("items", "tiles"); layer = map.createLayer("Tile Layer 1"); } function update() { // game.physics.arcade.collide(ground, mario.sprite); // mario.checkInput(); }
  25. Phaser

    Hey everyone, I have noob questions. I'm creating a platformer game with Phaser, as well as Tiled to create a layered JSON map. So far one of my tile layers is handling all of the inanimate object collisions via this.map.setCollisionBetween(0, 600, true, this.collisionLayer, false) to which I've passed indices to my entire tileset (only using one). Given that I've done this, does the number of tiles I actually create in that layer via Tiled affect performance? Would it be advisable for me to just use setCollision() or setCollisionBetween and pass only the necessary tiles that I plan on passing to that layer? My tileset is about 1/3 tiles I want to use for collision, and they're not totally organized but I can reasonable get that done if necessary. Also, what's better for performance, bigger tilesets or more, smaller tilesets. What would you consider a sweet spot for this in terms of size and number of tilesets? Note that I've already compressed my images etc and not having any performance issues so far, just taking preventative measures. Thanks for any help in advance.