AuthorTopic: [WIP][C+C] Project LockPicking  (Read 8411 times)

Offline Boraka

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

[WIP][C+C] Project LockPicking

on: September 16, 2015, 03:45:05 pm
Hi there again!

I'm immersed in a tiny (for the moment) personal project, specifically, I'm starting to develop a minigame and I want to use pixel art graphics.

For the moment the interface will be a static element (a lock) and all the gameplay will be concentrated in one of the sides (the other object sides will be mostly decorative). The thing is that I want to use some kind of isometric perspective, but I want the "object's main side" to be highlighted and to have more presence in the screen. So, in order to achieve that, I though it could be interesting to make the graphics in an "slightly rotated" isometric perspective, and here is my best attempt (it's just a cube for the moment, just to get a general idea about if it is working or not)



I think it can works... but when I put more than one cube together a few issues pop out. I thought in changing the central edge, adding 1 pixel more to the left side, but I see something weird with that solution, I feel it's not right.



If any of you have some idea about this subject I will be glad to hear it  ;D

(I've been looking for perspective pixel art tutorials but they all focus on more classical and popular perspectives)
« Last Edit: October 21, 2015, 01:58:23 pm by Boraka »

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: Looking for perspective tips

Reply #1 on: September 16, 2015, 06:11:49 pm
Seems correct to me actually. Why do you think it's not working?

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: Looking for perspective tips

Reply #2 on: September 16, 2015, 09:10:20 pm
What you're looking for is graphical projection, which perspective is a type of. This is no longer iso metric (which in pixel art is actually dimetric) since the three angles aren't equal. It's now trimetric.
The precise lengths can be calculated, but you'd still end up tweaking it by eye. The only problem with your current cube is it doesn't have enough depth.
But it's so close to isometric, that you don't really gain much of an advantage as it's not visually distinguishable, yet you have more work to do (mirroring etc no longer work).
So if you're going to go through the trouble of trimetric projection, why not emphasize that front face even more?



It's interesting to note that all of this knowledge came from architecture. For further reading, search for terms like axonometric projection. Here's a good introduction.

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: Looking for perspective tips

Reply #3 on: September 16, 2015, 11:33:32 pm
@Joe
Great thoughts and link.
Happily reading thru it.
Thanks. :)

@Boraka
Near the bottom the article jumps into the math stuff super fast without much explanation.
If you have any interest in understanding how it works mathematically, you can dig up simpler examples by googling:
Linear Algebra and/or Linear Algebra Projection
Here's a link, but you could find better sources.
https://en.wikipedia.org/wiki/Projection_(linear_algebra)

However the stuff above is most likely much more visually intuitive and fit to your current needs.


And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline Boraka

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

Re: Looking for perspective tips

Reply #4 on: September 17, 2015, 10:28:40 am
Thanks a lot!!

I'm learning a lot about many subjects with all of you guys. You are completely right Joe, I can't call it isometric perspective never more ;)

@Joe
I thought about using some projection like the one you are showing at the end of your post, but I have some concerns about it.

The first is that I found it a little jagged, maybe it's just a perception of mine...

The second one, and I think, it's the most important, is that, maybe (yep, it's just a maybe, but is still there) in the future this minigame could be integrated in a greater project developed in pure pixel isometric perspective (1:2 isometric projection) and I thought all could be better integrated with a projection like mine.

@PixelPiledriver
Thanks for the info too! I'll take a look, it's always interesting

...

I don't know, it's been a hard decision for me here  ??? Should I change my train of thoughts?

Offline Boraka

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

Re: Looking for perspective tips

Reply #5 on: September 17, 2015, 07:09:05 pm
I've been playing around with some projection concepts and some more complex forms than just a cube. And I think a trimetric projection like the third example could work very well indeed.  :y:



Offline Boraka

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

Re: Looking for perspective tips

Reply #6 on: September 28, 2015, 03:41:15 pm
Hi again  ;D

I've been working these days in these piece using a trimetric projection at least



It's a sketchy lock. Here's a good reference:



