Jump to content


Photo
* * * * * 2 votes

Make 2D Topdown Sprite Looks 3D Tutorial UPDATED!


  • Please log in to reply
98 replies to this topic

#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
  • 382 posts
  • Version:GM:Studio

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
  • 1482 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
  • 618 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
  • 1482 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
  • 618 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
  • 1482 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
  • 618 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
  • 382 posts
  • Version:GM:Studio

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

#41 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1482 posts

Posted 07 June 2011 - 01:00 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.


so with this code, where abouts should i add it, and which one should i get rid of... i'm not with it today lol

and once someone has this mouse movement type thing, i think it should be uploaded again as an extra tut add on maybe....?
  • 0

#42 thatshelby

thatshelby

    GMC Member

  • GMC Member
  • 3823 posts
  • Version:GM8

Posted 07 June 2011 - 02:36 AM

Instead of 'image_angle=direction', put that code. Also, I don't think it's necessary to upload something for mouse-movement-to-direction. It's beyond simple, and there are countless others for it. Let this one focus.
  • 0

#43 Coffee

Coffee

    Light and Sweet

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

Posted 07 June 2011 - 09:06 PM

Wow, really nice job there. 8/10
  • 0

#44 Slinky

Slinky

    GMC Member

  • GMC Member
  • 274 posts
  • Version:GM8

Posted 09 June 2011 - 01:13 AM

I have a stomach infection right now, so when I saw this topic it was so awesome that I literally sh*t my pants.
I know that was weird. :blink:

Very, very cool. This is awesome and thank you. :)
  • 0

#45 ej510

ej510

    GMC Member

  • New Member
  • 3 posts

Posted 09 June 2011 - 02:51 AM

How do I make a the sprite have side designs????
  • 0

#46 Fihrilkamal

Fihrilkamal

    GMC Member

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

Posted 09 June 2011 - 03:01 PM

Thank you very much coffee, Slinky, and all. ej510, I'm sorry but I'm not understand what do you mean with side designs?
  • 0

#47 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1482 posts

Posted 09 June 2011 - 08:06 PM

think they meant like if you have a car, you have a bottom, then the side would be doors etc and then a roof, but its hard to draw that on a flat image.... or something like that, and can you do a coded version instead of D&D?
  • 0

#48 Fihrilkamal

Fihrilkamal

    GMC Member

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

Posted 09 June 2011 - 08:46 PM

If this is what side sprite design means. Then it will require a lot of layer, and need a lot sprites. If you want to make a good looking sprite then you'll need to test and draw the sprite again and again until it looks good. You know I spent more than 2 hours to draw that organic boy example.
  • 0

#49 Slinky

Slinky

    GMC Member

  • GMC Member
  • 274 posts
  • Version:GM8

Posted 09 June 2011 - 10:50 PM

I see! So you have to do each layer pixel by pixel. Whoa.
  • 0

#50 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1482 posts

Posted 09 June 2011 - 11:29 PM

kinda makes sense, and should be cool to give it a shot,

but a coded version as well would be handy,


...on a side note i still cant do the flipping mouse thing.... <_< dam....
  • 0

#51 ej510

ej510

    GMC Member

  • New Member
  • 3 posts

Posted 10 June 2011 - 02:06 AM

If this is what side sprite design means. Then it will require a lot of layer, and need a lot sprites. If you want to make a good looking sprite then you'll need to test and draw the sprite again and again until it looks good. You know I spent more than 2 hours to draw that organic boy example.

Thanks Fihrilkamal for helping and for this AWESOME Tutorial!!!!And thanks RowanFN for explaining what I meant.
  • 0

#52 ej510

ej510

    GMC Member

  • New Member
  • 3 posts

Posted 10 June 2011 - 01:36 PM

kinda makes sense, and should be cool to give it a shot,

but a coded version as well would be handy,


...on a side note i still cant do the flipping mouse thing.... <_< dam....

what flipping mouse thing???
  • 0

#53 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1482 posts

Posted 10 June 2011 - 02:20 PM

No problem,

and the flipping was just a word, i just still can't solve making him move towards the mouse...its becoming a bigger pain than i thought
  • 0

#54 C_Pike

C_Pike

    GMC Member

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

Posted 10 June 2011 - 04:24 PM

w

No problem,

and the flipping was just a word, i just still can't solve making him move towards the mouse...its becoming a bigger pain than i thought


in the step event, key up, and key down events, put:
image_angle+=(sin((point_direction(x,y,mouse_x,mouse_y)-image_angle)*pi/180)*8);

re-size the boy sprites so they are square, then rotate them so they all face right. Crop them and re center the xy coordinate.
in the up down event, remove the +90, -90 from the image_angle = direction, and in the key down event make the speed -5

----edit
just did this it and it works btw

Edited by C_Pike, 10 June 2011 - 05:17 PM.

  • 0

#55 RowanFN

RowanFN

    Mr. Awesome

  • GMC Member
  • 1482 posts

Posted 10 June 2011 - 07:02 PM

ahh thanks man, was the code that was needed, with point_direction and that, course lol

Thanks a load, and does work perfectly, now this is gunna be good :)
  • 0

#56 gmx0

gmx0

    The Messenger

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

Posted 11 June 2011 - 01:09 AM

Been done before, especially sub's RTS examples and my Zombolocaust: Nazis and Zombies game.

But I do admit, that mech robot looks really cool.
  • 0

#57 Fihrilkamal

Fihrilkamal

    GMC Member

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

Posted 13 June 2011 - 12:48 PM

Been done before, especially sub's RTS examples and my Zombolocaust: Nazis and Zombies game.

But I do admit, that mech robot looks really cool.


Thank you, I think this method was a new method at first, but I just know that there's many people have done this before already :lol:
  • 0

#58 teej

teej

    The PIXEL'er

  • GMC Member
  • 841 posts
  • Version:GM8

Posted 17 June 2011 - 02:18 PM

Yeah brilliant, I remember those fake 3d before... but thanks to you for rekindling the method. Someone with great 2d sprite skill can make something special with this method.
  • 0

#59 Fihrilkamal

Fihrilkamal

    GMC Member

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

Posted 17 June 2011 - 04:16 PM

Yeah brilliant, I remember those fake 3d before... but thanks to you for rekindling the method. Someone with great 2d sprite skill can make something special with this method.


You're welcome teej! Yes I agree with you, with this method we can produce high quality 2.5 D graphic. And, did you notice the HUD or User Interface system in this example? It is actually not affected by the view rotation nor zooming, and it's simply uses d3d_set_projection_ortho() function.
  • 0

#60 thatshelby

thatshelby

    GMC Member

  • GMC Member
  • 3823 posts
  • Version:GM8

Posted 17 June 2011 - 05:09 PM

Does this work with the view_angle variable?
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users