Search the Community

I have been doing a research and want to share what I have found out. I have come across three major HTML5 libraries that would suit the needs of an isometric game. I hope the resources and insights are useful to future indie developers. If there are untruths and misconceptions below, I will be grateful if you correct me. I will start with my journal first and then make a short list of pros and cons in the bottom. Journal: Cocos2D-HTML5 The first HTML5 framework for an isometric game I came across was Cocos2D-HTML5. First I stumbled into this example. Later on I saw Cocos2D-HTML featured in Intel® XDK And third the isometric examples under "Tilemap Test" in the test cases: http://cocos2d-x.org/js-tests/ So I decided I will replicate the movement in an isometric environment in my own project and continue from there. And soon enough I could load any of my isometric Tiled maps in a browser and walk around. But then I found out that the TMX map functionality is very incomplete for isometric maps made with Tiled Editor. Most importantly there is no tileset offset available so you can't use objects larger than a single tile. I decided I can expand the functionality when it comes to isometric tiled maps. After all I can't expect that they have all the tools that I require for my needs. I set expanding the Tiled Editor functionality for later, and start from a more basic point for now. I was going to start from a normal character sprite walking around. And then I found out the large community around this framework mainly writes in Chinese and uses some Chinese version of github. And so I can't find help for even the simplest of things which is keyboard movement and character animations. Frustrated by the lack of community in Cocos2D-HTML, I decided to scout around for another framework before committing. Phaser Next on my list was Phaser, of which I found out about from these boards. The fact that it has a big and active community is very appealing. A little into looking at Phaser I found this Isometric plugin and became full of hope. Especially this example which could be the basis of a great isometric game. Using Phaser for a big project was a point proven by big games like Feudal Wars and Wild Terra. Two great games that are both isometric and made with Phaser(mostly). Unfortunately there was no inbuilt support for maps made with the Tiled Editor. However there is another plugin that would load an isometric Tiled map which is outdated. The creator of this plugin is working on a new version that will come about soon and will work perfect with Tiled isometric maps. https://github.com/englercj/phaser-tiled "It's in the thin-tiles thread" he wrote "just bare with me". I got a little discouraged when I read several topics, about how Phaser's tileset is not fit for isometric maps and how both the developers of Feudal Wars and Wild Terra had to write their own modifications in order to use isometric tilemaps. Also, the great isometric plugin, the one that I mentioned first, is not good for maps larger than 10x10 tiles, because it uses a Sprite entity rather than a tile entity for each isometric tile, and this hinders the performance for larger maps. Isogenic Finally I got to Isogenic. As you may guess from the title, this framework has perfect support for isometric games. It has only some support for the Tiled Editor, but that is understandable since it supports a whole new level of isometric 2.5D which the Tiled editor does not. Once I went through most of the video tutorials I was able to run all the Node.js servers and play the multiplayer examples. The engine lacks a lot of the features that other engines have, but has a lot of multi-player features. Summary: Cocos2D-HTML5 - Community (Poor): Cocos2D may have a huge Java and C communities, but when it comes to Javascript, and to the current version of the project, almost all the help I found was in Chinese. - Cross-Platform (Excellent): Rather than other HTML5 apps that can be ported to mobile devices on the principle of Phone Gap, Xamarin and Intel XDK, Cocos2D has it's own native SDKs which it translates the Javascript to. Thus it becomes a truly native app on mobile. - Tiled Editor (Good): It is important that you can load map files straight away. No exporting, no adjusting. It is not perfect when it comes to isometric projection though. Phaser - Community (Excellent): Phaser has a great community. A lot of open topics and discussion. A lot of the people I contacted personally with questions found the time and generosity to answer them. - Cross-platform (Good): Not as native as Cocos2D, but with help from Intel XDK there is a very good performance. There is probably an even better way but I haven't searched yet. - Tiled Editor (Poor): No inbuilt interpreter for the maps format and support for isometric tiles at all. There is hope however once Chad's plugin is ready. - Other: It is possible to use 3D sprites with tree.js which will save the App loads of memory. Isogenic Game Engine: - Community (Poor): Author is very helpful and everything is well documented and supported with tutorials. But the community needs to grow a little more. - Cross-platform (Poor): Certainly you can run the game on mobile since it is HTML5, but as to the best way in this case, I have no idea yet. - Tiled Editor - (Poor): IGE is not a stranger to the Tiled editor, but it supports it very scarcely. You need to export your map, and then you need to make your own extension to use large tiles (trees and walls). - Other: It really has amazing multiplayer and server-side functionality. It has some good path-finding. It has great 2.5D objects, more than tiles with an offset. Conclusion: If you use Cocos2D-HTML5, there will be good prospects for your game on mobile as it will run as a native app. Decide how cross-platform you want to go in the future. If you use Phaser you will struggle to achieve an isometric environment, but everything else in your game will be much easier. Decide how isometric you want to go in the future. If you use IGE you will cover a lot of ground fast, with a flying start from an isometric environment. But after that you may hit a wall if you want to expand with functionality unexplored in the engine, such as spine animation or 3d sprites. Decide how classically isometric you want to stay in the future.

