Author Topic: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!  (Read 8420 times)

Offline Seiseki

  • 0011
  • **
  • Posts: 562
  • Karma: +1/-0
  • F'htagn!
    • View Profile
So, one thing which is incredibly popular when it comes to pixel art is.. RPG Tiles and RPG Sprites!
We all see tons of these around here and there's one thing that a lot of people have trouble with.. the 3/4 RPG Perspective..
Yet there is surprisingly little information on this, I've seen some info posted in a few topics here and there, 3D renders, drawings.
But there's no tutorial or resource explaining in detail what the perspective is and images explaining it.

So, I want to gather any details and information that you guys might have (I know you have! ;D) on the subject.
Also, if anyone has any 3D renders or could take their time to render a few examples in 3D, of a person in 3/4 view and a box in 3/4 view, with normal view for comparison.

This is so I can write detailed post with all the info, of course giving credit to everyone. (not doing this to take credit for it, just really badly want someone, anyone to write this tutorial)
And whenever someone has issues with the perspective you can link to the 3/4 view - tutorial/resource thread. Because this happens a lot.


Currently working on Super Space Bucks

Offline Facet

  • Moderator
  • 0010
  • *
  • Posts: 399
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #1 on: June 08, 2012, 09:15:30 pm »
An excellent notion ;D. I'd like to see a more general thread looking at common graphical projection as used in games at some point. It's been quite a while since I was taught some of this stuff (in passing, really) so someone please correct me if I stray. 

As well as the the lack of a good illustrated introduction I think the various terms bandied about are pretty confusing. What you're trying to define is actually an informal term for a pretty loose approach. 'Perspective', whilst descriptive colloquially, denotes the use of vanishing points, which of course is not the case in the RPGs you're referring to. No vanishing points = parallel projection and 'top down' is more descriptive still.

Taken literally, '¾' is referring to the angle (45 Degrees) by which you're looking down on the scene (the whole being straight top down) and the resultant foreshortening of both the ground and vertical planes. True and consistant ¾ top down is pretty unlikely in practice though.

It's not necessary to foreshorten either plane; a lot of top down games don't compress the elevation for better readability (especially given a low resolution) and for similar reasons (including tiling and navigability) the ground plane is often left untouched. Taking the aforementioned (full profile and/or full top down) then ¾ is not very descriptive.

As to what to term 'RPG perspective' technically; I think plan oblique (extruded from the base, as oppose to elevation oblique: extruded from the profile) is a better catch-all. I've also seen it described as 2.5D (faked depth when not specifically 2D gameplay in a 3D enviroment) which makes sense too. It's worth noting that an 'orthographic' camera in 3D modelling terms doesn't distinguish oblique projection. The orthographic pictorials, where you see three sides of an object (aka axonometric) including the perennial favorite isometric (equally foreshortened sides) require that no axis is parallel to the projection plane. Not the case here. Actually one (but only one) axis can be parallel to the picture plane in axonometric projection but it's extremely uncommon because you 'lose' a plane.

Edit - Explained & diagrammed properly below ;D 
« Last Edit: June 13, 2012, 02:04:44 am by Facet »

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #2 on: June 09, 2012, 03:56:12 pm »
You can use this, made it for that tree topic and it seemed to be fitting. I don't explained every detail, but I think it's possible to understand axonometric perspective with it.

However it's not senseful to draw everything in the correct perspective if it comes to games. sometimes cheating and breaking rules leads to surprisingly better effects. especially with a small resolution (8x8, 16x16 per tile) it's important to "improve" the perspective of charakters and monsters to have a better readability. A correctly in 45 perspective drawn charakter looks mostly like a midget. But another surprising thing is that most people don't even recognize that there are different perspectives, as long as you don't ask them for looking exactly at it. But this is more about the topic of breaking artistical rules.
« Last Edit: June 11, 2012, 10:25:27 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Seiseki

  • 0011
  • **
  • Posts: 562
  • Karma: +1/-0
  • F'htagn!
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #3 on: June 09, 2012, 06:39:40 pm »
Great stuff!
Although it might be a bit complicated to someone new to the concept and all the terms..
Having the tutorial split into a simple basics part and then a more advanced in-depth part would be best.

