AuthorTopic: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!  (Read 45744 times)

Offline Facet

  • 0010
  • *
  • Posts: 425
  • Karma: +3/-0
    • View Profile
Awesome construction diagrams Cyangmou :y: :y:, but there are some problems with some of your labelling and explanation:

In ¾ RPG as axonometric: height (Y) would be equally compressed as depth (Z); circles become ellipses. It'd be analogous to isometric without lateral rotation. You've confused the angle overhead (45° in both (true) iso & ax. ¾) with the angle of the X (width) & Z axes on the picture plane (both 30° in iso, 90° & 180° respectively in ax. ¾). Axonometry is not defined by the angle overhead; but of the scaling (via foreshortening) of the axes due to rotation.



Axonometric ¾ can't be described as isometric despite sharing the angle overhead because the axes are not equally scaled. Iso. is angled 120°/120°/120° between axes (on the canvas); and so equally scaled along each. Whilst ax. ¾ would be 90°/90°/180° (clockwise) with one unscaled axis, making it dimetric.

2.5D is just a general term for 2D gameplay in a 3D enviroment. This is true of oldschool RPGs both iso. and otherwise, as well as the trend of modern polygonal games with navigation locked to 2D like LittleBigPlanet or Street Fighter IV.     

What I was trying to explain earlier is the distinction between ¾ RPGs that do consistantly scale proportionally and consequently could be described as axonometric, such as Sword of Mana; and those that don't scale either axis and should be termed oblique such as Final Fantasy VI. Looking at a variety of popular titles the majority fall into the latter category or else favour it and scale indiscriminately like most 8-bit titles where scaling might be untenable in some situations anyway given the resolution.



It took me quite a while to figure out some of the above; a sure sign that I didn't understand it well enough myself ;D. But I like a challenge (and after pretty much re-learning a lot of stuff) I've been making a proper taxonomy of graphical projection terms; hopefully this should clarify things. I'll be adding some diagrams later but if something's amiss or unclear, let me know. (linked here because it's pretty big)
« Last Edit: June 15, 2012, 04:50:49 pm by Facet »

Offline Grimsane

  • 0010
  • *
  • Posts: 423
  • Karma: +2/-0
    • View Profile
yeah as I said it was more of a ref sheet, and it was more for one particular project and their approach, they were having trouble.

here is more of an attempt at a tutorial, without words, If anyone thinks it needs words just tell me I'll spend more time on it, its just a basic and efficient approach to dimetric ISO, this is at 32x16


I will point out that making a pattern grid like that helps greatly it is an 16x8 grid broken down to show the offset to some degree. If you look at the light colours as rectangles and the dark colours as rectangles you get that checker board, then offset to that you have a checkerboard of hue (magenta & orange in this case) also the grid allows for a convenient palette space :D

if you use this approach you can break it down quite easily into 16x16 tiles, which can be assembled in a map/tile editor Like I showed at the end, this approach is great for using the fill tool to block in fast terrain layouts for mockups especially, then concentrate on making the detail for each tile, and overlap can be used for some effective grid killing and works great for grass and foliage. If anyone thinks these are helpful enough I might tackle another thing slopes

great stuff Cyangmou, I did noticed the typo "ligthing" is presented twice in the lighting method section. one thing I think your tut would benifit from is when it's showing measurement and ratios to have it within a grid for context, it'd be much easier to grasp within the context of game graphics.


Edit:
I'm extremely inexperienced with tiles.
A couple weeks ago I thought I'd give it a shot.
Something I noticed is going up a half step gives more visual difference in height, because of overlap, than going up a full step:
^
those cool tone tiles are pretty psychedelic, and yeah half steps allow much more freedom and definitely add a lot more variety, in that scenario you generally do half step bottom and top pieces and some flexible full height filler generally 2 variations that can tile together works well, there are a few things to be learnt from FFT because it is a great use of pixel level dimetric projection.

what the heck might help people so I did this just now, didn't spend too long but tried highlighting a few things
Quote

SD=standard dimetric, the irregular line looks more organic, and the approach to the corners is varied and effective. the small pink highlighted segment is just to illustrate how much the foliage overlays, a major factor to think about when considering using it in a game is the layering order, I'd encourage a seperate layer for grass foliage and even trees and various environmental props.
« Last Edit: June 13, 2012, 01:18:09 pm by Grimsane »

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage
Wow facet you caused me headache with "Axonometric 3/4 is the same as isometry". You were wrong :) ... I integrated the pretty interesting chart + isometry in the second part of my tutorial and explained why it isn't the same as iso - and I also included why it looks fine. I already have seen this very often in games it obvious doesn't hurt the eyes although it's wrong, that's a pretty amazing observation ;D