Hello, For my video game project I need a game designer who knows how to handle isometric design and for logos. I can not pay immediately but if the game receives donations rather quickly some of the donations will be donated to the designer who will help me because it is very urgent for me now. Thank you for your interest in my project. For more information about my project feel free to contact me privately. A portfolio of your previous work would be very appreciated. A good day to those who read this post.

Hi all, Please check out Space Battle game, basically I used sea battle mechanics for single player in space setting. Made with VueJS, no canvas used - animation and isometric grid is made with CSS. Link to the game ? https://chpockrock.itch.io/spaceranger

Hey everyone! I've been a lurker for a while, but joined up to shamelessly plug my new library I built for my own PIXI projects. Hopefully someone else will find it useful too. I wanted an unopinionated way to make isometric tilemaps from sprites of different sizes/depths, one that would play nice with PIXI ? and allow me to be super flexible at runtime without much overhead. Let me know if you have any feedback or find it useful at all! https://github.com/sammccord/iceoh Example page

Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;

Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom

Hello gamers and game developers, my name is Remos and I specialize in creating game sprites. I can create animated characters, props, tiles, buildings, etc. Notes - I don't work for free or royalties/shares. - I don't work with Pixel-Art Contact E-mail: [email protected] Portfolio: https://remusprites.carbonmade.com/ Twitter: https://twitter.com/RemosTurcuman I am here offering my services to anyone interested, here are some samples of my work :

Dear game creators and indie developers, At Super Game Asset we have create a new type of prototype game map, now everyone can try their game designs or game engine with high quality prototype game map with lesser time and effort. The Prototype beginner village map can be used to demonstrate game engine, test game design, pitch a game idea, and appear absolutely beautiful. Prototype Beginner Village Map details • Isometric game maps in 5K resolution details • Full PSD file layer provided, allow designer to edit and reshape the map • Contains all buildings, trees, environment props in separate layers. Download PSD file link

Hello everyone, I hope you like isometric pixelart games, because this is one of them,. I grow up in the early 00' "playing" habbo hotel, and I really enjoyed the art behind this "social network" (yes, it is), so I decide on 2014 to create my own game, but I had several medical issues between 2014 and 2017. So at the beginning of the year I started the project again,with pixi.js... and that's it. I want to make a MMORPG. I played runescape a lot, years ago, but I want to create a original content, with not much influence from current mmorpg's, and I accept all kind of help and ideas. The game is currently in a closed INDEV, but in some moments, I send codes in the official discord (currently in spanish). twitter: http://twitter.com/voidpixel/ discord: http://voidpixel.net/ game: http://alpha.voidpixel.net/ github issue tracker: http://github.com/voidpixel/game/ I hope you like it. ❤️

Hello, i'm a JS developper in freelance and currently working on a personal project i'm making a game having the same gameplay as Diablo 2. I liked this game so much that i've decided to make a game with the same apporch (3D pre render, mouse based move...) for those who don't know d2 check this link => https://www.youtube.com/watch?v=S7TADQxS6mk the game is a PVP Melee (w/ team or alone), the goal is to defeat others players using teamwork and character' skill. Small map will force players to keep moving while trying to put enemies in trouble. Round ends when all enemies are defeated. Game ends when a team/player have reached 3 wins. A lot of works is already done : - spell/player collision - gameplay - in game interface (life/allies/map/score etc...) - out game interface (main room/lobby/matchmaking) - server side check (prevent cheating) - sound system - game state detection - pvp mode (1v1, 3v3 or even 2v2v2 or 1v1v1v1) this is developped using : Phaser, React for outgame itf, jQuery for ingame itf, SocketIO and express I want to involve a 3D graphist on the project. He has to use Blender to model and animate characters. I need it to be done with blender because this is the lone tool i use to render the animations on spritesheet. Characters will have a least 5 animations : running / iddle / taking hit / dying / casting spell. Other may be added in the future for "special spells" I can't upload a demo because of size restriction here but if youre interested feel free to contact me Thanks ;-)