I have decomposed it in order to be able to generate it dinamically.

The color palette it's just a "placeholder", I don't know which look I should go for this work. So I'll really appreciate any tip you can give me. I don't know if will be a good idea go for some metal texture or it will be better go for a flat look.

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: Looking for perspective tips

Reply #7 on: September 28, 2015, 08:54:48 pm
That's gonna be awesome.
First problem is the bottom edge isn't parallel with the top, and more, it actually diverges into space, which is anti perspective.
Make sure all parallels use the same stepping.
Second is the cam isn't cylindrical, so it wouldn't physically be able to turn inside the lock. Looks like it should be shorter and deeper. The cam in your example comes almost to the outside edge, as well.

Offline Boraka

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

Re: Looking for perspective tips

Reply #8 on: September 29, 2015, 12:42:38 pm
Hi Joe!

I really apreciate all your criticism. Thank you so much!

Here's a fast update (I'm at work right now, so don't have much time) trying to highlight some of the issues you have pointed.



First, I am not sure if you are referring to the edges highlighted in red when you say they aren't parallel. There was two pixels misplaced in the top edge, maybe that, plus the two-colored bottom edge was causing the feeling you described.

I have put the two edges together in the last figure for a closer look.

In the other hand, I agree, the cam doesn't look cylindrical enough, I've made a quick fix in black, in the picture and I think it works best with some more deepness. I have to look closer to the actual accurate projection, it's just to get a general idea.
« Last Edit: September 29, 2015, 02:08:21 pm by Boraka »

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: [WIP][C+C] Looking for perspective tips

Reply #9 on: September 30, 2015, 12:22:59 am
I can't count. I apologize, I didn't look at it hard enough.

To do this more precisely you need to know how each axis is scaled. I've been wondering how to do this myself for some time now.
In looking for a way to calculate the axis scales, I found this awesome axonometric calculator just now.
Measuring your angles in gimp, the left incline was about 4.76 and the right 28.8 degrees.
This gave the scale outputs .92, .97 and .45.
Your cam height is 56 pixels, so I divided by .97 first to get the unprojected height, 57.7. Then calculating the left and right lengths I constructed a perfect cube based on your projection.
Then I subdivided a face and ended up with a circle approximation.

Offline Boraka

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

Re: [WIP][C+C] Looking for perspective tips

Reply #10 on: October 01, 2015, 03:43:51 pm
Hi there!

Once again you have pointed in a very very interesting direction Joe, I don't know how I didn't think in maths before...  :blind:

I've been more in technical details trying to do something playable with this placeholders, so I have not had much time for the artistic part. I hope you don't mind because I have taken your circle and made a quick edit comparing it to mine so I can see the differences:



Surprisingly, there's no great difference, yours is better shaped, but it still looking pretty flat to me. I think this issue is mainly due to the key's cavity, so I thought maybe could be better go "tricky" with this and go for some curve comfortable to the eye but less "projection accurate" (something like the middle figure).

Any thoughts about this?

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: [WIP][C+C] Looking for perspective tips

Reply #11 on: October 01, 2015, 09:45:24 pm
I know the Greek used to create crooked pillars, because they looked more straight, which they weren't. There's also fighting games that fake perspective because it looks better when it's wrong.

In this case, I'd go with the correct approach, but I'd understand it if you make it wrong, because it looks better.

Offline Joe

  • 0010
  • *
  • Posts: 298
  • Karma: +2/-0
    • View Profile

Re: [WIP][C+C] Looking for perspective tips

Reply #12 on: October 05, 2015, 07:12:29 am
Yes I was surprised as well as I made it that it was just as thin as you had it. So contrary to my intuition, it seems the defining characteristic is the diagonal symmetry, giving the top and bottom halves of each side different curvature.
I'm biased but I think the correct version looks better, because it looks right, because that's how it's supposed to look. The problem with elements that don't conform to the overall projection is they make it harder to understand, so that's something to consider.

Offline Boraka

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

Re: [WIP][C+C] Looking for perspective tips