I also agree that it's fun to break the rules and add in weird perspectives that do not actually make sense.
Just like A link to the Past or Minish Cap..
Because otherwise everything usually looks extremely square and straight, which can be quite boring.

But to break the rules you first need to learn how to follow them ;)
« Last Edit: June 09, 2012, 06:42:46 pm by Seiseki »

Currently working on Super Space Bucks

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #4 on: June 09, 2012, 07:20:06 pm »
Cyangmou, thank you for that wonderful post. That's what pixelation's here for.

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #5 on: June 10, 2012, 03:08:30 pm »
Great stuff!
Although it might be a bit complicated to someone new to the concept and all the terms..
Having the tutorial split into a simple basics part and then a more advanced in-depth part would be best.

I also agree that it's fun to break the rules and add in weird perspectives that do not actually make sense.
Just like A link to the Past or Minish Cap..
Because otherwise everything usually looks extremely square and straight, which can be quite boring.

But to break the rules you first need to learn how to follow them ;)

there are a bunch of very basic terms which everybody should know I guess. But however, it's maybe necessary to get an overview first and why we use these established perspectives. I think it's necessary to recognize the difference between 3D iso and 2.5D iso. 45 (ultima), other axonometrics (e.g. 180 - 60) are dead.
more important than looking straight and flat is the hiding of the tile grid. E.g. SD3 was pretty good with hiding it and it looks beautiful although the environment graphics are done without breaking the rules often.

Because of this I made another part with some very popular examples and explaining some very basic terms. This time I also used a text tool. Looks a bit more professional than my handwriting. Maybe It'd be also a good idea to overwork the other part later, maybe I'll do this if there is time. I also think that we need at least one example more to make it really convincing. I am thinking of a treasure chest, which is simple enough to imagine but hard enough for a beginner to construct and to learn the basics.

If I am right the other themes (apart from the trees) we also have very often here are "the" grass tile and creating human bases for RPGs

Here the part I made today:
-posted an edited version below -

Credits:
The font is from Joschua Sauer's "Nicht Lustig" cartoons/page.
Also credits to all the artists who created the graphics of the examples

P.S.: @Helm: you posted tons good stuff here and I learnt really a lot from you so far - especially as I started with pixels, so I think it's good that I can finally contribute something to pixelation.
« Last Edit: June 10, 2012, 08:07:35 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Carnivac

  • 0010
  • *
  • Posts: 240
  • Karma: +0/-0
  • Mayhem Attack Squad
    • View Profile
    • Doctor Who - Retro Sprite Gallery
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #6 on: June 10, 2012, 03:42:14 pm »
Hm, your '3D ISO' viewpoint was also quite popular in the 80's too, particularly with various platform adventure games on the Spectrum, Amstrad and C64 such as Knight Lore (which I think invented the genre and possibly the actual viewpoint itself though I'm not sure about that.  Certainly was one of the earliest home computer uses of it though) and also Head Over Heels, Batman, Movie and Sweevo's World to name but a few.

EDIT: Just checked up on Knight Lore and while it was a very early use of iso, Ant Attack predates it (though I never played that one).
« Last Edit: June 10, 2012, 03:50:37 pm by Carnivac »
NES, Amiga & Amstrad CPC inspired
I know nothing about pixel art
http://carnivac.tumblr.com/

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #7 on: June 10, 2012, 03:47:46 pm »
@carnivac: I wasn't even born at this time and don't played anything that old, except the nintendo arcade games. I played Anno, Sims and Diablo with 3D Iso.  
It's only a number, easy to edit - I'll change it later to 80's and 90's.
If you aren't sure it'd be great if anybody who has experiences of that time could prove it, just to be 100% sure.
« Last Edit: June 10, 2012, 03:53:02 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Carnivac

  • 0010
  • *
  • Posts: 240
  • Karma: +0/-0
  • Mayhem Attack Squad
    • View Profile
    • Doctor Who - Retro Sprite Gallery
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #8 on: June 10, 2012, 03:54:57 pm »
@carnivac: I wasn't even born at this time and don't played anything that old, except the nintendo arcade games. I played Anno, Sims and Diablo with 3D Iso. 