How do you make isometric with phaser? I try to use isometric plugin, but it doesn't work good with big maps exported from Tiled editor. Can you give any examples or source code?

Hello, I'm trying to use SSAO2 postprocess in a scene with an Ortographic Camera, but the results are really messy. With SSAO (you can see the muted code in the bottom of the playground project) I cannot see any kind of result. Here is the playground: https://playground.babylonjs.com/#BUKDLQ Thanks!

Hi everyone, Cube City Wars is 2 players isometric game which I made for twoplayergames with Construct 2. This game is classic 1 vs 1 shooter game which has additional enemies to kill and get extra score. Collect pickups to get powerful weapons such as minigun,laser gun,sniper rifle and more! Play here : http://www.twoplayergames.org/Cube-City-Wars/1312.html

Hi everyone, I've just signed up to this forum and I want to show you my new game made in Consturct 2. This game is not 100% finished ( maybe 95%) so there's a few bugs.Also ignore the "audiojungle" sounds.I haven't bought the sounds yet. Any comments and questions are welcome. Play the preview here : http://www.actionoyun.0fees.us

Hi all, I have been trying to follow this tutorial here: https://developer.tizen.org/community/tip-tech/using-easystar.js-implement-pathfinding-tizen-game-projects However, it mentions about a 2D array and right away I'm lost. I have a game in Phaser Isometric but I don't use a 2D array at all. I just have a tile and a loop to add to a tile group. spawnTiles: function () { var tile; for (var xx = 0; xx < 400; xx += 38) { for (var yy = 0; yy < 400; yy += 38) { // Create a tile using the new game.add.isoSprite factory method at the specified position. // The last parameter is the group you want to add it to (just like game.add.sprite) tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tileGroup); tile.anchor.set(0.5, 0); } } } How do I get a 2D array for Easystar to use?

Hello everbody I'm not sure if this is a rounding-issue or related to the 2D/3D projection of the isometric plugin. I had a look into this class but couldn't find anything related so far. If you look at the screenshot you'll notice tiny but really ugly misalignment. I got a couple of cubes (46x46 px). In Tiled I use 46x23 px tiles in isometric mode. The alignment of the cubes is fine. Here and there it skips a px but for a level designing tool it's good enough. I use the isometric plugin for phaser and use a kind of self made "2D"-array to store the json-file information from tiled. I create isoSprites with iso-positions. Since I used 46x46 px as tile size I went for 23 px as "gridsize" of my world. I've tried already other values from 20 to 26 but nothing seems to align the cubes exactly. Any ideas what could cause this? Thank you for ANY ideas

I thought about using TravisoJS (http://www.travisojs.com/) but I haven't seen any games that use it. Does anyone have experience with it?

Hi, I am developing a game with babylon.js, and I use an isometric view (so z coordinate, is actually pointing top left of the screen, and x bottom left) : var zoom = 2; var cameraPosition = new BABYLON.Vector3(5*zoom, 4.1*zoom, 5*zoom); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.TargetCamera("camera1", cameraPosition, scene); camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA; camera.orthoTop = 2.5 * zoom; camera.orthoBottom = -2.5 * zoom; camera.orthoLeft = -5 * zoom; camera.orthoRight = 5 * zoom; Therefore, when the player wants to go up (velocity.top), the controlled mesh should increment both z, and x, which results in the following equations : if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.7071; // Cos(45°) else var d = 1; player.position.z += Math.sign(player.velocity.top - player.velocity.left) * d * t; player.position.x += Math.sign(player.velocity.top + player.velocity.left) * d * t; All this seems to be working fine. Now, I would like the orthographic camera to follow the player when he is moving. I can't make the camera target the player, as it breaks the isometric view : the camera doesn't move to follow the player, it rotates, and as the angle of the camera changes, the isometric view breaks. Instead, I think I need to move the bounding box of the orthographic camera to be centered on the player position. But because the camera is orthographic, the bounding box doesn't seem to be related to the same coordinates as the player : the same way position.z is an arbitrary combination of velocity.top and veloctiy.left, orthoTop should be the inverse combination of position.z and position.x. So instead, my idea was to increment the bounding box by the same amount the player moves (as the velocity is in the same direction than the bounding box). By tweaking the values, I came up with this approximate solution, which I have a hard time to understand. if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.35; // Cos(45°)³ else var d = 1; camera.orthoTop -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoBottom -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoLeft -= Math.sign(player.velocity.left) * d * t * 1.4; camera.orthoRight -= Math.sign(player.velocity.left) * d * t * 1.4; It is approximate, because it only minimizes the error of movement between the camera and the mesh. But if the player goes one direction long enough, it will eventually go out of the screen. I am pretty sure there is an explanation for all this, but can't find it. What is the correct way to make an orthographic camera follow a target in an Isometric view ? Thanks,

I have an isometric grid set up, but I'm not sure what size the tiles should be. In another question I asked about scaling and learned about mipmapping. How does this apply to isometric tiles? Should the width be 128 or the height? I don't think it's possible to make both a power of 2. Or does this even matter? Is the solution to package multiple texture sizes of each tile. Also once I get the size figured out how do I get ride of the grid lines from the aliased edges, do you overlap the tiles slightly?

Hello all! I'm currently making an isometric game using Phaser and the superb isometric plugin. However when it comes to creating assets I hit a wall. When searching online I don't really find something useful on best practice on creating isometric art but a few tutorials. If I want to a few characters - say same form, different clothes - in eight directions should I use a program life Inkscape and draw all of the different angles or should I create a 3D model and take pictures. I find the information on the topic very lacking. Thanks in advance for any answer! :-)

