GLBasic forum

Codesnippets => Code Snippets => Topic started by: Wampus on 2012-May-25

Title: Isometric look code
Post by: Wampus on 2012-May-25
Isometric look - code and some notes

(http://i904.photobucket.com/albums/ac242/wheeethefibble/webpics/isometric.jpg)

You can download a compiled sample app here: http://www.mediafire.com/file/sr8z51bbwe8d96f/isometricdemo.app.zip (http://www.mediafire.com/file/sr8z51bbwe8d96f/isometricdemo.app.zip)
Instructions for the compiled app here: http://www.glbasic.com/forum/index.php?topic=8151.0 (http://www.glbasic.com/forum/index.php?topic=8151.0)

Attached to this post is the source code.

There isn't much notation at all about what does what. I used TexturePacker for packing the textures (exporting as Gideos format). The layers of blocks were made with SimpleTileEditor. I wasn't intending this for general release, just a proof of concept after I had the idea. Sorry if the code is not very accessible.

[attachment deleted by admin]
Title: Re: Isometric look code
Post by: MrTAToad on 2012-May-25
I'll see what it's like on Android :)

Its not bad at all - it could be a good alternative to 3D
Title: Re: Isometric look code
Post by: erico on 2012-May-25
Its not bad at all - it could be a good alternative to 3D

Yep, it would be nice to have a solution for sprites too or maybe diagonal blocks.
Maybe the engine can be adapted to work the same way on a kind of ´voxel´ sprite?
just some thoughts, I read the code later to catch an idea.
Title: Re: Isometric look code
Post by: Wampus on 2012-May-25
A sprite function was something I was going to put in but didn't have time yesterday. Shouldn't be too hard though. I have the photoshop template ready for constructing them. I don't have much knowledge about real voxels. However, there are some more ways the routine can be optimised.

I tested the routine on Android and was surprised at how quick it was on weaker devices. Because of that I am now intending to improve the engine and create a basic game with it. Fun stuff.
Title: Re: Isometric look code
Post by: fuzzy70 on 2012-May-26
Love the effect Wampus, Am working on an Isometric routine myself although nowhere near as smart looking as yours  :nw:

Lee
Title: Re: Isometric look code
Post by: erico on 2012-May-26
...Because of that I am now intending to improve the engine and create a basic game with it. Fun stuff.

Please DO! :good:
Title: Re: Isometric look code
Post by: bigsofty on 2012-May-29
Little late to the party but this looks very nice, it's screaming for some sort of RPG or turn based game. Well done!  :good:
Title: Re: Isometric look code
Post by: MrTAToad on 2012-May-29
Or some improvement on Minecraft!
Title: Re: Isometric look code
Post by: Albert on 2012-May-29
I've played a lot of this code.
Added vertical camera tilt, fixed half bricks topside render problem and added shade (press SPACE to toggle)

download: http://dl.dropbox.com/u/292449/glbasic/iso/isometricCODE.zip