Fair enough.  I've never heard of Anno though.  But my point was the style was not just limited to tatical games and RPGs.  The old iso 8 bit games were very popular back in the day.  The "2.5D iso" as you call it (though this is the first time I've seen the word isometric applied to that viewpoint) has also been used in many action games such as Shock Troopers, Chaos Engine and Merc for example.  Was a very popular view point for character based arcade shoot 'em ups.
NES, Amiga & Amstrad CPC inspired
I know nothing about pixel art
http://carnivac.tumblr.com/

Offline Helm

  • 0110
  • *****
  • Posts: 5058
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #9 on: June 10, 2012, 05:51:07 pm »
Cyangmou: love all around then


Also wasn't Qbert the first isometric game?

Offline Carnivac

  • 0010
  • *
  • Posts: 240
  • Karma: +0/-0
  • Mayhem Attack Squad
    • View Profile
    • Doctor Who - Retro Sprite Gallery
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #10 on: June 10, 2012, 06:29:44 pm »
Cyangmou: love all around then


Also wasn't Qbert the first isometric game?

Possibly.  I don't think I've ever played it yet I do have memories of receiving the board game version as a present one christmas when I was a kid.  Odd for me to have played a board game version of a video game but not the actual video game itself.
NES, Amiga & Amstrad CPC inspired
I know nothing about pixel art
http://carnivac.tumblr.com/

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #11 on: June 10, 2012, 08:09:06 pm »
okay, I took all your suggestions into account carnivac, should be OK now.
I also made another part - with a bit from my personal knowledge treasure.

links: (if the images don't work)

Link Part 1





« Last Edit: June 15, 2012, 05:53:05 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline yaomon17

  • 0010
  • *
  • Posts: 185
  • Karma: +0/-1
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #12 on: June 11, 2012, 12:53:14 am »
@ the end of pt.1, second to last paragraph, first sentence, it should be 'saves' instead of 'safes' :D

Offline slym

  • 0010
  • *
  • Posts: 180
  • Karma: +0/-0
    • View Profile
    • My Portfolio
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #13 on: June 11, 2012, 03:37:07 am »
....
Damn Cyangmou. That's one hell of a tutorial.

Offline Ninjus

  • 0001
  • *
  • Posts: 23
  • Karma: +0/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #14 on: June 11, 2012, 04:29:50 am »
I really want to thank you! You have helped me tremendously with your tutorials and gave me a push to continue doing pixel art. ;D

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #15 on: June 11, 2012, 04:51:06 am »
That tutorial is just...  :y: :y: :y: :y: :y: :y: :y:
Wow. You certainly covered everything there, Cyangmou. :)

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #16 on: June 11, 2012, 04:05:53 pm »
That tutorial is just...  :y: :y: :y: :y: :y: :y: :y:
Wow. You certainly covered everything there, Cyangmou. :)

nah I only covered the all the things I started to talk about atm. There is much more to mention which is also quite important - especially for beginners.

I widened the cube tutorial a bit, and made it fitting for this tutorial here. Also added a second construction method and some notes about resolution.

Ahh and right if you find some spelling mistakes or grammar mistakes, just point them out. I'll remove the mistake in the first part soon.
I also saw that the last paragraphs of the 2nd part have some mistakes in it. I will also make there some changes.

here part 3 - the cube/box part. see post below

Ah and yeah, it's only a tut about perspective, because of that I won't do the step by step parts for spriting something in detail.
I also can't promise that all the examples I bring will be completely polished to the end. Althoug I have some (maybe enough) stuff from some my game projects which I'll use for demonstration.
« Last Edit: June 15, 2012, 05:53:40 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Grimsane

  • Moderator
  • 0010
  • *
  • Posts: 409
  • Karma: +2/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #17 on: June 12, 2012, 07:54:44 am »
