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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 202 results

  1. 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); ...
  2. 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>
  3. 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 ?
  4. 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'); } } };
  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. 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!
  7. 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
  8. 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
  9. stauzs

    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?
  10. 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!
  11. 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? .
  12. 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!
  13. 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.
  14. 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
  15. 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.
  16. 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!
  17. 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!
  18. 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(); }
  19. josedarioxyz

    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.
  20. Hi everyone, I'm actually making a simple 2d platformer with arcade physic and I recently implemented a tiled tilemap which contain an "object layer". In this object layer I draw collision zone with the polyline tool. Now I want thoses "collision zones" to be recognized by phaser. Which mean : if the player overlap "object layer"'s content, it will blocked as if it was a wall. I just want to know if this is possible or if I must set collision "on" for my tile layers in which I may put all my walls tiles. Also, If I must use the 2nd solution, if my tile sprite is smaller than my 24x24 tile square (I attached an example), will the hitbox fit the sprite size or the 24x24 square ? Thanks beforehand.
  21. Hi Everyone, I need guidance on how can I approach this problem: Would like to apply a tiled texture to complex polygons. I'm using P2 for the physics and tiled for the level editor. I would like to get something similar to worms where the terrain has a tiled texture, the top has grass and the bottom is darker. These are some examples of what I would like to achieve: I don't care at all about destructible terrain. This is how my level looks now with polygons from tiled: http://puu.sh/wMwsg/28b1609d74.jpg
  22. Hey there, I've ran into an issue which I really can't get my head around. I've made a tilemap in Tiled and I've successfully rendered it with Phaser. I can move the map around using arrow keys and mouse and the next I wanted to do is to add a zoom in and zoom out feature (and that's where I'm lost). In the first screenshot the tilemap is shown 100%. The pink area is just a filled polygon that I mapped out in Tiled. In other words, it doesn't fill any purpose for what I'm trying to accomplish with the zoom what so ever. In the second screenshot I've changed the view to 50%. My intention is to make the map zoom out, but still use the entire canvas. Right now, I see the same piece of map as in screenshot 1. Just smaller. I wish to see more of the map. How can this be accomplished? Any help and/or advice is much appriciated. Here's what I've got. var game = new Phaser.Game(800, 600, Phaser.WebGL, 'my-map', { preload: preload, create: create, update : update, render : render }); function preload() { game.load.tilemap('mymap', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('My Map', 'assets/vala_map.jpg'); } var map; var layer; var cursors; function create() { game.stage.backgroundColor = '#787878'; map = game.add.tilemap('mymap'); map.addTilesetImage('My Map', 'My Map'); layer = map.createLayer('mymap'); layer.resizeWorld(); cursors = game.input.keyboard.createCursorKeys(); poly = new Phaser.Polygon(map.objects.storelayer[4].polyline); graphics = game.add.graphics(map.objects.storelayer[4].x, map.objects.storelayer[4].y); graphics.alpha = 0.2; graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill(); } function update() { if(this.game.input.activePointer.isDown) { if (this.game.origDragPoint) { // move the camera by the amount the mouse has moved since last update this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x; this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y; } // set new drag origin to current position this.game.origDragPoint = this.game.input.activePointer.position.clone(); } else { this.game.origDragPoint = null; } //this.game.world.scale.setTo(0.5, 0.5); // zoom if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) { this.game.world.scale.setTo(1, 1); } else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { this.game.world.scale.setTo(0.5, 0.5); } if(cursors.up.isDown){ game.camera.y -= 4; } else if(cursors.down.isDown){ game.camera.y += 4; } if(cursors.left.isDown){ game.camera.x -= 4; } else if(cursors.right.isDown){ game.camera.x += 4; } } function render() { game.debug.cameraInfo(game.camera, 32, 32); } Regards, entiendoNull
  23. I have a graphics issue that I cannot pinpoint. My sprite appears more blurry at some positions of the map. Does anyone have an idea what this kind of problem can depend on? Both of these pictures shows the sprite when idle on different positions - so no animation is playing - and at the first picture the sprite looks more clear than it does on the second one. I don't know what more information I can give on this that is relevant.
  24. Hello, I am new to the Phaser and Tiled editor. I have created an platform with Tiled with following JSON data: { "height":15, "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, 29, 29, 0, 29, 29, 0, 29, 29, 29, 29, 17, 17, 0, 17, 17, 0, 17, 17, 17, 17, 17, 17, 0, 17, 17, 0, 17, 17, 17, 17], "height":15, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":10, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":70, "tilesets":[ { "firstgid":1, "name":"pltfrm", "source":"pltfrm3.tsx", "image":"tiles_spritesheet.png", "imagewidth":914, "imageheight":936 }], "tilewidth":70, "type":"map", "version":"2017.05.26", "width":10 } I have written basic preload and create functions as follow, function preload(){ //this.game.load.spritesheet('player','Images/player_spritesheet.png',28,30,5,1,1); this.game.load.tilemap('tilemap','assets/platform101.json',null,Phaser.Tilemap.TILED_JSON); this.game.load.image('tiles1','assets/tiles_spritesheet.png'); } function create(){ this.game.physics.startSystem(Phaser.Physics.ARCADE); this.stage.backgroundColor = "#7ec0ee"; map = this.game.add.tilemap('tilemap'); map.addTilesetImage('pltfrm','tiles1'); //backGroundLayer = map.createLayer('Tile Layer 2'); groundLayer = map.createLayer('Tile Layer 1'); map.setCollision([1,100], true, 'Tile Layer 1',false); groundLayer.resizeWorld(); /*player = this.add.sprite(0,0,'player'); player.scale.setTo(1.5,1.5); player.animations.add('walk',[0,1,2,1],6,true); player.anchor.setTo(0.5,0.5); this.physics.arcade.enable(player); player.body.collideWorldBounds = true; this.game.camera.follow(player);*/ } I am using following spritesheet.with 70x70 and spacing as 2. I thing my Math is wrong here if someone can point that out. I am having Warning message as: "Phaser.Tileset - pltfrm image tile area is not an even multiple of tile size" and nothing is shown in the canvas. I have read some threads where people are able to load images with the warning but I can't see the same result.
  25. Hi chaps, I'm following the es6 pattern as prescribed by generator-phaser-plus [https://www.npmjs.com/package/generator-phaser-plus] but having a little trouble attaching my tilemaps for usage. I'm simply using the asset loader to auto load all the assets in the preloader class, and i can see them in the cache > _cache object in the phaser game object when I log it out to the console. However, when i try to the use map I seem to end up with a 'Type error: map.tiles[tile.index] is undefined'. I am wondering if I need to build a 'world' object in the same way the sprites are added, or more traditionally like in the game class itself.... it seems whatever I try I end up with a similar error. It feels like I should be just calling them in the game class in the traditional way, by initially setting the map and then fetching the images and creating the layers, the only things that puts me off of this is that everything else seems to be loaded as its own module. I'm yet to find any examples of tiling in the es6 approach, so any tips will be much appreciated. I can provide some code example and screenies, but i thought I should test the waters and see if there was any activity here first. Thanks, Steffen.