(http://dl.dropbox.com/u/292449/glbasic/img/iso_shade.jpg)
(http://dl.dropbox.com/u/292449/glbasic/img/iso_wo_shade.jpg)
Title: Re: Isometric look code
Post by: erico on 2012-May-30
gasp cough :O
I guess I will just pack up and move to the country side and go plant potatoes...

...really great feats coming from this!
Title: Re: Isometric look code
Post by: Albert on 2012-May-30
We want an editor!
Title: Re: Isometric look code
Post by: Albert on 2012-May-30
Android version: http://dl.dropbox.com/u/292449/glbasic/iso/glbasic-debug.apk (http://dl.dropbox.com/u/292449/glbasic/iso/glbasic-debug.apk)
Rotate: touch and drag or fling
Zoom: touch the left side of the screen and drag up/down
Toggle shade: touch the upper-left corner of the screen
Title: Re: Isometric look code
Post by: MrTAToad on 2012-May-30
Runs very fast on my Android phone, although the screen size was set to be something larger than 320 x 480 :)

Title: Re: Isometric look code
Post by: Albert on 2012-May-30
I've made a simple editor (using my IMGUI library)

Download for WIN32: http://dl.dropbox.com/u/292449/glbasic/iso/isometricEditor.zip (http://dl.dropbox.com/u/292449/glbasic/iso/isometricEditor.zip)
Download for Android: http://dl.dropbox.com/u/292449/glbasic/iso/isometric-editor.apk (http://dl.dropbox.com/u/292449/glbasic/iso/isometric-editor.apk)
With this large map Android version is running with lower FPS here when 'shaded' enabled, and running with full FPS if I disable it (Samsung Galaxy S), use the controlls on the window named 'settings'.

(http://dl.dropbox.com/u/292449/glbasic/img/iso_editor.jpg)
Title: Re: Isometric look code
Post by: metzzo on 2012-May-30
Hey!

I wanted to see if GLBScript is capable of compiling and running this nice piece of code. Compiling was no problem and for executing I had to fix some bugs (mainly related to POLYVECTOR)

Here is the running example: http://programming-with-design.at/files/GLBScript/Isometric/GLBFile.html (http://programming-with-design.at/files/GLBScript/Isometric/GLBFile.html)
Sadly Firefox is really slow, but Chrome seems to be the fastest (InternetExplorer does not even start...)
Title: Re: Isometric look code
Post by: Albert on 2012-May-30
"Uint8array is not defined" error on my Android stock browser

Tapatalk 2-vel küldve az én GT-I9000-ről
Title: Re: Isometric look code
Post by: metzzo on 2012-May-30
Yes I know. Uint8Array is used by the file functions... nothing much I can do against it because file commands really depend on that (Thats the reason why it doesn't work on IE, IE also has no Uint8Array implemented)

Try using Chrome for Android, maybe this browser supports it.
Title: Re: Isometric look code
Post by: Wampus on 2012-May-30
 :happy:

Albert that shading adds so much visual appeal. Fantastic job on the editor too. You've really made the code your own.

Re: the drop in performance when shading is enabled, I get that on the Galaxy S2 as well. If the S2 can't handle it smoothly then I think it should be considered too much for Android in general. However, at a much larger cost in texture memory (could be anything from 3-9 times) it would be possible to get something relatively smart by adding shading to tile textures directly. It wouldn't look as nice or be as flexible as your example but performance would be the same as non-shaded. Alternatively, at something approximately 2x the performance cost, shaded texture shapes could be added over drawn tiles. This would still give better or equivalent performance to a popular game like Epic Astro Story but the result would look and feel so much more...special.

Coolo performance may be poor on Firefox but even still, I was very excited to see GLBScript working like that.
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-01
Thanks.
I would love to see some gameobject moving in this isometric world. Do you have any progress?
I feel it a little bit like in wonderfl.net: somebody shares a good code, then some folks fork it.
Did you mind if I use your code in one of my game? I have got some new ideas.
Title: Re: Isometric look code
Post by: erico on 2012-Jun-01
What a great job you guys are doing!

It is wonderful when people share their code and it gets revised by others.
IMHO It does feel like a community attempting to self improve on the fronts. Fells like team work.
Congratulations guys! :good:
Title: Re: Isometric look code
Post by: Wampus on 2012-Jun-01
Thanks for encouragement Erico :)

Albert no progress but I've just started National Game Development Month so something is bound to happen. :)
Title: Re: Isometric look code
Post by: Schranz0r on 2012-Jun-02
you guys can make a like Minecraft game for handhelds :D
Ready to kick some a*s :D
Title: Re: Isometric look code
Post by: djtoon on 2012-Jun-03
can you post the code on mediafire? and not dropbox ? the dl isnt working
Title: Re: Isometric look code
Post by: Wampus on 2012-Jun-03
Re: Erico's comments about Voxels, I found a 50 page thread about creating a voxel engine in Unity3D. Lots of info: http://forum.unity3d.com/threads/63149-After-playing-minecraft... (http://forum.unity3d.com/threads/63149-After-playing-minecraft...)

I have sort of bad news from my end. While working on an alternative shading routine on Friday that would work fast enough on Android I wrote a list of what would be needed to get a decent game engine working. I realised the amount of code needed to get a finished game by the end of June made it a bad choice for NaGaDeMo (http://nagademo.com/). Well, I couldn't get anything great fun to play and nicely polished done in that time. Trying to do that might actually squander the potential of this isometric look. Instead I'll be finishing the (free version) Chaos remake this month.

:whistle:
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-04
Forget Minecraft.
If you have performace problems with large maps, see Bastion:
http://www.youtube.com/watch?v=VZAuKkv4eZE

You can make a tactical war game like FF Tactics or Ogre Tactics
http://www.youtube.com/watch?v=CCL2HxPuXQA

Or a sideview platformer like Fez:
http://www.youtube.com/watch?v=e6BU9rVUvgk
Title: Re: Isometric look code
Post by: erico on 2012-Jun-04
you guys can make a like Minecraft game für handhelds :D
Ready to kick some a*s :D

I would not doubt, they sure could.

But wouldn´t  an isometric ´minecraft´ get a little confusin on the underground parts?
Even the ´tatics´ game sometime seem like had a lot of efforts on level design because of that.

I remember one 3d itteration of Xcom (a remake) that the 3d levels were too confusing for me to play.
It was done kind of pure 3d, but I could never get a sense of location/space, the possibility to zoom and rotate to any degree made things quite hard on my end.

Back on minecraft, I do get lost underground a few times hehe, but the first person helps a lot getting about.

Performance wise, I remember Powermonger ( :nw:) as well as Populous, had a limited view port, probably a performance issue, specially on powermonger side as it was a 3d engine with kind of dinamic texture map.

Just some thoughts that leads to nothing hehe.  :P
Title: Re: Isometric look code
Post by: Wampus on 2012-Jun-04
That Fez game has a unique look. Doing something new like that - feels different and plays different, is what I want to do myself eventually.

I love the creativity of Minecraft. Some elements of that game will become ubiquitous. Unfortunately, like Erico says, a Minecraft clone wouldn't work well with isometric project. I've seen attempts to do it on YouTube and wondered what the devs were thinking. An isometric take on Dwarf Fortress might be worth thinking about though. I know many people have been wanting/pondering such a thing.

Incidentally, regarding performance I got half-way to completing a shading engine that would, at most, double the scene rendering cost. Initially I found that the way I was planning to do it would require 1296 32x32 blocks of texture memory to render the shadows for top-down sides. I managed to reduce that to 6 16x16 blocks by rendering each corner separately without loss of image fidelity. Not often possible to reduce memory usage by a factor of 216 so that felt good. :)
Title: Re: Isometric look code
Post by: erico on 2012-Jun-04
...An isometric take on Dwarf Fortress might be worth thinking about though. I know many people have been wanting/pondering such a thing.

 :offtopic:
http://www.bay12forums.com/smf/index.php?PHPSESSID=cb155653655e00c8efd6718c42102cf1&topic=106497

These guys are doing a great job that exact way.
Try and get a version of DF called LazyNewbPack Advanced

It has that plus a lot more to make it really wonderful. Be carfull though, DF can ruin your life :P
Such an amazing work DF is, I never saw anything even remotely close to it.
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-07
I've made some optimization and some code clean-up in the last two-three days.
Interestingly the major bottleneck of the code was here:

Code: GLBasic [Select]
FUNCTION coordvalid: x,y,l
        IF x<0 THEN RETURN FALSE
        IF x>xmapd-1 THEN RETURN FALSE
        IF y<0 THEN RETURN FALSE
        IF y>ymapd-1 THEN RETURN FALSE
        IF l<0 THEN RETURN FALSE
        IF l>layers-1 THEN RETURN FALSE
        RETURN TRUE
ENDFUNCTION

putting all the IFs into one row made a huge performance boost, also changing the parameters to integer made another one:

Code: GLBasic [Select]
FUNCTION coordvalid: x%,y%,l%
        IF x<0 OR x>xmapd-1 OR y<0 OR y>ymapd-1 OR l<0 OR l>layers-1 THEN RETURN FALSE
        RETURN TRUE
ENDFUNCTION

I've also added the abilities for slopes, but the shade is wrong on them, also the face culling for blocks next to them :)
Made some preparation and optimization for a Fez like game. Also expanded the debug and the setting with some useful stuff.
Also added a incredible slow wireframe mode.

Download source and binary: https://dl.dropbox.com/u/292449/glbasic/iso/isometric.zip (https://dl.dropbox.com/u/292449/glbasic/iso/isometric.zip)
Download directly for Android: https://dl.dropbox.com/u/292449/glbasic/iso/isometric_optimized.apk (https://dl.dropbox.com/u/292449/glbasic/iso/isometric_optimized.apk)

(https://dl.dropbox.com/u/292449/glbasic/img/iso_moresettings.jpg)
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-07
Oh there is some texture mapping problem:

The topgrass is missing from some sides, depending how the triangles generated
(https://dl.dropbox.com/u/292449/glbasic/img/iso_slope_error.jpg)
Title: Re: Isometric look code
Post by: Slydog on 2012-Jun-07
Ha, this is so well done I was about to ask how you enabled the wire-frame view in 3d mode!   :-[

Looking amazing, keep it up, can't wait to see how far this will go!
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-22
Somehow related and very interesting stuff: http://www.ludumdare.com/compo/2012/06/18/water-is-fun/
http://www.youtube.com/watch?v=tBM-X7Cd50Y
Title: Re: Isometric look code
Post by: MrTAToad on 2012-Jun-22
That is good - does it use your GUI system ?
Title: Re: Isometric look code
Post by: Albert on 2012-Jun-22
Nope. But seems similar, maybe this is IMGUI too.
Title: Re: Isometric look code
Post by: MrTAToad on 2012-Jun-22
Could well be :)
Title: Re: Isometric look code
Post by: Hatonastick on 2012-Jul-04
The android version runs pretty well on my Toshiba tablet.  Hovers around 40fps which isn't too bad considering this is only a mid-range tablet.  Looks pretty darn good too.  Now we just need someone to use this in a game. :)

I have to ask though.  Am I the only one (on my PC as well as Android) who gets a strange almost shrink/expand effect when you spin the scene around?  It also doesn't quite look right from some angles.  Would this have anything to do with the fact that both screens in use are widescreen, or is this due to something akin to the fish-eye effect?
Title: Re: Isometric look code
Post by: erico on 2012-Jul-04
I too, get a strange perspective effect when seeing things front-wise.
The bottom part seems smaller then the back part, which in normal 3d perspective, should be the opposite, while on the orthogonal view, it should be perfect parallel.

I first though my eyes were playing a joke to the point I had to use a ruler :P on screen to check.

But it sure does not detract in anything this amazing engine.
Title: Re: Isometric look code
Post by: Hatonastick on 2012-Jul-05
For sure!  It's absolutely brilliant!
Title: Re: Isometric look code
Post by: Wampus on 2012-Jul-29
It seems many people will see a scene as having a smaller front end than what is behind. A couple of people have mentioned this to me. We're all accustomed to seeing 3D perspective with depth correction I guess. :)
Title: Re: Isometric look code
Post by: Albert on 2013-Apr-22
Now It's working on HTML5 too: https://dl.dropboxusercontent.com/u/292449/html5/Iso/isometricdemo.html
Strange fact that I had to remove DRAWLINE from the IMGUI codebase to run properly (There was 4 lines in the window's title). Drawline is too slow stuff?
Title: Re: Isometric look code
Post by: erico on 2013-Apr-22
Great!

I get a few few black lines when angles are short. Works perfect, just like the other one fish html you compiled. :good:
Title: Re: Isometric look code
Post by: CptnRoughnight on 2013-Apr-22
That's great! works nicely on my Pandora!
Title: Re: Isometric look code
Post by: halycon on 2013-Jul-28
What is the math for rotating an isometric view? Trying to do something similar in  w/C++ and SFML 2.0 but I only end up rotating my texture with respect to the plane of the screen.
Title: Re: Isometric look code
Post by: Wampus on 2013-Jul-30
Roughly speaking its all Sine and Cosine co-ord rotation for working out the dimensions and angle of a single block and then drawn in strips from back to front using the calculations for the one block multiplied to work out how far up/down, left/right to place whatever block is being drawn.

If I was to do this again with a mind to making a possible game engine I would have made the code simpler to understand and use.
Title: Re: Isometric look code
Post by: erico on 2015-Aug-11
I just re-tested the html code and when I change debug render mode to the other options, the debug window screams "skiping loop frame - too slow" for pages and freezes.
Did something web browser related change? I´m running updated Chrome on win 7 64b N.

abs.