nice ;D especially @Cyangmou's rigorous tutorial efforts

I was going to put together some reference sheets for dimetric and trimetric ISO approaches, principles and practices.

have this at the moment and put this together to help a friend might as well post it here, more of a rough guideline to 2 major methods of Isometric construction one being an offset style system where you have alternating offset rows.
I'm more used to using offsets personally. but I know alot of people are far more comfortable with tiles, you just end up with a bigger tileset and more to and fro'ing with different tiles.

I can elaborate on the meaning of this diagrammatic if anyone asks but should be self explanatory. and this one is dimetric 2pixel step (26.565) which is most common, and I'll probably add another for trimetric later, Fallout 1&2 have the most notable usage of trimetric projection.



also it should be noted there is no real universal approach to isometry only things that have been proven to work and not work and more efficient ways of doing it, I think there was an interview I read online some time ago from they guys who did the original X-Com about their approach and how they overcame some problems with isometric (it was offset, also it gets more complicated when you do multiple floors etc) if I manage to find it, I'll link it here.

Offline PixelPiledriver

  • Moderator
  • 0010
  • *
  • Posts: 440
  • Karma: +5/-0
  • Yo!
    • View Profile
    • My Blog
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #18 on: June 12, 2012, 03:11:27 pm »
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:


I was curious what FFTactics does, and they also use a half step:


Thanks again Cyangmou!
Awesome Posts!
« Last Edit: June 12, 2012, 05:59:09 pm by PixelPiledriver »

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #19 on: June 12, 2012, 09:02:48 pm »
@grimsane: I don't really understand why you show how it doesn't work instead you are showing how it would work right. it's for tutorials always the better way to show how something work. If inexperienced people aren't really careful with a tutorial they are getting pretty different results, although thaey are copying it from you. If you don't know much about a theme it's better to get a right example in your mind instead of a wrong one.

@PP: yes the iso thing you are pointing out is true. although you can use a whole step to and create visual difference. it's all about the tiles edges. I think Final Fantasy Tactics uses half steps because the chars are also able to jump. Lots of isometric games have a flat world just with cliffs (you can't climb them up). The half steps in FFT also heavily influence the gameplay (movement, backing...). Also all the attack animations would look odd if they'd have used a whole steps. over and over. Although there are some whole steps on each map.

let's continue with this:

part4 is WIP
« Last Edit: June 27, 2012, 05:30:12 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Facet

  • Moderator
  • 0010
  • *
  • Posts: 399
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #20 on: June 13, 2012, 01:52:32 am »
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

  • Moderator
  • 0010
  • *
  • Posts: 409
  • Karma: +2/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #21 on: June 13, 2012, 11:39:05 am »
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

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #22 on: June 13, 2012, 04:58:29 pm »
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 »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Facet

  • Moderator
  • 0010
  • *
  • Posts: 399
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #23 on: June 13, 2012, 05:58:10 pm »
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

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #24 on: June 13, 2012, 06:05:52 pm »
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 »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Facet

  • Moderator
  • 0010
  • *
  • Posts: 399
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #25 on: June 13, 2012, 06:36:42 pm »
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: 562
  • Karma: +1/-0
  • F'htagn!
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #26 on: June 15, 2012, 05:21:11 am »
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.

Currently working on Super Space Bucks

Offline Zizka

  • 0010
  • *
  • Posts: 216
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #27 on: June 15, 2012, 03:51:57 pm »
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

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #28 on: June 15, 2012, 05:52:34 pm »
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 »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Grimsane

  • Moderator
  • 0010
  • *
  • Posts: 409
  • Karma: +2/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #29 on: June 15, 2012, 06:34:40 pm »
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 »

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #30 on: June 16, 2012, 11:20:57 am »
That's an great offer, If you can kill the mistakes it'd be great. Feel free to take the part of the tutorial and correct it with a red color. The bad thing is that I created them direct in the graphics-program, so I don't have a raw version of a text before. I create them as xcf-files (gimp) if you can't open them I can save them also as psd files and send them to you then you could make the edits direct in the files.
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Grimsane

  • Moderator
  • 0010
  • *
  • Posts: 409
  • Karma: +2/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #31 on: June 16, 2012, 01:15:02 pm »