I also overworked the layout of part 1 and part 2, now it reads better. And I also changed the labeling, the name of the axis and the color of the axis. changed here and there a sentence and made all a bit better.

@grimsane: will write later something to yours...

part 2 ... the actual one is below
« Last Edit: June 15, 2012, 05:55:25 pm by Cyangmou »
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Facet

  • 0010
  • *
  • Posts: 425
  • Karma: +3/-0
    • View Profile
Wow facet you caused me headache with "Axonometric 3/4 is the same as isometry". You were wrong :)
You've misinterpreted what I've said; not technically the same but from the same angle overhead; that's how isometric is defined in terms of rotation (45° vertically, aprox. 35.264° laterally), the difference in width you've noted is due to the attendant foreshortening due to lateral rotation in isometry. I've already explained that axonometric ¾ is technically dimetric and that the angle overhead (45°) is not the same as the angle from 0° to the lateral axes on the canvas (30°), which defines (true) isometric projection.

Isometric projections are natively foreshortened in each axis; as a result, when rotated to parallel with the picture plane true distances are revealed. Most games ignore this scaling factor because it's not noticeable when everything is aligned to the axes.

Your tree diagram is still presenting isometric projection as being from 30° overhead instead of 45°. Iso. gives a better impression of 3D than ax. ¾ simply because 3 sides of an object are visible concurrently.
« Last Edit: June 15, 2012, 04:48:14 pm by Facet »

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage
was wrong with the length too, but i already exchanged it while you wrote your message... it was because of the angle. Thinking over this was quite a challenge.
the thing with the length would have been wrong because the cubes weren't equally big too. And the method was also wrong.

However now it's right.

Take a iso cube and a 45° axonometric cube and divide the sides by 2. then connect the new points and you'll see the difference in the angle. it's not nice to have a correct 45° axonomeric cube - ugly jaggies.
The thing you pointed out looks really fine but it's wrong. I think because the ~15-18° of the viewpoint are a small enough deviation to look still right.

-and yeah the tree diagramm is still wrong, ... you are right with your 35,...° viewing angle of isometry I should better change this too... the thing with the planes, yes I'll squeeze this also in if I find a nice place  ;D

exchanged the tree example...
« Last Edit: June 13, 2012, 06:46:16 pm by Cyangmou »
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Facet

  • 0010
  • *
  • Posts: 425
  • Karma: +3/-0
    • View Profile
Yeah, I forgot about the slight angle difference in pixel 'iso' too. For the observers: here's another conversation we had for the sake of completion-ism:

Hi Facet,

your diagrams are really good too. Am I allowed to build it in the huge tut (I think some changes in part 1 and part 2 would be great due to your new diagrams) to improve the quality and make it better? It'd definitely help to have all the things together in one place with the same style to make the reading easy, don't you think so?

The difference of "axonometric" and "oblique" 3/4 as you called them are true. I also struggled how to explain this. the oblique method is used in games with a very small resolution (8x8 tiles) to improve readability. Also for small resolutions readability is much more important than a correct perspective.

with 16x16 you have the possibility to make the perspective better. Although most of these games are mixing up "axonometric" and "oblique".
 
Your big perspective diagram is working out the methods pretty good. Although it's a bit confusing for the eye. The content is top-notch. If you allow me to make this also fitting for the tutorial project it'd be great. 
 
Axonometry is defined over the graticule (I am pretty sure that I am right). It doesn't really matter if the axis are overlapping, the angle can be 0° (would be dimetric than I guess). It's just important that all the axes are parallel through the whole image.

Just a short question: as I learned descriptive geometry I learned that the z-axis is the height, x is width and y is depth. Also a friend of mine who created some 3D models pointed out that there the z axis is the width and the y axis is the heigt. What do you think is better/clearer, especially for the tutorial?

