Sebi Posted August 21, 2015 Share Posted August 21, 2015 Hey Guys, I'm currently coding a new map editor. Most people use Tiled but I prefer to roll my own because it allows me to customize, realize my own ideas and I always learn new things down the road. This will still take me some time but most of the rendering engine is already written. I'm posting this topic, because I'm quite excited about the Isometric Rendering Engine which I wrote in the past 8 hours. Or maybe it is just because I didn't sleep at all. So I have created a test map of 4096x4096 tiles, each tile being 64x32 pixel in size and ran it on fullscreen on my crap laptop. And I surprisingly get 60 fps. This is written in webgl and I'm sure it will be quite easy to port this to PIXI and Phaser too. I also have a canvas based renderer, which is slightly slower. It was quite a pain to figure out the correct math for my shaders but it seems to work fine so far. It would be really awesome if you guys could test out the map on the following link and maybe report back your fps, so I can be sure that this works on more than only my own laptop. http://mokgames.com/playground/isogl.html (might take some seconds to load because it's creating a huge tilemap during load) Things I want to add next: * Animated Tiles * Layering Quote Link to comment Share on other sites More sharing options...
James Cat Posted August 21, 2015 Share Posted August 21, 2015 I get 58-60fps pretty consistently on firefox on mac book air (2011) great work! Quote Link to comment Share on other sites More sharing options...
Sebi Posted August 21, 2015 Author Share Posted August 21, 2015 I get 58-60fps pretty consistently on firefox on mac book air (2011) great work! Sounds great! Hopefully gonna keep that up as soon as there are more than just 1 layer and animated tiles. Right now I'm doing 3 texture lookups in my shader, but I want to reduce the amount to just 2 lookups. If anyone knows a pretty fast diamond/isometric hit test algorithm, then please let me know. Quote Link to comment Share on other sites More sharing options...
eyp Posted September 6, 2015 Share Posted September 6, 2015 Same here, 57-60fps... but just realized that is the same config that the James Cat one... Firefox/Chrome, MacBook Air 2011 Quote Link to comment Share on other sites More sharing options...
Sebi Posted September 17, 2015 Author Share Posted September 17, 2015 Thanks for letting me know, eyp. It's really interessting that you guys get decent fps on firefox. For me it's always the slowest compared to IE and Chrome. IE only gets worse than FF as soon as there are a lot things to render. Here are 2 screenshots of the current state of the editor: Basically, you can work on different views which has quite a few reasons. 1. I want to be able to edit a map on different layers at the same time. 2. I want to be able to view what other people are doing on the map. 3. I want to easily copy & paste or edit maps on different locations. Most of it is already programmed, so maybe there can soon be a beta. Quote Link to comment Share on other sites More sharing options...
LordofLolcats Posted October 4, 2015 Share Posted October 4, 2015 Hello there, Using Mozilla/5.0 here (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0 on Windows 7.I'm around 38/45 FPS. I have a shitty PC but it's pretty smooth. Keep the good work Quote Link to comment Share on other sites More sharing options...
mattstyles Posted October 11, 2015 Share Posted October 11, 2015 Chrome on a newish retina macbook pro, nice, smooth 60fps. Sometimes the retina thing screws rendering things up, but, solid as a rock! Good job! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 28, 2016 Share Posted January 28, 2016 I suggest you to use the same approach as https://github.com/pixijs/pixi-tilemap , separate rendering part from culling and editor logic. Basically, every time you need to add/remove tiles to screen, you 1)clear tilemap, 2)calculate which tiles do belong to new screen 3) re-calculate buffers. Also, I hope your tiles have centers at even points, (i+j)%2==0 and corners at odd points, (i+j)%2==1 , that way tile's center coordinate on screen is x=i*w, y=j*h, where w and h are half-width and half-height of tile. That coordinate system is the best for isometric view. Please dont try to make Age of Empires For heights you can store z-coord for every center and corner, that way your map will be divided to triangles and it will be easy to render it. I can help you with that project if you make it open-source! Quote Link to comment Share on other sites More sharing options...
Sebi Posted January 29, 2016 Author Share Posted January 29, 2016 Hey Ivan, thanks for the feedback. This topic is quite old. I was really busy with uni and work (freelancing) in the past year. Pretty much got a 50-60 hour work week. My renderer works differently. It automatically culls the frustum and just needs to draw 1 single quad. It's pretty much the fastest I came up with. The map itself is a simple texture. Each pixel represents 1 tile. The red channel is the x and the green channel is the y for the tile position in the spritesheet. The blue channel can either be 0 or 1, where 1 means that the tile is animated. Animated tiles animate over y, y+1, y+2 and y+3. I have no intention to support depths. Anything that can overlap the character, like the character standing behind a tree, shall just be a simple sprite in a spritebatch traveling with the character. Here is an example (not too optimized) and ignore the fog of war around the cursor LOL! I was just experimenting. http://mokgames.com:3000/editor/map/wsji18d00c064e3eb01b346121f577f52821 This is the spritesheet for the demo. The first water tile can be animated and then loops over those 4 water tiles. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.