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

  1. So, I'm trying to implement ladder physics in a simple 2d platformer, with the map made in Tiled. My solution is that I have a ladder object, and then update checks for overlap between the player and the ladder entering the function "climb". As of now, two problems occur: When overlapping with the ladder, I wish to disallow gravity for the player. This works fine. However, I do not know where in the code to reallow gravity in order to make the gameflow smooth. I tried putting an "if-not-overlap", but this obviously doesn't work since "climb" is then not entered. (Tiled): I implement the ladder as an invisible object through "Insert Rectangle". It has a specified height of 105px. However, in game, it is only a small box, which doesn't appear where I would imagine, see attached picture.Happy for any help, also feel free to ask for clarification.
  2. hi, so im having a problem when trying to use a json this is my code function preload() { game.load.tilemap('tilestest','Assets/tilestestmap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles','Assets/tilestestmap.png'); } function create() { //creating the map map = game.add.tilemap('tilestest'); map.addTilesetImage('tiles'); layer = map.createLayer('tiles1') layer2 = map.createLayer('objects'); layer3 = map.createLayer('extracollision'); layer4 = map.createLayer('collisionlayer'); layer.resizeWorld(); layer.wrap = true; } the layer names as i know are the names of the layers inside tiled , so that is "tiles1,objects,extracollision,collision" and i cant figure out what the problem is , console tells me its "Phaser.Tileset - image tile area is not an even multiple of tile size" and it appears twice for some reason :S please help :c
  3. Todd and I (aka Gopherwood Studios) had a blast working on Heartbeat - Lightning Runners; check it out! Developed in collaboration with Digital Eskimo for the University of Western Sydney, this puzzle-platformer is aimed at addressing health and culture with aboriginal children in Sydney, Australia. It's built in HTML5, using Platypus and CreateJS for the game engine and rendering and Tiled for the level layout and design. Let us know what you think! (from our blog)
  4. Hi all, Loaded a tilemap into phaser as json, exported from Tiled. It loads, I can see the tiles, the player can move on the map. However, once the player gets to a certain point on the map, I get this error: Uncaught TypeError: Cannot read property '2' of undefined which apperently references this line in phaser.min.js: set = this.map.tilesets[this.map.tiles[tile.index][2]]; This error occurs at different points on the map. I'm wondering if it's because the map is too large? It's 200x100 tiles (tiles are 32x32). I noticed that the coordinates of error, make a strait, diagonal line so that the top-right hand quarter of the map (about) is playable. I ensured that my tile image is correctly proportioned (it's 64x128) Also, I noticed some oddities (I think) in the exported json file: { "height":100, "layers":[ { "data":[4, 4, 4,....<doin' it's thing, and then...> ...2684354568, 2684354568, 1, 1, 1, 1, 1, 1, 1, 1, 5, 4, 4, 4, 7, 7, 2, 2, 7, 5, 5, 1, 1, 2684354568, 2684354568, 2684354568, 1,... Are those huge numbers to be expected? They definitely don't correspond to any tile indexes. I haven't noticed anything like that in any of my other Tiled maps. Any and all help is deeply appreciated! ThanksChad
  5. Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying: Phaser.Tileset - image tile area is not an even multiple of tile size and another error repeating 5 times saying Tilemap.createLayer: Invalid layer ID given: null The code (commented out codes are a little messy) is as follows. Please help. I also would like to make one of my tile maps solid and would like to know how. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WeWork Game</title> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ }); function preload() { // game.load.image('platform', './objects/platform.png') // game.load.image('background', './background/background.gif'); // game.load.image('ground', './objects/platform.png'); game.load.image('stars', './objects/energy.png'); game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2); game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json'); game.load.image('myTileset', './background/tilemaps/bg.png'); } var player; //var platform; var cursors; var map; var backgroundLayer; var blockLayer; var patches; var stars; var score = 0; var scoreText; function create() { map = game.add.tilemap('myTilemap'); map.addTilesetImage('bg.png', 'myTileset'); blockLayer = map.createLayer('solids'); backgroundLayer = map.createLayer('cosmetics'); patches = map.createLayer('backing'); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game // game.add.sprite(0, 0, 'bg'); // The platform group contains the ground and the 2 ledges we can jump on //platform = game.add.group(); // We will enable physics for any object that is created in this group //platform.enableBody = true; // Here we create the ground. //var ground = platform.create(0, game.world.height - 70, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(1, 1); // This stops it from falling away when you jump on it //ground.body.immovable = true; // Now let's create two ledges //var ledge = platform.create(500, 350, 'ground'); //ledge.body.immovable = true; //ledge = platform.create(-300, 270, 'ground'); //ledge.body.immovable = true; // The player and its settings player = game.add.sprite(55, game.world.height - 150, 'zero'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.gravity.y = 400; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [1, 2, 3, 4, 5], 5, true); player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any stars that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 12; i++) { // Create a stars inside of the 'stars' group var star = stars.create(i * 70, 0, 'stars'); // Let gravity do its thing star.body.gravity.y = 300; // This just gives each stars a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } // The score scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); //Command that uses camera to follow player //game.camera.follow(player); } function update() { // Collide the player and the stars with the platform //game.physics.arcade.collide(player, platform); //game.physics.arcade.collide(stars, platform); // Checks to see if the player overlaps with any of the stars, if he does call the collectstars function game.physics.arcade.overlap(player, stars, collectstars, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.animations.add('stand', [0, 1, 2, 3], true); player.animations.add('stand', [0, 1, 2, 3], true); } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -450; } if (scoreText.text == 'Score: ' + 120) { //delete(scoreText.text); game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' }); //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' }); } } function collectstars (player, stars) { // Removes the stars from the screen stars.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } /*function render() { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); }*/ </script> </body> </html>
  6. First I want to say thank you for this forum and community, you all have already helped me a lot However, this time I couldn't find an answer. So, my issue is the following: I exported a map from Tiled. However, when I add the json file in preload(), my create() function stops being called altogether. I get absolutely nothing in the Chrome console, and my screen only stays black. Here is my preload code inside my game.js: preload: function(){this.load.image('sky', 'img/sky.png');this.load.image('ground', 'img/platform.png');this.load.image('star', 'img/star.png');this.load.spritesheet('dude', 'img/dude.png', 32, 48);this.load.tilemap('outsideJson', '../img/tilemaps/map1.json', null, Phaser.Tilemap.TILED_JSON);this.load.image('outside_tiles', '../img/tilemaps/outside_spritesheet3_small.png');},As far as I could find, this should be the right syntax. I think my filepaths are good, since my folder structure is the following: -www |_js |_game.js |_img |_tilemaps |_maps1.json |_outside_spritesheet3_small.pngWhen I comment out the two lines loading the tilemap and spritesheet, the create() function works normally. However, when I leave the two lines, I put a console.log at the start of create() and it is never called. I have tried a lot of things and am out of clues now. Thanks for your help!
  7. Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying: Phaser.Tileset - image tile area is not an even multiple of tile size and another error repeating 5 times saying Tilemap.createLayer: Invalid layer ID given: null The code (commented out codes are a little messy) is as follows. Please help. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WeWork Game</title> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style></head><body> <script type="text/javascript"> var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ }); function preload() { // game.load.image('platform', './objects/platform.png')// game.load.image('background', './background/background.gif');// game.load.image('ground', './objects/platform.png'); game.load.image('stars', './objects/energy.png'); game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2); game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json'); game.load.image('myTileset', './background/tilemaps/bg.png'); } var player;//var platform;var cursors; var map;var backgroundLayer;var blockLayer;var patches; var stars;var score = 0;var scoreText; function create() { map = game.add.tilemap('myTilemap'); map.addTilesetImage('bg.png', 'myTileset'); blockLayer = map.createLayer('solids'); backgroundLayer = map.createLayer('cosmetics'); patches = map.createLayer('backing'); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game // game.add.sprite(0, 0, 'bg'); // The platform group contains the ground and the 2 ledges we can jump on //platform = game.add.group(); // We will enable physics for any object that is created in this group //platform.enableBody = true; // Here we create the ground. //var ground = platform.create(0, game.world.height - 70, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(1, 1); // This stops it from falling away when you jump on it //ground.body.immovable = true; // Now let's create two ledges //var ledge = platform.create(500, 350, 'ground'); //ledge.body.immovable = true; //ledge = platform.create(-300, 270, 'ground'); //ledge.body.immovable = true; // The player and its settings player = game.add.sprite(55, game.world.height - 150, 'zero'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.gravity.y = 400; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [1, 2, 3, 4, 5], 5, true); player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any stars that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 12; i++) { // Create a stars inside of the 'stars' group var star = stars.create(i * 70, 0, 'stars'); // Let gravity do its thing star.body.gravity.y = 300; // This just gives each stars a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } // The score scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); //Command that uses camera to follow player //game.camera.follow(player); } function update() { // Collide the player and the stars with the platform //game.physics.arcade.collide(player, platform); //game.physics.arcade.collide(stars, platform); // Checks to see if the player overlaps with any of the stars, if he does call the collectstars function game.physics.arcade.overlap(player, stars, collectstars, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.animations.add('stand', [0, 1, 2, 3], true); player.animations.add('stand', [0, 1, 2, 3], true); } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -450; } if (scoreText.text == 'Score: ' + 120) { //delete(scoreText.text); game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' }); //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' }); } } function collectstars (player, stars) { // Removes the stars from the screen stars.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } /*function render() { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); }*/ </script> </body></html>
  8. Hi Vibrant Recycling is an educational arcade game for HTML5 compatible browsers where the player will help fun bins to collect and recycle properly wastes thrown during various levels of the game. Earn bonus by preventing contact of the residue thrown with the water and avoid collect the waste in the bin incorrect, otherwise paralyze it temporarily! Properly recycle the most wastes to progress in the game and is rewarded with several fun facts about recycling and the environment! Thanks for playing and good fun! How to Play / Hints:Click on the screen to bin move the arm and collect the residue.To gain Bonus Stars, you must collect the wastes before they reach the water, collecting them in the air.After the first 5 levels, multiple bins are shown, increasing the challenge.Made with melonJS (Game Engine), Tiled (Level Editor) and Inkscape (Vector Graphics). Any feedback is welcome!
  9. Hi guys Old dev, but somewhat new to game and js in general. I am working on an idea that is quite large, and I have a little team behind me. We are still in architectural phase, and already many difficulties are cropping up. Not that it's a bad thing during design right? This one is general is my biggest confusion / concern. Map loading. I am not going to call it a map, it might not be the right word, let's say play area. In our case, the play areas are huge (as huge as possible!). We don't want any world bounds to stop a player, they will be able to go as far as we can possibly allow. Of course, integers have limited size, and reality sucks. The following two concerns pop up first. 1. How could I handle/visualise/realise map loading from a central server, if maps are this large and indeterminate. 2. If 1. is doable, how the heck do I know what coordinates to use for a player. A bounded world, have x,y pixels at the least. But what does a huge world have? For 1. I considered the json way, but tiled maps are predetermined, and a map of 80 000x 80 000px, would yield a tiled json file of 4 MB already. Is it really neccesary to use csv/json tilemaps? Considering a sandboxy persistent type game, starting with NOTHING, can we just use good old rendering of images and save these locations/coords (problem 2 above) on the server side? Tldr: Do we have to use tilemaps or go free form? How do we know what the player and object coordinates are. I hope it doesn't seem like rambling. It's a real headache for me right now, as I start the loader code. Cheerios Marlon
  10. Hi, I am trying to layout some tiles in a tiled map and load them into phaser (2.3.0). I've tried some tilemaps from opengameart which are layed out in columns of 5-6 tiles per row. In this example, the map.setCollisionBetween(x,y) was not working (I had my main char passing like air), even using game.physics.arcade.collide(player, layer); I then created a simple map of one row with 6 tiles and set map.setCollisionBetween(1,6); and it worked. Now I want to show the Object Layer 1 of tiled. I am using the same tilemap for blocks and objects. I've added the following things in the create() function (after loading the tilesetImage / setCollisionBetween): ladders = game.add.group(); // new sprite group of objects map.createFromObjects('Object Layer 1',4,'objects',0,true,false,ladders); // map points to Tilemap objec, ladders is a group // Draw tile layer layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); Even though it should have been the third tile, it shows the first tile as an object. Is there any example relative to what I am trying to do?
  11. So I figure if I want a repeating image I'll be using a TileSprite. But I can't get my layer to render to a texture to then generate the tile sprite. I don't know what's going wrong because, basically, nothing shows up and I get no errors in the console. In this code, "map" is a Tilemap instance, "layer" is a TilemapLayer added through "map.createLayer(layerName);". var texture = this.game.add.renderTexture(layer.width, layer.height);texture.renderXY(layer, 0, 0)var tileSprite = this.game.add.tileSprite(0, 0, map.widthInPixels, map.heightInPixels, texture);layer.destroy();Simply nothing shows up. I can display my other images as TileSprites successfully, but I want to be able to make a repeating background in Tiled and have it automatically show up in my game. If this doesn't work I guess I'll get Tiled to render out my backgrounds as images? That's more annoying because I'll have to do that every time I change the background. What do y'all think?
  12. Hi guys, some days ago, I started with my first game ever and I decided to use js, phaser and tiled. The goal of this project is a jump'n'run game with different levels. There's a timer counting backwards, when the time reaches 0 it's over. But there are collectables which give you more time. During the last few days I learned a lot about tiles, sprites, canvas etc. and now I have finally setup a working phaser project with tilemap, timer, player and different states. The source is on github and a demo is available here. I have three problems with my game: 1. When the player stands on the cupboard, he's shaking. I have no idea why. 2. In firefox I get the following error: TypeError: PIXI.BaseTextureCache[a].destroy is not a function. 3. In chrome on mac I get constant 60fps, on windows about 30 and on mobile devices about 5. How can I fix these errors? Do you have any hints for me? And if you have some general advices for me that'd be awesome as I have no experience in online game development. Cheers
  13. Im trying to load in a map made in tiled (.json) into phaser. The map seems to load ok but the tileset loads really weirdly. Some tiles that are supposed to be a top tile load as the tile to the left of them and some load correctly. Some will load as a white box and some load as the one below them. I have no idea what is wrong. Screenshots: From Phaser: From Phaser: From Tiled: Thanks in advance!
  14. Hi, My name is Pavel I have started a series of Tiled Game Engine posts and will update it weekly if possible and will share my experiences and knowledge i learn wile making MMO RPG during several years of development as indie. I'll cover creation of Javascript based game engine from the ground, how to work with new API of HTML5, like XMLHttpRequest2, WebWorkers, WebSockets and etc. Several design patterns will be covered from performance and memory usage perspective. Currently Tiled Game Engine can works with tiled map of 1500x1500 dimension, more than 100 animated units on the screen simultaneously and more than 1000 units off-screen. The source code of that engine will be available on GitHub. Part 1: Game Loop Part 2: Stages, Assets and Loading Stage Hope not only to share my expertise, but get your feedbacks if any. Best regards,Pavel
  15. I'm making a basic sidescroller/platformer but am having an issue where every second tile in the blocked/collision layer is not showing properly. Sorry if this is a total noob question! I have a level I've made in Tiled with the following: itemLayer (object layer)blockedLayer (tile layer)backgroundLayer (tile layer) All the tiles within the scope on the very first screen (i.e. before the player has moved) show properly but as soon as the player moves to the right, the next tile on the blocked layer takes a moment to load (note this is not happening with the background layer or object layer) and then every second tile doesn't seem to show (pic here). The collision with the blocked layer generally works, except it's slightly off, so the player will fall off the end of a platform prematurely (see here). When the player goes backwards, although each tile takes a second to load (see circled here), the blocked layer does show properly, with no gaps. Then as soon as the player goes forwards/right, it does it again. I am using the latest version of Phaser and get the same issue on both Chrome and Firefox. I switched to an older version of Phaser (2.1.2) which gave me a different error, i.e that the initial blocked layer tile graphics that are loaded stay on the screen and don't change at all while the player moves right, although again, the item and background layer and collision still works fine. Anyone have any ideas? Thanks for your help!
  16. Hi, I have some strange behavior, I made 2 collision groups in p2, first have one member - player character, the second one have tiles loaded from json made by tiled. everything seems to work fine, tiles are 15x15 blocks with black background and on borders i have dotted and dashed blue lines. my character can walk on this tiles so collision works but when he is moving camera is shaking and if space between border dots is wider than my character can fall inside title. so I made a little experiment and add some black solid tiles and my character can pass them like it was background ar nothing was there. So I have no idea what is going one. please help
  17. Taking advantage of the great new v3 architecture, I've created a plugin for importing Tiled maps. You can get it through npm: npm install pixi-tiledThe github repo is here. It's fairly basic for now, but it handles layers, tilesets (including multiple tilesets per layer), and uses the new loader middleware system to make it super easy to use. I've tried it with a couple of my own maps, and it works great, but i'm really keen to get people to try it with their own maps to I can start ironing out all the inevitable edge cases. If you have any feature requests please raise a github issue and I will do my best to implement them. Thanks for looking!
  18. Hello, I'm starting to think about performances, and I've read here and there that having a big atlas with all the sprites is way better performance wise. At the moment I use different images or spritesheets because it's easier to test things during the development, but I clearly want to optimize the performances of my game so I will definitely use an Atlas in the end. I will probably use texturepacker as it is recommended here quite often. I'm using tiled to generate a map, and I'm wondering how it'll work with an atlas. In the tiled editor, I've just uploaded a little spritesheet with all the tiles I need, then I load this spritesheet in Phaser. Quite straightforward. But as I understood, you have to upload each tile (image) in an atlas, not the whole tileset. Plus the atlas will contain all the tiles and differents animations / sprites. So I wonder how you can tell Phaser which images in the atlas match the tiles from the json export. If I understand clearly the json has a big array "data" which represents the map, where each tile have an id. From what I understood this id is simply the position of the tile in the tileset used. Does that mean I have to keep the same order in an Atlas or something like that ? I don't know where do you set this up (Phaser / tiled / Texturepacker). Sorry if that might sound stupid, I've never used an atlas before so I don't really know how they actually work. Thanks in advance !
  19. Hi everyone, I'm struggling with Tiled right now to use this assets http://opengameart.org/content/platformer-bricks or this assets http://www.lostgarden.com/2007/05/dancs-miraculously-flexible-game.html to create a map. I failed to make a map as the provided examples, http://opengameart.org/sites/default/files/sample_6.png or http://lunar.lostgarden.com/uploaded_images/BlockRPGMockup-772331.jpg. Is it even possible to achieve this kind of display with this sprites?
  20. Hey guys. I decided to write a tutorial on how to build maps in Tiled and use them in Phaser. The main focus is using many Tiled maps in a single Phaser map. This makes creating content much easier as you don't have to do much world building in code. This is my first tutorial, so if anyone does read it I would love any feedback. Feel free to ask any questions here as well. I use Phaser 2.3.0 dev in this tutorial, as it exposes the "type" properties in Tile maps. It covers building two Tiled maps, a world and a house to put in that world. This includes moving Tilemaps around and getting collision working. It creates a basis for a topdown rpg game, feel free to use it. Warning: It's pretty long You can find the tutorial at http://www.kieve.ca/ For a demo of what I build in the tutorial, visit http://www.kieve.ca/demos/RPG/ You can download the project here: http://www.kieve.ca/demos/RPG.zip
  21. Hi, I'm well on my way to completing my first game with Phaser, but I have a small problem with my background image. The problem is that it's using gradients, and it will not show up in the game, only a small part of it (which ignores the gradients). I'm importing a json-file from Tiled which has a layer called "background", and that background has a big blue gradient png-image (tile) which acts as the background image. Now, when I import it to my game in Phaser everything looks great, EXCEPT for the background layer. It just shows a small strip of it at the bottom, and it's not even gradient. Everything else is just black. What should I do to make it work? I have tried adding just a standard image and preloading it in my main js-file, but then the image is just flat blue, without gradients. Even though the image I'm using is gradient. I've also tried cleaning my cache and all that. Thank you very much for all the help you can provide.
  22. Hi all, Recently i have installed Tiled Map Editor, but after installation my anti-virus tell me that it is a virus. I have downloaded it from the official site, should i desactivate my anti-virus, and continue normally? or there is really a virus ?
  23. Hi! I want to import an object layer from Tiled map editor into a physics engine ( p2.js ). My problem is that p2.js uses 0.5,0.5 as anchor points, but tiled uses 0,0 (top-left). How can i recalculate it's position so i can give it the proper coordinated for a different anchor point? Any help is very much appreciated! Edit : This is easy with rectangles, but my problem is with rotated polygons.
  24. Hello everyone, I'm working in a sokoban-like game and in this kind of game you need to reduce the player mobility to single tiles. I implemented this restriction using tween to change the x and y coordinates of the sprite along the time. When I did this I realized that the player didn't collide with the tiles, so I read the forum and someone said that the arcade physics engine doesn't detect collisions unless the velocity of the player is distinct than 0. I tried moving the sprite through velocity then but for some weird reason I still can not make the arcade engine detects collisions between the tiles and the hero. What could I be doing wrong? Did I miss something else? Here you can see the play.js code: var playState = { create: function() { this.map = null; this.player = null; this.map = game.add.tilemap(game.global.level.toString()); this.map.addTilesetImage('walls', 'walls'); this.map.addTilesetImage('grounds', 'grounds'); groups.walls = this.map.createLayer('Walls'); this.map.createLayer('Grounds'); this.map.setCollisionBetween(1, 18, true, 'Walls'); var e = this.map.objects['Hero'][0]; var y = e.y - this.map.tileHeight; var color = e.properties.color; this.player = new Hero(e.x, y); groups.walls.debug = true;}; And here is the player's code:var Hero = function(x, y, color) { Phaser.Sprite.call(this, game, x, y, 'hero', 0); game.physics.arcade.enable(this); this.body.allowGravity = false; this.cursors = game.input.keyboard.createCursorKeys(); this.animations.add('down-' + capsuleType.RED, [0, 1, 2], 12, true); this.animations.add('left-' + capsuleType.RED, [3, 4, 5], 12, true); this.animations.add('right-' + capsuleType.RED, [6, 7, 8], 12, true); this.animations.add('up-' + capsuleType.RED, [9, 10, 11], 12, true); this.color = 'red'; this.walking = false; this.nextX = null; this.nextY = null; game.add.existing(this);};Hero.prototype = Object.create(Phaser.Sprite.prototype);Hero.prototype.constructor = Hero;Hero.prototype.update = function() { game.physics.arcade.collide(this, groups.walls); this.body.velocity.x = 0; if (!this.walking) { var xDir = (this.cursors.left.isDown ? -1 : (this.cursors.right.isDown ? 1: 0)); var yDir = (this.cursors.up.isDown ? -1 : (this.cursors.down.isDown ? 1: 0)); if (yDir !== 0) { this.move(null, yDir); } else if (xDir !== 0) { this.move(xDir, null); } }};Hero.prototype.move = function(xDir, yDir) { var newX, newY, frame, direction; if (yDir) { direction = (yDir > 0) ? 'down' : 'up'; frame = (yDir > 0) ? 0 : 9; newX = this.x; newY = this.y + Math.floor(tileSize * yDir) } else if (xDir) { direction = (xDir > 0) ? 'right' : 'left'; frame = (xDir > 0) ? 6 : 3; newX = this.x + Math.floor(tileSize * xDir); newY = this.y; }};Thanks in advance for your help
  25. Hello! I am new to javascript and I was trying to make a basic platformer game in order to learn more about Phaser. I did follow the tutorial: http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game and I am starting from there, I am also using the starstruck example(http://examples.phaser.io/_site/view_full.html?d=games&f=starstruck.js&t=starstruck) as a guideline for making the basic level. However, I am finding it difficult to replicate the tilemap part. I understood that is is using a png tileset file couplet with a json tilemap. My problem is in creating such a tilemap. I searched on google on found the Tiled app does just that, but I still have some problems with it. First of all, the textures I am trying to use(http://opengameart.org/content/platformer-tiles) do not come in the form of a single tileset but rather separately, each in it own png file. I can import all of them in Tiled as a collection, but I do not know how to use them later in my phaser program. One think I tried was merging them in the tileset myself, but then they are of different sizes and Tiled splits them unevenly. What's the best way to do this? Secondly, the starstruck example using the following line of code in order to manage collisions: map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]);and I do not how I should extract such "magic" numbers from my json file. Thank you for your time! Please tell me if you need further explanation.