I'm a gimp user :D and that's what I had in mind, so feel free shoot me the xcf, btw i usually save as .xcfgz works the same but gets compressed, no noticeable time difference loading, because compression is always better for disk space :)
« Last Edit: June 16, 2012, 01:17:10 pm by Grimsane »

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #32 on: June 17, 2012, 10:16:16 pm »
overworked the tutorial part 2 & 3 and widened the examples. I wasn't at home the whole day, but you'll get a pm soon, Grimsane.

« Last Edit: June 27, 2012, 05:33:16 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Facet

  • Moderator
  • 0010
  • *
  • Posts: 399
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #33 on: June 18, 2012, 12:47:07 am »
These improvements are amazing; very clear and consistent :-*. If I was to nit-pick: I'd qualify every instance of 'isometric' later on in the tutorials with (pixel) iso. just as a precaution to curtail any misunderstandings (especially since this is a multi-part thing). Also; the profile tree thing has 5 instead of 6 projectors on the iso side in the first instance and just aesthetically it might be best to change to to an odd number overall for an equal amount above and below the 'camera'. tbh it's not that much of a discrepancy between 45° and 35° overhead views; I'm not sure that's worth focusing on so much.

Edit: you mention of oblique 'this is also known as ¾ from time to time' but I'd reckon most of the 8/16 bit classics are oblique. It'd be nice to give an example of some simple geometry overlaid on 'the classics' for comparison and at the end mention the fairly loose application of those rules that some of them take.   
« Last Edit: June 20, 2012, 07:05:36 pm by Facet »

Offline Grimsane

  • Moderator
  • 0010
  • *
  • Posts: 409
  • Karma: +2/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #34 on: June 20, 2012, 09:02:03 pm »
oh yeah been meaning to post this,
to me even at glance the ratio looks slightly off on your final crates, I believe it is due to the lid of the crate where you have the highlight and edge going 1 pixel too low and pulling it below what you've established in the pink one:


just me? and even so it shows how a matter of 1 pixel can adjust how it is read.

comparison:

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #35 on: June 27, 2012, 05:39:21 pm »
also thought about this Grim, but na, the construction is right, but it's a pretty interesting observation.

I enhanced part 3 strongly. I added especially more pretty basic stuff for the first example, because I think the ones we are referring to this won't even have heard of the things we are talking the whole day. I don't give any detailled in-depth insights, even without that it got pretty long - but I think it's enough to get the rough ideas.

"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Seiseki

  • 0011
  • **
  • Posts: 562
  • Karma: +1/-0
  • F'htagn!
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #36 on: June 29, 2012, 12:07:05 am »
Incredible!
Registering on these forums is the best thing I've done ever! :D

Currently working on Super Space Bucks

Offline spacepaw

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #37 on: August 25, 2012, 11:30:57 am »
Hello,
Sorry for bumping this post but it really bothers me. In the part called "But how does the 3d effect work" the cube measurments for axonometric projection seem to be 2/3 instead of 3/4. It's seems to be correct in the other parts though.

It bothers me because there's a sentence saying that "nobody will see the perspectives clash" (angled box drawn in iso and front view box in axonometric) but it seems to me that it's only because of this error there. The thing is I'm trying to construct an angled box based on front view (axonometric) and I just can't seem to get the proportions right. Is there a specyfic way to make angled isometric version of front view axonometric box? How do I calculate the height and width?

Once again sorry for bumping :)

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #38 on: August 26, 2012, 09:12:28 pm »
The drawing is maybe off (problems with rescaling) but the measurement notes are the right ones, so this shouldn't be a problem.

