AuthorTopic: [WIP]Isometric Game Mock Up  (Read 10288 times)

Offline StevenH

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

[WIP]Isometric Game Mock Up

on: April 01, 2008, 06:28:53 pm
First off, don't ban me because of the blatant Zelda Oracle of Time / Seasons intro dungeon tile rip, it's what I'm using in my current engine to test it out while I did some proper better tile graphics, I am working on some better tiles...

I think I better let you know the limitations on my game engine I'm working on (otherwise any crits may be useless)

1) Each tile is limited to 4 colours from a palette of 16 (any 4 colours can be used, and the first colour can be transparent, but not always)
2) Each tile is edited as an 8 x 8 pixel image (compressed into 16 bytes when stored in memory), but translated to an isometric tile when displayed
3) The output device is currently targeted as the DS, but I may work on a PC version as well (with the same limitations).

The 16 colour palette that I'm using is the generic one from the post by Arne.  I've been working on this engine off and on (mainly off) for a while now (there's a test engine on my PC that was originally written to work in DirectDraw 6!).  The main thing that was stopping me from continuing with the project, apart from lack of time, was the lack of good graphics, I've found that I've got some free time now between work and thought I'd attempt to get the graphics done, but my attempts have not been fruitful (so far I've re-ripped the graphics from Zelda and re-did a small section of the intro map / animation.  Now comes the fun part, actually doing my own graphic tiles, and well I need some serious help in making them look good - so I'm on my knees pleading here, help me  :noob:

So here's the 2 mock-ups I've got:

First the ripped tiles from Zelda that have been changed into iso tiles by hand in Paint Shop Pro into an iso scene using the same style output as my game engine:


No CnC on this one, it's a total rip, but it shows you what the walls should be like when I get around to the graphics

And here's the piece that I want some CnC on:

Again, please ignore the Zelda ripped stuff, it's still there as a reminder of how good those tiles look when rendered in my iso engine style.

Please be gentle, and any help or crtis given will be taken on board in the next version of the tiles...

Offline fil_razorback

  • 0010
  • *
  • Posts: 309
  • Karma: +0/-0
  • Captain of a ship without a name
    • View Profile
    • Partisan - Tactics Battles

Re: [WIP]Isometric Game Mock Up

Reply #1 on: April 01, 2008, 06:37:21 pm
If I understand well, the only bit you want us to criticize is the bottom-most floor pattern, right ?

I do think that this one tiles well but fails at being a pavement tile. It looks much more like a bland gray carpet.
The zelda tiles have a lil' bit of volume while yours are totally flat and I think that this is what you should work.

Also, I'd like to point something about the zelda rip iso render so you do not do the same mistake. It totally lacks shading.
It lacks it so much that at first sight, I didnt understand the floor tiles as floor tiles but as the bottom side of a Parallelepiped whose side sides would be the wall tiles.

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: [WIP]Isometric Game Mock Up

Reply #2 on: April 01, 2008, 07:56:34 pm
Your tile would look much nicer and make more sense if there were distinct stones rather than formless blobs. If you can't break the grid, embrace it! ;)

Also, you need a light source! When you decide on one, I suggest you darken only the very edge of the stones. Without shading, it lacks volume, but don't shade it so much that it doesn't look flat enough to walk on.

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #3 on: April 01, 2008, 08:02:36 pm
Problem? You took a tile and skewed it instead of drawing it as isometric from scratch... or at least, that's what it looks like.

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: [WIP]Isometric Game Mock Up

Reply #4 on: April 01, 2008, 08:04:56 pm
Problem? You took a tile and skewed it instead of drawing it as isometric from scratch... or at least, that's what it looks like.

I think that's how the engine he's using works? That was my impression. But yeah, pretty weak.....

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #5 on: April 01, 2008, 08:20:20 pm
If it's the engine than there's nothing to really critique about it since it completely destroys the original graphics... and since he's not using the original graphics there is no reason to critique them and only the output work from his engine. Either way, don't have an engine do it for you unless it's some experimental stuff... and in that case there's nothing we can do to help.

Offline tehwexxl0rz

  • 0010
  • *
  • Posts: 446
  • Karma: +0/-0
  • Swing the bat.
    • ianwexl0rz
    • https://pixeljoint.com/p/15996.htm
    • View Profile
    • Ian Wexler | Game Developer

Re: [WIP]Isometric Game Mock Up

Reply #6 on: April 01, 2008, 08:35:28 pm
If it's the engine than there's nothing to really critique about it since it completely destroys the original graphics... and since he's not using the original graphics there is no reason to critique them and only the output work from his engine. Either way, don't have an engine do it for you unless it's some experimental stuff... and in that case there's nothing we can do to help.

Hmm? But he drew the original tile! I agree that the distortion is bad, but it's not like the computer created the isometric tile from scratch. It's his design.

Offline Dusty

  • 0100
  • ***
  • Posts: 1107
  • Karma: +0/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #7 on: April 01, 2008, 08:48:34 pm
Ya, I knew he drew the original tile... but there's no point in critiquing it because they'll never be seen in the end product. All that's going to be seen is the distorted version... so we can't critique the original because it will be pointless, and we can't critique the distorted one because it's skewed so it's hard to critique because we'd have to determine how it will be skewed and such.

Also, in case it isn't... even if it isn't distorted it severely looks it, I think mainly because it's at a double pixel width ratio and really doesn't look all that great.
« Last Edit: April 01, 2008, 08:50:15 pm by Dusty »

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #8 on: April 01, 2008, 08:59:40 pm
Ya, I knew he drew the original tile... but there's no point in critiquing it because they'll never be seen in the end product. All that's going to be seen is the distorted version... so we can't critique the original because it will be pointless, and we can't critique the distorted one because it's skewed so it's hard to critique because we'd have to determine how it will be skewed and such.

you've confused "can't" with "don't feel like" I think.  This is still pixel art and this is a pixel board, even if the input to output change is pretty intense.


I gave this a try using your math, and it made me lol because my first shot really didn't work out well from square to diamond:



Still, you can see what i'm trying to show, which is that you need some more sculpting/shading in your tiles, the lines are too harsh by themselves.  think of it as throwing down some ink outlines, then wetting the page so that they soften and lose priority.
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline Myran

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
    • http://www.myran.com/

Re: [WIP]Isometric Game Mock Up

Reply #9 on: April 01, 2008, 09:08:26 pm
The extreme limitations of the engine is going to make it very hard to do some decent tiles. Why only 8x8 4 color tiles? If your weakest target platform is the DS that's really not needed, the DS can handle a lot more than that. You don't need to go down to 16 bytes per tile, the 4 megs of memory can go a long way even without such limitations.

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #10 on: April 01, 2008, 09:13:07 pm
The extreme limitations of the engine is going to make it very hard to do some decent tiles. Why only 8x8 4 color tiles? If your weakest target platform is the DS that's really not needed, the DS can handle a lot more than that. You don't need to go down to 16 bytes per tile, the 4 megs of memory can go a long way even without such limitations.

the restrictions are a challenge, but i don't think they'll end up hurting.  i say also that you don't go for too many mre colors, as adding will only muddy the issue.
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline Sabata

  • 0001
  • *
  • Posts: 99
  • Karma: +0/-0
    • View Profile
    • TownsLife

Re: [WIP]Isometric Game Mock Up

Reply #11 on: April 01, 2008, 11:21:04 pm
Wait a moment, is this even possible? I mean those iso tiles look a little too good to be just an engine making…. And Adarias you did your isometric view by hand right?

Sorry I am confused here…. And there is not much to say about it, Adarias have shown the idea, more shading.

Offline cave

  • 0001
  • *
  • Posts: 96
  • Karma: +0/-1
  • Strawberries! :3
    • View Profile
    • Colocada

Re: [WIP]Isometric Game Mock Up

Reply #12 on: April 02, 2008, 12:41:47 am
The idea is, the tiles are drawn out as regular squares, and the engine rotates and deforms them into an isometric perspective. Pretty nifty in theory, but I really don't see the point as opposed to just drawing the tiles already in the correct perspective?

Offline StevenH

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #13 on: April 02, 2008, 01:14:16 am
Sorry for not getting back sooner to this thread, I'm at work at the moment, and was a little shocked at the number of replies in the short amount of time it's been open.

@fil_razorback:

Yes it's the bottom part of that screen that I wanted the crits done on, as for the shading, I agree there is none, but it's a limitation I'm living with until I get past the initial OMG I've got graphics to do...

@tehwexxl0rz:

Yeah I will be using a light source, probably top middle right (75% across the screen from the left), but I need to get the basic shape sorted first, which was the original idea of the tiles, but since I only really re-started this project yesterday, I am not expecting a masterpiece from day one, but something I can work towards over time.

@Dusty:

I drew the tiles, and want them to look good in both 2D (so that I can get better at 2D pixeling) as well as the iso output (using the engine output) at the moment everything I've uploaded has been done in 100% Paint Shop Pro XI, or GIMP (when I've got time during my breaks on my laptop).  I'm also a programmer so my tiles are currently what a pixel-blind person would do, I want and know I can get better, but I would like to get started on the pixels and get better at it, than sit around at home / work and say I *could* do that, if I had the time...

@Myran:
The restrictions I listed are like that for a reason - memory on the DS is not just a 4MB lump, it's split into segments for the video (2D, 3D, tiles, etc) and sound system, and every byte saved is an extra byte that can be handed over to the sound or video system.  The graphics engine that I am looking at is a pure software engine and is not using any of the DS's hardware to assist in the display of the tiles, thus I need it to be very space and processor efficient, if the graphics engine is taking 75% of the frame to draw a screen, then the game logic and creature AI have very little time to work with (DS is fixed @ 60 fps, and thus games need to run as efficiently as possible on it).  This is only the first generation of the game engine, I already have plans for the next generation, which is one of the reasons for the 16 colour limit - the 16 colour generic palette that Arne provided has 159 50% alpha colours, this is still less that the 256 colour limit of the DS's frame buffer mode (there is a 15bit mode, but that mode is too memory hungry for me).  As I say to people at work, there is method in my madness for this project.

@Sabata:
Those iso tiles were done by hand in PSP, but they have been done using the same graphic logic as the engine I'm writing.

The base iso tile I'm using is not the same as any of the iso tutorials for pixel artist - 2 pixel top / 3 pixel top - it uses 4 pixels at the top and bottom, and has a 2 pixel point at the sides:

Code: [Select]
----0000----
--00000000--
000000000000
--00000000--
----0000----

If you reduce that tile down by one row / column until your left with one "sub-iso tile" you will see that it's a line of 4 pixels, this is the basis of the engine I'm using.

Take the tile graphic:

Code: [Select]
12
34

this is then displayed as:

Code: [Select]
----1111----
--33332222--
----4444----

Hope that helps explain what my engine is doing at runtime.

@ndchristie:
OK if that's not a good first attempt at this, then I must be really bad at working on pixeling stuff... I'll have a look and see if I can work out what you actually did there, apart of make my head spin and kick itself about 30 times...
I think I may have to blow up that image you did and study it - I think my attempt looks like a crack in concrete, and yours looks like an oil painting on the floor, I see I still have a few things to learn about pixeling, including shading.

@cave: (just caught this as I was typing this reply)
The point is I can store a tile in 16 bytes of memory, as opposed to the 512 (assuming that I'm storing 256 colour image) and wasting 50% of the space in un-needed dead-space pixels, the amount of space used goes to 1024 bytes for one tile if I'm using 16 bit colour data.  Also I'm British and as per most history when it comes to computers, we can't afford lots of memory (look up the story of the first spreadsheet for the PC that ran only on PC's with 640kb of ram, when most PC's came with only a 512kb ram)  :D

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #14 on: April 02, 2008, 01:50:24 am
but I really don't see the point as

90o rotating rooms?  all i can think of.
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline tocky

  • 0011
  • **
  • Posts: 503
  • Karma: +0/-1
  • doublepostokrates
    • View Profile
    • my blog

Re: [WIP]Isometric Game Mock Up

Reply #15 on: April 02, 2008, 04:28:52 am
I think the problem is that you can't see what the tiles are gonna project to while you're making them. The normal rules of pixelart don't necessarily apply. Adarias's ndchristie's tiles work better because he made them in the isometric perspective, so he didn't have to guess what they'd look like.

EDIT: I had an image up here before, but I didn't test some of the stuff - some of it was guessing, and some was wrong for sure. I've taken the picture down, I posted something better below.
« Last Edit: April 02, 2008, 08:10:36 am by tocky »

Offline sharprm

  • 0011
  • **
  • Posts: 660
  • Karma: +0/-3
  • INTP/INTJ
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #16 on: April 02, 2008, 05:01:21 am
I think I get what you are doing for bottom tiles - rotate the tile 45 degrees, then stretch horizontally to 200%. It looks distorted and the 'widepixels' don't fit with the square pixels on the vertical walls. From what you've said, I'm not sure I appreciate the motivation for doing this.

Are going to make it so the room can rotate in 3d as Adarias said?

If not (the room has a fixed view) wouldn't triangular tiles (don't need to be distorted) be better? I think there would be no wasted space, or can't that be done? Also, you could flip the triangles vertically and horizontally, so that one square tile is only made of one triagular tile. I think that would use half the area (a^2 vs 1/2*(2a^2)^(.5*(2a^2)^.5)/2  for the floor tiles, but probably cost more for the walls. I'm not a programmer though.
« Last Edit: April 02, 2008, 05:15:46 am by sharprm »
Modern artists are told that they must create something totally original-or risk being called "derivative".They've been indoctrinated with the concept that bad=good.The effect is always the same: Meaningless primitivism
http://www.artrenewal.org/articles/Philosophy/phi

Offline tocky

  • 0011
  • **
  • Posts: 503
  • Karma: +0/-1
  • doublepostokrates
    • View Profile
    • my blog

Re: [WIP]Isometric Game Mock Up

Reply #17 on: April 02, 2008, 07:12:11 am
Okay, I did some more testing. Here are some rules that should hold true for making square tiles and then blowing them up into isometric ones:

Horizontal and vertical lines will work. 1pixel diagonal lines only work for the longer diagonal: they break if you try to use them for the short one. Thicker diagonal lines almost always work.

This is a pretty smart/weird build for isometric stuff. (seriously, naysayers - you guys are pixel artists; you should want to draw stuff under weird restrictions.)  I've been wondering for a while now, though - how are iso tiles usually stored?
« Last Edit: April 02, 2008, 09:10:25 am by tocky »

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #18 on: April 02, 2008, 12:32:53 pm
yeah tocky hit on the one big thing which is no diagonals TL to BR, only the reverse.

I didn't draw in ISO though, i pixelled the square quickly and then transcribed the diamonds without making any changes (which is typically how these will be done i think).  If I'd done the diamonds from the start I'd have made them much smoother and without those broken lines.
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline Ben2theEdge

  • 0011
  • **
  • Posts: 503
  • Karma: +1/-0
  • I'ma drink mah coffee!
    • View Profile
    • My Deviantart Gallery

Re: [WIP]Isometric Game Mock Up

Reply #19 on: April 02, 2008, 01:27:04 pm
I did an entire project at my work where we had an actual isometric tile engine. Just as a word of warning, it started off frustrating and over the next six months became absolutely infuriating. Unless you have a good technical reason that you need to render it that way, such as being able to rotate or have 3D or something, it is SOOOOOOOOOOO much easier and faster to just draw everything at an isometric angle using regular square tiles, and place it all by hand rather than have a computer calculate it for you. Again, if you have a good technical reason to do it this way, go for it, but otherwise my experience is that it's faster and yields better results to draw what you want to see directly instead of trying to use math to draw it for you.
I mild from suffer dislexia.

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #20 on: April 02, 2008, 01:44:26 pm
I did an entire project at my work where we had an actual isometric tile engine. Just as a word of warning, it started off frustrating and over the next six months became absolutely infuriating. Unless you have a good technical reason that you need to render it that way, such as being able to rotate or have 3D or something, it is SOOOOOOOOOOO much easier and faster to just draw everything at an isometric angle using regular square tiles, and place it all by hand rather than have a computer calculate it for you. Again, if you have a good technical reason to do it this way, go for it, but otherwise my experience is that it's faster and yields better results to draw what you want to see directly instead of trying to use math to draw it for you.

yeah, there's a reason that partisan is handled in undistorted blocks as well.

I think you should go for rotation though, one of the tough things about my project is designing levels that won't offer "fake" hiding places
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline tocky

  • 0011
  • **
  • Posts: 503
  • Karma: +0/-1
  • doublepostokrates
    • View Profile
    • my blog

Re: [WIP]Isometric Game Mock Up

Reply #21 on: April 02, 2008, 02:02:14 pm
Sorry, ND (I don't know what to call you anymore  :crazy:) - but I was only guessing. From my time spent messing though, it was easier, for me at least, to do an iso mockup and project it back.
« Last Edit: April 02, 2008, 02:42:40 pm by tocky »

Offline StevenH

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: [WIP]Isometric Game Mock Up

Reply #22 on: April 02, 2008, 02:47:10 pm
@Tocky:
The way I've seen iso tiles stored in the past is the way you have them in that pic, and sometimes I've seen them be stored in the following way:



And there's some other storage formats I've seen, where the images are stored as blocks of arbitrary shaped squares that match the rough idea of how the object looks in the 2.5D isometric world.

And as you said at the end of your post to the nay sayers, this is a weird way of doing things and looking at some of the challenges there has been weirder systems out there with the limitations.  If I was to do the engine in the normal DS / GBA ISO style it would be boring, and look like every other iso game out there, I'm going for a style here that means creative thinking is needed on the part of the graphics, so that you keep in mind the limitations of the system , and create an image that looks nice, but is looking like it was made up of tine single colour iso-cubes.

@all:
The engine I'm working on is currently version 1 - and I'm working on it at a paper level at the moment, so these mock ups are helping to shape the engine into something better.  One thing that I have on the feature list for version two is the ability to spin the scene around to look at it from 1 of 4 angles, as well as using that 165 colour palette i mentioned before (by alpha blending the edges of the internal pixels you can create smoother looking floor tiles I'll do a mock up in a moment that shows what I mean).

Another reason for doing the tiles this way is map editing - I don't need a complete iso map editor, i can just use a 2d map editor to put the floor layout down, and then using lookup tables apply a specific wall tile to the walls at run time, again increasing the time to develop new maps, as I don't need to worry about making the walls seamless at design time, as long as they look good at run time I'm happy.  Latter on I will do a proper level editor that allow you to select the wall for the area, but for now a 2d tile editor will do.

A quick mock up anim of what I mean about the smothing of the "pixels" in the next version of the engine (this will not be coded for a while yet)

I just spotted that I did not update that large iso tile clump one in the bottom left...
« Last Edit: April 02, 2008, 03:10:57 pm by StevenH »