Reply #13 on: October 06, 2015, 02:33:21 pm
I think I'm keeping the non realistic version for the moment.



I have done (at least I tried) a sketchy spring, two version by the way, one front version and one version that is supposed to be according to the projection I've been using. But I think that I have miserably failed, I am not sure how can I fix this, it's a complex shape.

My intention is to animate the spring according to the pin position (the purple thing) making the spring more or less compressed.

I'll try to post an animated gif so I can show you all in movement (It gets better :))

Edit:

A quick edit for the compressed spring
« Last Edit: October 06, 2015, 03:45:10 pm by Boraka »

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 469
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: [WIP][C+C] Looking for perspective tips

Reply #14 on: October 06, 2015, 05:29:17 pm
Here are some suggestions (edit is not complete). I've corrected some of the lines (look at gif) and suggested how you can make it look better with adding just one more color (highlight in spring) and reusing current colors.  :)

             

Offline Boraka

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

Re: [WIP][C+C] Looking for perspective tips

Reply #15 on: October 08, 2015, 08:33:36 pm
@HarveyDentMustDie, I love your edit, I'll keep it in mind as a reference when I'm into more details with my sprites  ;D ;D

This is what I've been doing all this time :



Keep in mind it still work in progress  :-[

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 469
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: [WIP][C+C] Looking for perspective tips

Reply #16 on: October 08, 2015, 09:21:13 pm
:)

Offline Boraka

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

Re: [WIP][C+C] Looking for perspective tips

Reply #17 on: October 11, 2015, 01:17:42 am


A little update about lighting in the spring.

Offline Boraka

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

Re: [WIP][C+C] Looking for perspective tips

Reply #18 on: October 19, 2015, 03:23:42 pm
Hi!

I've been working a little bit in the lights and metal texture. I have made also a "complete" view of the lock.



Here's a detail of the different shadings I have tried. I think the third one it's my favorite.



Finally I've been playing with other shape for the lock, more readable in the "complete" view, but I'm not sure how it's been working with the "gameplay" view.



It will be great if you could give me your thoughts about this  :) :)

----------------------------------------------------------------------------------------------------------------------
Edit:

I have done some experiments with the color palette. I've tried some more realistic "metallic" colors and I not sure if I prefer that type of palette or a more fantasy one (like the one I've been using until now with yellow, purple, blue, etc)



I think I'm going with the "realistic" colors, but I will appreciate so much all your criticism with this particular subject.



Also I've thought in adding some "noise" to the metallic texture (like little holes in the plain surface). Here's an example



What do you think?
« Last Edit: October 20, 2015, 02:45:14 pm by Boraka »

Offline Boraka

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

Re: [WIP][C+C] Project Lockpicking

Reply #19 on: October 21, 2015, 01:57:57 pm


I've been working a few hours in the color palette, changing some colors, removing others... and I want to call it "finished", but I really will appreciate some criticism because I think the color-related part (especially at so few number of colors) is my weakest point.

I think in general is working fine, there's only 12 colors (13 counting the background color) and I can use it in many different ways to simulate unique materials, but my main concern is if should I add some extra colors (maybe 3 or 4) and add some AA to the scene (I have to admit I like the way it is right now, without any AA).

P.D : I have changed the thread's subject, because it has no sense now, there's not more about projections but about my Lockpicking project, in general.
« Last Edit: October 21, 2015, 06:37:33 pm by Boraka »

Offline HarveyDentMustDie

  • 0010
  • *
  • Posts: 469
  • Karma: +0/-0
  • I dream too much.
    • View Profile
    • Deviant Art

Re: [WIP][C+C] Project LockPicking

Reply #20 on: October 25, 2015, 08:26:01 pm
I'm not best at color theory but I think that buy using these olive green tones you  are making this very dull and hard for eyes, also that desaturated red almost blend in into green background which is bad considering that it's main element here. I've tried to make adjustments but maybe that red/orange still doesn't work. Anyway try to experiment a bit more cause current combination is not very appealing.