Jump to content


Photo
* * * * * 1 votes

Make 2D Topdown Sprite Looks 3D Tutorial UPDATED!


  • Please log in to reply
91 replies to this topic

#21 GfxRippersSuck

GfxRippersSuck

    GMC Member

  • GMC Member
  • 101 posts

Posted 23 May 2011 - 11:07 AM

"c_gray" in the script doesn't work in the lite edition, I have to change it to c_white.

It's a great example, but I guess it only works for geometric characters like robots and less for ones with organic shapes.

Edited by GfxRippersSuck, 23 May 2011 - 11:07 AM.

  • 0

#22 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 24 May 2011 - 01:00 AM

"c_gray" in the script doesn't work in the lite edition, I have to change it to c_white.

It's a great example, but I guess it only works for geometric characters like robots and less for ones with organic shapes.


If you change the color to c_white, then the 3D effect will look less appealing. If you want to get better effect using lite edition then I'll suggest you to copy the sprites and make it darker on image editor, and then replace it on the c_gray one. And, yes this method will looks better on geometric shapes (in this example I draw body parts twice to achieve 3D effect), but doesn't mean it can't be used on organic shapes, just need some more layered sprite and it will be good I think. I'll try to make organic one then I'll upload it here :snitch: .
  • 0

#23 Primoz128

Primoz128

    GMC Member

  • GMC Member
  • 278 posts
  • Version:GM:Studio

Posted 24 May 2011 - 08:11 PM

This is awesome man i wanted to use isometric in my game for 3Dish effect and nice graphics but i hate making room in that it's terrible and weird and well this is what i was looking for top down 3Dish 2D awesome :D.
  • 0

#24 freko

freko

    The Professional

  • GMC Member
  • 504 posts
  • Version:GM8

Posted 25 May 2011 - 05:30 AM

This is awesome!!
  • 0

#25 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 27 May 2011 - 01:57 PM

Hello again guys :medieval: !! I've heard that you think this method is bad for organic shapes (i.e humans, trees, animals), actually, it's not quite. I've been doing something awesome with this example, so you'll get better ideas on how to implement it.

I've modified this tutorial and added far more advanced features for an example. I've added walking animation, view zooming, and even the 2,5 D effect now works with screen rotation, and the best thing about this is now have a cute boy instead of robot. So, please DOWNLOAD THIS!!:

3D boy.gmk (25kb) download

Posted Image

This is just an example and it's a bit hard to understand the code, I would suggest you to download the tutorial version first.

Edited by Fihrilkamal, 28 May 2011 - 09:29 AM.

  • 0

#26 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1480 posts

Posted 27 May 2011 - 02:46 PM

sweet, thats a lot better, what about some buildings? or archways?
  • 0

#27 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1480 posts

Posted 27 May 2011 - 09:03 PM

how do you make him move/look and walk towards the mouse, i've tried various versions but it doesn't exactly work...
  • 0

#28 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 28 May 2011 - 03:53 AM

Building and archways? Well, that's will be great but I just want to show how to make organic shapes like human and trees, and also how to make shadows, and.. actually I still have no idea on how to make good looking building. About moving towards mouse's posisition I'd suggest you to edit the previous robot example, and then in end step event of obj-robot set image-angle=direction, and then use point direction stuff to make robot face the mouse.
  • 0

#29 Primoz128

Primoz128

    GMC Member

  • GMC Member
  • 278 posts
  • Version:GM:Studio

Posted 28 May 2011 - 11:52 AM

Well iv been doing my project for topdown but now it will be 3Dish 2D :o i hate 3D coding and love 2D and this is what i needed 3Dish 2D :D just need stationary sprite example then ima try somenthing on my own when time comes for gfx.
  • 0

#30 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 28 May 2011 - 12:18 PM

Well iv been doing my project for topdown but now it will be 3Dish 2D :o i hate 3D coding and love 2D and this is what i needed 3Dish 2D :D just need stationary sprite example then ima try somenthing on my own when time comes for gfx.


Then, good luck for your project :medieval: . I really hope that you and more people out there want to make games using this method of drawing. Because personally, I think top-down graphic is simply less appealing.
  • 0

#31 thatshelby

thatshelby

    GMC Member

  • GMC Member
  • 3823 posts
  • Version:GM8

Posted 28 May 2011 - 04:17 PM

I strongly suggest you implement the modified method posted on the first page, or at least a toggling-example of it, so users can see both. I feel it would make it look much better.
  • 0

#32 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 30 May 2011 - 10:45 AM

I strongly suggest you implement the modified method posted on the first page, or at least a toggling-example of it, so users can see both. I feel it would make it look much better.


OK Theopilus! But the modified example above still have some problem in the 'depth' of trees, as soon as I fixed the bug, I'll ZIP it together with the robot tutorial and implement it in the topic :medieval: .
  • 0

#33 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1480 posts

Posted 30 May 2011 - 12:53 PM

thats good to know,

but isn't there a way to have the animations but looking at the mouse? cause for TDS its a very handy thing,

and by buildings i meant like walls or something lol
  • 0

#34 C_Pike

C_Pike

    GMC Member

  • GMC Member
  • 565 posts
  • Version:GM8.1

Posted 04 June 2011 - 11:45 PM

thats good to know,

but isn't there a way to have the animations but looking at the mouse? cause for TDS its a very handy thing,

and by buildings i meant like walls or something lol


you have the player object (or the sprites, however you need) rotate toward mouse_x,mouse_y. The easiest,
but ugliest and most unrealistic way is the 'direction = point_direction...' method
The nicest is the 'rotate towards object (or point)' method, in which the player object rotates toward a object/point
based on a set speed. I cant remember the code off the top of my head, but it involves subtracting 180 from one
of the directions. I think there is something in the smart codes thread.

---

Thanks to Fihrilkamal for this awesome technique!!!!!
  • 0

#35 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1480 posts

Posted 06 June 2011 - 12:16 AM

if you remember the code thats brilliant,

but sprite rotation i think i tried, but the direction was off, and though doing the direction point direction thing made other coding go funny, direction being off and buggly freezing the player in places :/
  • 0

#36 C_Pike

C_Pike

    GMC Member

  • GMC Member
  • 565 posts
  • Version:GM8.1

Posted 06 June 2011 - 12:27 AM

I will look it up in one of my old files (sorry, I have a bad memory for this sort of thing)
  • 0

#37 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1480 posts

Posted 06 June 2011 - 02:18 AM

ha sorry, and thanks :)
  • 0

#38 thatshelby

thatshelby

    GMC Member

  • GMC Member
  • 3823 posts
  • Version:GM8

Posted 06 June 2011 - 02:21 AM

The code for gradual turning towards direction is:

image_angle+=(sin((direction-image_angle)*pi/180)*8);

Change 8 higher or lower to make it go faster or slower, respectively.
  • 0

#39 C_Pike

C_Pike

    GMC Member

  • GMC Member
  • 565 posts
  • Version:GM8.1

Posted 06 June 2011 - 01:24 PM

The code for gradual turning towards direction is:

image_angle+=(sin((direction-image_angle)*pi/180)*8);

Change 8 higher or lower to make it go faster or slower, respectively.


Thanks! my way was much clunkier, 4 'if' statements I do believe.
  • 0

#40 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 348 posts

Posted 06 June 2011 - 07:33 PM

UPDATED!! Now I've added the 3D boy in this tutorial topic's page. And please download the zip version of this updated tutorial since I've modified it. And the trees in the example now have been fixed. :medieval:
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users