Hi, In my isometric tmx file the object positions are :"x":4097 , "y": 3300. But in melonjs when i load the positions I am getting entirely different x and y cordinates. How can i map these both! can someone help me here! I am trying to save the game by editing the tmx json. so the x and y postions I am getting from the UI, when i try to save them in json . its not aligned.the postions are completely different!

Hello all, please take a look at my uber-alpha project Arkona II. It runs as a desktop app (courtesy of electron) but it is an html5/js game. I've only been able to run the mac version, so apologies is the other platforms are not working. https://github.com/uzudil/arkona2/releases Thanks! --U ps.: did I mention I'm looking for contributors?! It could be you...

I made two maps with Tiled, start with Isometric then I have changed to Ortogonal and set the width to 32 pixels. I have a Javaascript function to read the JSON map and use "game.add.isoSprite" to show the sprites in Browser. When did I make maps with diferent sizes it didn't work in the same way. First town map (Stade 1): widh: 14 pixels height: 20 pixels this.hero.anchor.setTo( 0.5 ); Second town map Stade 2: widh: 20 pixels height: 8 pixels this.hero.anchor.setTo( 1.1 ); I set up the anchor with diferent value and then then hero walk over the map. // Set the First world size this.game.world.setBounds( 0, 0, (14+2) * 64, (20+2) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 14 * 32; this.game.physics.isoArcade.bounds.widthY = 20 * 32; // Set the Second world size this.game.world.setBounds( 0, 0, (2 + 20) * 64, (2 + 8) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 20 * 32; this.game.physics.isoArcade.bounds.widthY = 8 * 32; //Loop var oSprite = jogo.add.isoSprite(posX, posY, 0, imagemCarregada, qualSprite , group); oSprite.anchor.set(0.5); //hero this.hero.game.add.isoSprite(x, y, 0, loadImage, imagem , grupo); //In the First Map this.hero.anchor.setTo( 0.5 ); //In the Second Map this.hero.anchor.setTo( 1.1 ); I use a lot of values and didn't work equality in two maps. My englsh isn't good.

Hello. I am having an hard time on defining the bounds of my isometric world. I have tried so many things but it just doesn't get any good. I couldn't find a way to debug the bounds and actually see them. I think that the setBounds(x, y, width, height) is on screen coordinates. I am not sure anymore? Can someone clarifiy me this and help me ? EDIT: In the docs of the isometric plugin http://udof.org/phaser/iso/doc/Phaser.Plugin.Isometric.Arcade.html I noticed there is a setbounds for isometric. However I cannot work with it correctly what am I doing wrong? @lewster32 It just bugs the whole thing game.plugins.add(new Phaser.Plugin.Isometric(game)); game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); game.time.advancedTiming = true; game.iso.anchor.set(0.5,0.2); game.world.setBounds(0, 0, 0, 10000, 10000, 10000);

I see the plugin's a bit dormant ATM, I think, but perhaps you guys have had enough experience to answer what _seems_ like a simple question: Given I have a Phaser.Group() of Isometric.ISOSprite() acting as the 'floor' tile-map, is it possible to constrain the state's bounds based on this Group? The group will be dynamic so the number of sprites will change. I had initially thought simply going: game.world.setBounds(myGroup.x, myGroup.y, myGroup.width, myGroup.height); would work, but of course those coordinates don't accurately reflect the 'true' dimensions of the isometric grid, given the plugin projects the coordinates. I tried a couple of guess/combinations, but I always got 'weird' bounds as a result. Any ideas? Hopefully the answer's simple!