Search the Community
Showing results for tags 'Tiles'.
-
Hi, I'm prototyping a turn-based strategy game and I would need the display a the world map as tiles (orthogonal, isometric, hexagonal, I don't care at the moment, I will go the easier way...) The main requirement is that I would need to easily change the texture on a tile depending on the player actions. What is the best (simplest) framework for this? I see phaser, pixi or melon could do it, but which one has as the simplest API for tile maps? Thanks you for your advice!
-
Hi, Is there a trick (or standard way) to put tiles of the same layer to the different depths? Currently I can call layer.setDepth(1) to modify the whole layer. But is there a way to have only one layer where some tiles have depth "1" and others have "0" ?
-
Hello, I am trying to load a tilemap mad with tiled, but i am getting this error in the console: Error: No data found in the JSON tilemap from Tiled matching the tileset name: "gameTiles" This is the code i am using in phaser: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('gameTiles', 'tiles.png'); //this.load.spritesheet('gameTiles', '../img/tiles.png', { frameWidth: 32, frameHeight: 32 }); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('gameTiles'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } I give you the complete source code in the attachment. It is not so much. Thanks in advance. 1-carga-carretera.zip -
Hi, I create a tilemap with 4 layers with one for collisions ( named : collisions ). The layer with pink tiles is my collisions layer, and the tile ID is 515. Then I add a player and active collisions. function preload() { game.load.tilemap('map', gamePath + 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', gamePath + 'assets/tiles.png'); game.load.spritesheet('cars', gamePath + 'assets/cars.png', 180 / 5, 73); } function create() { game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('collisions'); console.log(layer); layer.resizeWorld(); map.setCollision(515,true); game.physics.p2.convertTilemap(map, layer); player = game.add.sprite(1100, 800, 'cars'); game.physics.p2.enable(player,true); game.camera.follow(player); cursors = game.input.keyboard.createCursorKeys(); } I do not understant why there is not collisions between my player and my collisions layer. thx for your help.
-
Here is the tile spritesheet : Example: https://labs.phaser.io/edit.html?src=src\game objects\tilemap\collision\csv map arcade physics.js These white stripes appear when the camera moves in this example, I have this problem in my own game, any idea what one can do about it? The only thing I could think of doing about it was to add empty tiles to the tile sprite sheet so that transparent tiles would not get stripped by the tile beside it.
-
Hello, there is any consideration to draw a sprite after another?. I'm having a hard time trying to make them fit perfectly. I'm starting to think that is something about decimals or something because most of the sprites have a line/space between them , and in mobiles is even worst. I have a big spritesheet with tiles, and I extract them with: new PIXI.Texture(texture, new PIXI.Rectangle(col * tileSize, row * tileSize, tileSize, tileSize)) where col and row indicate the position of the tile. Could be a problem related with this method? the spritesheet is fine because it works perfect in Tiled.
-
Hi! I am using Phaser CE, and here is some code: var level1 = { map:{ size:48, w:36, h:6, layout:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2] }, create: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#0ff"; game.renderer.renderSession.roundPixels = true; game.world.resize(this.map.size*this.map.w,this.map.size*this.map.h); this.background = game.add.tileSprite(0,0,game.world.width,game.world.height,'bg'); this.background.scale.setTo(3,3); this.ost = game.add.audio('music'); this.ost.loop = true; this.ost.play(); this.tiles = []; var j = 0; for(var i = 0;i<this.map.layout.length;i++){ if(this.map.layout[i]!=0){ switch(this.map.layout[i]){ case 1: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile2'); case 2: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile'); } this.tiles[j].width = this.map.size; this.tiles[j].height = this.map.size; game.physics.arcade.enable(this.tiles[j]); this.tiles[j].body.immovable = true; j++; } } player.create(); game.camera.follow(player.sprite,0.4,0.4); }, update: function(){ for(var i = 0; i < this.tiles.length; i++){ game.physics.arcade.collide(player.sprite,this.tiles[i]); } this.orientationChange(); player.render(); this.background.tilePosition.y += 0.25; }, orientationChange: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } } That was my player sprite colliding with a 1-D tilemap array. My problem is this -- When the player jumps, or isn't near the lower half, it looks normal(first screenshot. When it collides with the ground tiles (labeled 1 or 2) the camera acts as if I've touched the bottom of the screen, instead of showing the sprite on the tile, centered...(second screenshot) Please help! I am using Phaser from just a week, and this is a peculiar issue. There is a sample game at smvaidya.itch.io/DuskMite That map with tiles all over worked just fine but the one tiles which were set as floor (3 rows!) don't show up. They are under the screen. Why?
-
Hi all, I need advice on which approach is best for my problem: Setup: 1. I'm using Tiled and tiles sets to create platforms for the player to jump on 2. Each platform is made of 32x32 tiles and can have any shape, like in tetris. (line-shaped, "L"-shaped, 2x2 block, and so on) 3. A level can have up to 50 platforms Desired outcome: I want is to know when the player has touched every tile of a platform. E.g. a platform has 5 tiles and after the player collided with all of them I want to call a function. What would be the best way of doing this? Solutions considered: 1. Have one layer per platform and get all tiles in each layer once the player touches the first tile. Then have a boolean on each tile, and substract the total touched tiles from the total tiles in the layer. When zero, call the function 2. Have some function that looks for adjacent tiles to the one touched by the player. Are there any better solutions? Thanks
-
Hi! My name is Andrei and I am looking for a pixel artist to help with my hobby game project. The game I'm working on is called Feudal Tactics and it is a multiplayer turn-based wargame, similar to Advance Wars. You can find out more about Advance Wars on Wikipedia: Advance Wars - Wikipedia. Feudal Tactics will be a completely free browser game built on HTML5 & JavaScript, with asynchronous play mechanics. I am looking for a pixel artist that can draw low-res terrain tiles, military unit sprites (with animations), a logo for the game and a favicon for the website. The graphics must have an old, feudal period Japan look & feel. I can provide three sources of inspiration so that you can better understand what type of art I want: first, the pixel art of EyeCraft posted on the Pixelation forums, which is pretty much exactly what I'm looking for: GR#060 - Super Daimyo - Low Res Game Art; check his last posted images on the 4th page of the topic or open the following direct links: http://i188.photobucket.com/albums/z212/gastrop0d/shog_mock10.png http://i188.photobucket.com/albums/z212/gastrop0d/dai_mock_2_0-1.png second, Toen's Medieval Strategy Sprite Pack: a lovely graphics pack which I'm actually using as a placeholder for now and last but not least, the original Advance Wars graphics: a quick search for the terms "advance wars gba screenshots" will get you plenty of results (you can also find the entire spritesheet ripped from the game) I am looking to pay around 30$ per hour or I can pay per asset. Please note that I am looking for just one person for this job and it will not be full-time employment. If you are interested please drop me a message: [email protected] It would be great if you could provide me with a link to your portfolio and showcase some work in a style similar to what I'm looking for (low-res top-down tiles & sprites). If you can only work on the game graphics, or only on the logo, but not both, please state so in your email. Thanks for reading this and have a nice day! -
I am making a platformer game with Phaser 2.9.2 where the map is loaded from a JSON file and am having difficulty trying to make interactive tiles which are replaced by a new tile with a collision from a single-direction. I have found a function which allows me to control the direction of collision direction of tiles, so I am hoping to find out how to activate a function and replace individual tiles when there is the sprite and tile are overlapping. I have been thinking of adding the tiles individually in JSON with unique properties and using the .createFromObjects method, but I want every tile to have the same properties and the potential to make multiple stages. So I am hoping there is way to activate a function when the players sprite overlaps with the tile, and in the function it replaces that individual tile with another tile from the tilemap. -
Hello everyone, I've been looking in to how one might create sloping tiles in Phaser.js and its Arcade physics engine. From what I've done so far, I just basically have two squares moving through the middle of an existing square as an experiment to see if my 'limited' knowledge of maths actually works (see fiddle): http://jsfiddle.net/drunkenoodle/qLuzv06c/10/. My plan was to simply move a sprite along that same trajectory while ignoring the left and right collisions of the tile... So I gave it a shot and attempted to apply the method to Phaser, although had very little luck doing so. I've checked out a few articles but sadly don't 100% understand them yet, so heading back to them after posting this. I just wondered if anyone else had any luck, and if you may have some pointers on how to go about it. Cheers for your time guys, -D
-
Hello everyone! I thought I'd share something I've been working on for the past few weeks. A plugin for Phaser that provides collision handling for sloped tiles and half tiles, similar to Ninja Physics but somewhat more concisely. Check it out on GitHub, give it a whirl, let me know what you think! Github: https://github.com/hexus/phaser-arcade-slopes Demo: http://hexus.github.io/phaser-arcade-slopes/ It's still early days for this project, as I've only just released v0.1.0-alpha today, but I look forward to continuing fleshing it out. Why did I make this? I've been intending to make a 2D platformer with Phaser for ages, and I knew I wanted it to have sloped tiles to allow for a liberating way to traverse the Y axis, but I couldn't find anything that worked the way I want it to. I experimented with Ninja Physics, but it's deprecated and its limitations left me wanting. I tried P2, but it was too much in terms of physics for me, and I didn't want to tame a beast like that. I started searching these forums to see if anyone had managed to get sloped tiles working in Phaser, with some success, but not completely. The solutions wouldn't allow for completely free tile placement, and they just stuck physics bodies to the slopes and left it at that. So, with a somewhat limited understanding of the maths I'd need to learn to achieve what I wanted, I started reading tutorials about the Separating Axis Theorem (SAT), particularly the ones from Metanet and one I found magically through a Google search. After experimenting with SAT.js in Phaser, I decided that I could totally pull off my own plugin to solve this the way I wanted it to be. With lots of learning, but with a clear vision of how I wanted the plugin to work, this is what I've managed! I have lots more features planned, as you can see in the roadmap, but for now I'm just glad I've built something that can be plugged straight into any Arcade Physics project that just works. Screenshots
- 32 replies
-
- 12
-
-
- slopes
- sloped tiles
- (and 6 more)
-
Hi, I'm open for new projects [email protected] My gallery: https://www.artstation.com/kozhko
-
Hello everybody. Need your help with Tiled Map Editor. I had a set of tiles, I updated it with another one in which there is a new tile, but when I add it to the map, another one is displayed instead, and so with some tiles. tried all tiles and a new one was not found Who faced the similar? how to fix the problem?
-
I'm trying to get my tilemap to scale and I'm basically following the example here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js#L17 However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
-
Hello. I've been trying to create some levels for my game and I found that the only way for it to work, given my tilesets, would be to create multilayered tilemaps. The problem is I don't know how to load them using Phaser functions and I've been unable to find any existing examples of this in action. Any help would be greatly appreciated. Best regards! Mariusz
-
Hi, I'm trying to build a top-down 2d game. You can find the code for it here: https://github.com/JimTheMan/Room-Walkers Here is a screenshot of the game using "this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE ;" The game works, but there are a few issues I'm having: 1) The "viewport" always shows an area of 10 x 10 tiles. As the player moves the camera follows him and he appears to be moving around the map. However, the viewport is always 10 x x10. Is there a way to change this, for example, to where the viewport always showed an area of 20x20 tiles? 2) When I use "NO_SCALE" mode everything looks super tiny, but when I use any scale mode (such as SHOW_ALL) the text looks blurry and is completely unreadable... How can I have graphics that are large enough to see while still keeping nice, crisp fonts? thanks.
-
I'm creating a tile-based game where the game is set to always have ten tiles vertically and scale every tile to fit as such. At certain window sizes, however, there are gaps every few tiles running vertically. Strangely enough these lines only run vertically and not horizontally. I'm assuming this is because of the non-round scaling (a typical number is something like 2.496875). Any ideas how to fix this?
-
Hi, I'm currently in the middle of setting up the base of my game with the use of Phaser game engine but I'm having issue with the sprite colliding with the world bounds. I've used Tiling to create the backdrop and the ground etc. But I need help understanding how to define what the sprite should be colliding with. How do I collide with the ground, which is part of the whole tile. Please see the attached 2 images, the sprite falls through the game as expected. this.world.setBounds(0,0, 400,300); console.log("in Game screen"); //sprite width - 180px, height 247.5px map = this.add.tilemap('level'); map.addTilesetImage('MyTile', 'tiles'); layer = map.createLayer('Tile Layer 1'); console.log("Json and sprite loaded"); sprite = this.add.sprite(this.world.centerX, this.world.centerY, 'character'); sprite.anchor.setTo(0.5,0.5); sprite.scale.setTo(0.2, 0.2); console.log("Character Loaded"); this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.enable(sprite, Phaser.Physics.ARCADE); sprite.body.gravity.y = 500; console.log("Physics added to sprite"); The above code is in the create function, I am using state management, as you can see I've added set world bounds, when adding this the sprite dissapears, I've tried numerous different dimension but I've still not come to a solution. Any help would be much appreciated. Thanks
-
My new Phaser game Karate Burger | Salt Chef. Tap around character to control him. http://www.munchiegames.com/hamburger_games/karate_burger same Phaser game in webview, generated in Android Studio with Firebase addons https://play.google.com/store/apps/details?id=com.munchiegames.karate_burger
-
Hey. So I'm trying to fade an array of tiles in and out by tweening their alpha's: var tween = game.add.tween(tiles).to(properties, duration, easing, autoStart, delay, repeat, yoyo); tiles.layer.dirty = true; But this doesn't work. I think because layer.dirty is being set to false right after I set it to true. I've tried using map.createFromObjects (http://phaser.io/docs/2.4.4/Phaser.Tilemap.html#createFromObjects) and map.createFromTiles in an attempt to temporarily turn tiles into sprites as I guessed that maybe tweens only work with sprites but I'm not sure those methods were intended to be used for my purposes... Could someone point me in the right direction? Cheers
-
I'm a newbie with Phaser tile maps. I've created a simple Mario-esque platform game where the player can jump around and land on platforms. This all works fine, but now I'm trying to add some "walls" to the level which the player should not be able to pass through horizontally, and can't figure out how to get this behavior working (see attached illustration for better explanation) Here's the code I'm using to read the tilemap data and set up collision: pf.map = pf.game.add.tilemap('level2'); //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset pf.map.addTilesetImage('tiles_spritesheet', 'gameTiles'); //create layers pf.blockedLayer = pf.map.createLayer('blockedLayer'); pf.walls = pf.map.createLayer('walls'); //collision on blockedLayer pf.map.setCollisionBetween(1, 5000, true, 'blockedLayer'); pf.map.setCollisionBetween(1, 5000, true, 'walls'); The "walls" layer should collide with the player on all sides, and the "blocked" layer should only collide on the top. Currently both the "walls" layer and the "blocked" layer are colliding with the player only on the top. Any help or advice very much appreciated! -
Heya, I'm trying to implement a scene similar to Party Hard house where the wall tiles height is twice their width. When you walk from the bottom you stand in front of the wall, but when you walk from the top you go behind it. It's like walls in isometric games, but from a straight perspective. Is there any way to implement this using Tilemaps? It seems I'd need to create each wall as a separate object and just define collision to half the height, anchored to the bottom. I am also using TILED Map editor and don't think I can really do it inside it either (so I'd have to "fake" it in-game with higher wall tiles). I played with square tiles and adding a foreground layer to display the upper half of the walls BUT it only works presuming that the object sprites approaching from bottom are never tall enough to overlap the top half of the wall (otherwise it would be rendered in front). I want characters as tall as the walls and I want them to be able to walk pretty close from the bottom, so this approach doesn't work. Any ideas aside from creating each wall as a separate object and manually sorting depth based on the y coord of the wall / character sprite?
-
First of all, sorry for my english. I just started with Pixi and was studying tilemaps, but I'm having gaps between the tiles whenever I scale by the factor of 0.01. Yes, i'm using PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; Here's what I I've got: PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; PIXI.loader .add('tileset', 'img/tileset.json') .load(setupMap); function setupMap() { var mapData = []; // Omitting bidimensional array with tiles for the sake of the example var map = new Container; var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true); for(var coll = 0; coll < 100 * 48; coll++) { for(var row = 0; row < 100 * 48; row++) { if(mapData.hasOwnProperty(coll) && mapData[coll].hasOwnProperty(row)) { tilemap.addFrame(tileset.textures[mapData[coll][row]], coll*48, row*48); } else { break; } } } map.addChild(tilemap); stage.addChild(map); } // This fucks up everything document.addEventListener('mousewheel', mousewheel, false); document.addEventListener('DOMMouseScroll', mousewheel, false); function mousewheel(e) { var zoomOut = e.wheelDelta <= 0; map.scale.set(map.scale.x + (zoomOut ? -0.01 : 0.01)); }
-
I can't understand why this is happening so please help me out. For some reason when i run this program at my home PC it will load a black screen. When I load the exact same files on a PC at my University it will run normally from using those exact files where it DID NOT work at my home PC. If anyone could shed some light into why this error is there and give a fix it would be great. Error: Uncaught TypeError: Cannot read property 'x' of undefined(…) P.s All files included in the ZIP. Test Game Phaser.rar