Really thanks that you are supporting this project too. I also saw some of your earlier diagrams and I think that we can achieve a pretty clear and good result together.


Quote
your diagrams are really good too. Am I allowed to build it in the huge tut
Of course ;D

It took me a while to figure out what I was missing in the varied (ax./obl.) interpretations of ¾ (I have worked in this projection but I always estimate the height component based on what whatever looks good :lol:) those are the de facto technical terms however. I guess the previous diagrams I made for the forum display this laissez faire approach. Looking at a variety of popular RPGs (including the one's you've listed) I noticed that the large majority are oblique and that it's plainly a concious decision not to scale axes (ie. not a result of a readability choice). Both are 'correct' but certainly oblique is not as realistic.   

Quote
Axonometry is defined over the graticule (I am pretty sure that I am right). It doesn't really matter if the axis are overlapping, the angle can be 0°
Yeah, this is what was confusing me earlier; I'd been taught that no axes could be aligned but in fact that's just for the sake of readability. Axonometry is just defined by the proportional scaling of the axes in a multi-planar projection.

Quote
Just a short question: as I learned descriptive geometry I learned that the z-axis is the height, x is width and y is depth. Also a friend of mine who created some 3D models pointed out that there the z axis is the width and the y axis is the heigt. What do you think is better/clearer, especially for the tutorial?
I used Y for height purely conceptually because in 2D space (when not describing the faces of a 3D object) Y is height & X width.

And thanks, I'll work on the readability of my taxonomic diagram; I know it's a bit of a spiderweb :P. Do you mind if I post this conversion in the public thread? I think this discussion is important for everyone's better understanding.
« Last Edit: June 13, 2012, 06:46:56 pm by Facet »

Offline Seiseki

  • 0011
  • **
  • Posts: 915
  • Karma: +1/-0
  • Starmancer
    • OminuxGames
    • http://pixeljoint.com/p/35207.htm
    • StarmancerGame
    • View Profile
    • Starmancer Patreon
Wow, this is kinda overwhelming..
I think I'll just leave this in the hands of you guys, I can just barely wrap my head around all the terms and angles ;)

Also, why doesn't pixelation have a board for tutorials?
There are so many threads with tutorials, so it would make sense to have a dedicated board. Especially since people might start doing more tutorials that way.

Offline Zizka

  • 0011
  • **
  • Posts: 501
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile
This looks great, downloading. I wish this was all arranged neatly in a pdf though  :y:.

EDIT: Nevermind, I got the links at the beginning.

Do you have more tutorials to download somewhere, Cyangmou? A database of sorts?

« Last Edit: June 15, 2012, 03:54:29 pm by Zizka »

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage
Na zizka, I don't have more of them, this are the first tutorials I am creating. You should also be very careful with downloading them because it's more the WIP-Topic and I am changing lots of stuff. The first part is finished. You should exchange them if I am posting that I overworked something, if you fina an issue also post it, I read them carefully but it can happen...
It's lots of work to create a single tutorial.

Thought of uploading them at deviantart once they reach a finished state.

I overworked the second and the third part, although after reading Grimsane's post I think to widen the box example a bit could be a good idea. I am not quite sure how, but I'll think about this.

new parts (deleted the older part 2 and 3 from above)
« Last Edit: June 17, 2012, 10:11:46 pm by Cyangmou »
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Grimsane

  • 0010
  • *
  • Posts: 423
  • Karma: +2/-0
    • View Profile
great update, much better layout and font type  :y:

you don't really elaborate on the angle of di or tri pixel isometry being due to the utterly horrible aliasing of the true iso angle in part 2, you do illustrate it though, and you wrote about it in part 3 I think that diagram should be along with that text, also "without a clean line tiles won't be able and the result would look really sloppy" should read as "without clean lines tiling won't be possible and the result will look really sloppy."

"Ah that's rubbish because it has anything to do with game graphics" confused me quite alot, I think it should read *"that's rubbish, and has nothing to do with game graphics!" I hear you say, not true -Take a look~*

actually I probably shouldn't bother here, if you'd like I'd be glad to help you edit the English of any future revisions if you PM me :)
« Last Edit: June 16, 2012, 01:19:06 pm by Grimsane »