The example is all about how the box-angle changes if you change the viewing angle and this is the correct part.

There is no way to  make a correct axonometric isometric box, because you only can achieve the 120 wide angle with a viewing angle of 35,2 you need for isometry. The axonometric perspective you use (or the one in the example) has a viewing angle of 45. So no you can't make an isometric looking and flat at the bottom placed box for a 45 viewing angle.

The correct constructed 45 axonometric rpg perspective box is the one with the jaggy lines, but I already pointed out, that this isn't very beautiful for pixelart standards.
Try to understand the example, if it's to hard to understand, try to imagine the projections first.
The example illustrates all things you need for understanding.

The good thing about the human brain is that you only recognize perspectivical, proportional or any drawing-related  issues if you have a lot of viewing-experience. Most people aren't well trained to recognize this, so it's pretty easy to fool there impressions. The 13 deviation of the viewing angle won't hurt the impression of most people.

If you thought a lot about it and you weren't able to understand it you can send me a msg. Atm I don't really have lots of time, which explains also why I haven't completed all so far.
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #39 on: August 27, 2012, 09:14:44 am »
Only thing HSV is more comfortable than is RGB. There's a number of more reliable and visually understandable alternatives, such as HSL, HSY, and LCH. Please use one of them instead, and save yourself the trouble of understanding HSV's idiosyncracies.

Offline Cyangmou

  • 0010
  • *
  • Posts: 381
  • Karma: +3/-0
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #40 on: September 26, 2012, 07:07:37 pm »
Had time to create another part.

New material about how to draw perspectively correct cylinders for rpg graphics, illustrated with 11 diagrams.

This time I use an slightly enhanced design and it's all about a very technical content. Also some knowings of maths don't hurt. Examples will follow in the next part, because otherwise it'd have been too long.

my my, forgot to add the most important thing   :lol: ... part 4

« Last Edit: September 26, 2012, 10:28:38 pm by Cyangmou »
"Today I had lunch with the Goddess, 'Steinman,' she said... 'I'm here to free you from the tyranny of the commonplace. I'm here to show you a new kind of beauty.' I asked her, 'What do you mean, goddess?'
'Symmetry, dear Steinman. It's time we did something about symmetry...'" ~Bioshock

Offline numlock

  • 0001
  • *
  • Posts: 47
  • Karma: +0/-0
    • View Profile
    • my blog
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #41 on: September 30, 2012, 04:15:40 pm »
are you going to make tutorials about 2d platformer tilesets?

Offline Ai

  • 0011
  • **
  • Posts: 649
  • Karma: +2/-0
  • finti
    • View Profile
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #42 on: October 01, 2012, 02:58:45 am »
are you going to make tutorials about 2d platformer tilesets?
IMO much of that overlaps with RPG perspective stuff. Some kind of isometric is common.. IMO the slanted look (where the front of the blocks are flat and the backs slope -- cf. the later Commander Keens, Prince of Persia) is the better looking 'flavour' but takes more work and tiles.

OTOH, I'd really be interested to see how the perspective is set up in one of Henk's games (Flink, Lomax) because the environments always have such a powerful sense of realness (at the same time as being, yknow, obviously.. not). I'm hoping the answer is more broadly applicable than 'just use more tiles, and layer them more.'

Offline PypeBros

  • 0100
  • ***
  • Posts: 1140
  • Karma: +2/-0
  • Pixel Padawan
    • View Profile
    • Bilou Homebrew's Blog.
Re: [HELP WANTED] Pixelation 'RPG Perspective' Tutorial Project!
« Reply #43 on: October 01, 2012, 11:34:30 am »
IMO the slanted look (where the front of the blocks are flat and the backs slope -- cf. the later Commander Keens, Prince of Persia) is the better looking 'flavour' but takes more work and tiles.

There's one major drawback with such perspective, unfortunately: it prevents you from making believable parallax scrolling. If that happens to be a feature you desire, you'll have to opt for another approach.
Pixelling School Zone with my own Sprite Editor on Nintendo DS and coding in between . . .