• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Graphics Sprite Movement In All Angles [Solved]

D

Dantevus

Guest
Greetings all,

I was wondering if anyone had any ideas for a simple way to make a sprite look good going in all directions. This would be a slightly angled view so all views of the character would need to be represented (or as many as would be deemed passable). My running theory is that I'm going to have to suck it up and create a sprite for as many angles as possible and set the image to change based on the angle the character is moving, but my hope is that one of you awesome people would know something that would help make this process easier. :)

Thanks in advance!
 
D

Dantevus

Guest
Hi Nux! Unfortunately image angle won't work for this(as far as I know) since the game isn't from a top-down perspective. So when walking up, for instance, we would see his back. Walking diagonal towards the bottom right we would see a portion of his front and a portion of his side. I'm probably not explaining very well, haha. Essentially I'm trying to get a 360 degree view of the sprite without creating 360 sprites.
 
W

whale_cancer

Guest
Greetings all,

I was wondering if anyone had any ideas for a simple way to make a sprite look good going in all directions. This would be a slightly angled view so all views of the character would need to be represented (or as many as would be deemed passable). My running theory is that I'm going to have to suck it up and create a sprite for as many angles as possible and set the image to change based on the angle the character is moving, but my hope is that one of you awesome people would know something that would help make this process easier. :)

Thanks in advance!
It depends so much on your graphics style (esp. perspective and fidelity).
 
W

whale_cancer

Guest
Hi Nux! Unfortunately image angle won't work for this(as far as I know) since the game isn't from a top-down perspective. So when walking up, for instance, we would see his back. Walking diagonal towards the bottom right we would see a portion of his front and a portion of his side. I'm probably not explaining very well, haha. Essentially I'm trying to get a 360 degree view of the sprite without creating 360 sprites.
An easy way to do this would be to have a 3d model and, in your modelling software, write a script to rotate and take screenshots of each frame of animation. Then, take those sprites, and put them in GM. I did this to make Starcraft sprites in zDoom.
 
C

ColdaDog

Guest
If your sprite's clothes,hair,items, etc are pretty symmetrical (same sleeves, no bangs that hang to one particular side etc) couldnt you get away with 5 Sprites
  • Moving Up (back showing)
  • Moving Down (front showing)
  • Moving Right (side showing)
  • Moving Diagonal Up
  • Moving Diagonal Down
Then for the other facing directions you could just mirror the Diagonal Up, Diagonal Down, and Side Sprites.

As far as coding something like:
if image_angle >= 0 and image_angle <= 25
image_index = whatever number side sprite is

if image_angle > 25 and image_angle <=65
image_index = whatever number diagonal up sprite is

if image_angle > 65 and image_angle <115
image_index = whatever number moving up sprite is

Issue you will run into is that rotating sprites go past 360 as the number just keeps going up so your switching code will stop working until you keep the angle within 0-360.
using the clamp(image_angle,0,360) will lock you rotation once you get to an endpoint forcing you to rotate the other way instead circling through. but if you find a more elegant
way of using the following code you should be good:

if image_angle > 360
image_angle = (image_angle - 360);
else if image_angle < 0
image_angle = (image_angle + 360);

Sorry for long post but that's one bootleg LOL way of doing what you asked if like me you cant do 3D models of what you need.
 
D

Dantevus

Guest
No need to apologize for the long post, ColdaDog. I appreciate you taking the time! I think both methods suggested here would be great depending on the project. I'll have to tinker with them and see which works best for my current one. :)
 
C

Chim

Guest
hey there, @ColdaDog could you help me a bit more?


movement of the player is "Mouse Click and the Player walks torward it"

I created in the object Player an event: Glob Left Pressed.

I try to code your solution, it works but only in one direction, here is the code:

only the first IF statement works, the sprite always turns right :(

Code:
if (image_angle >= 0 and image_angle <=25){
sprite_index = he_homeless_walk_right};

if (image_angle >= 25 and image_angle <=65){
sprite_index = he_homeless_walk_up_right};

if (image_angle >= 65 and image_angle <=115){
sprite_index = he_homeless_walk_up};

if (image_angle > 360){
image_angle = (image_angle - 360)};
else if (image_angle < 0){
image_angle = (image_angle + 360)};
 
C

Chim

Guest
Well i solved my mysery by myself :D

Code:
mouseDistance = point_distance(x ,y, obj_mouseclick.x, obj_mouseclick.y);

and:

if (mouseDistance >= 0 and mouseDistance <=25){
sprite_index = he_homeless_walk_right};

else if (mouseDistance >= 25 and mouseDistance <=65){
sprite_index = he_homeless_walk_up_right};

else if (mouseDistance >= 65 and mouseDistance <=115){
sprite_index = he_homeless_walk_up};
work then.
 

Nux

GameMaker Staff
GameMaker Dev.
Ah! I think i see what you're trying to achieve. (TL;DR at bottom)

like what @ColdaDog says, if your player is symmetrical, you only need to make half the sprites.
say you make 5 sprites at 45 degrees (could be more, such at 18 sprites each at 10 degrees), a quick way to change the sprite would be using maths instead of if statements:

lets imagine you have created 5 sprites facing:
Code:
- south      -> image index = 0
- south east -> image index = 1
- east       -> image index = 2
- north east -> image index = 3
- north      -> image index = 4
in this format they become easy to produce an easy procedure to handle them
(k̶n̶i̶f̶e̶ angle goes in, g̶u̶t̶s̶ image_index comes out!)

we will need 2 variables:
Code:
var angle = [any angle] + 90 // any input angle
var spacing = [angle spacing] // in out case it is 45 degrees
(i add 90 to the angle to make angle 0 face downwards - it makes calculations a lot simpler as everything can be handled in once swift case instead of two split cases)

from there we will need to restrict the angle to be within 0 and 180, however in a strange way
if the angle is 190, we do not set the angle to 180 degrees...
instead we want to set it to 170 degrees to make it symmetrical
this is done by taking away 180 degrees, which gives you the remaining angle.
you then want to take away that remaining angle from 180 degrees.
this should only be done if the angle is greater than 180 degrees, like so:

Code:
if (angle > 180)
{
    angle = 180-(angle-180);

    image_xscale = -1; // changes the xscale so the player faces left
}
else
{
    image_xscale = 1; // face right
}
Now we have the angle in the correct format, we can FINALLY change the image index (yayyy)! ;o;

This is done by getting the value of the rounded down (floored) value of the angle divided by the spacing:
Code:
image_index = floor(angle/spacing); // sets the image index
if the angle input is 270 (down), the image index will be 0

TL;DR - all the code together which should help you solve your problem:
Code:
//# create a script - scr_player_axis (or something else you would prefer)
var angle = argument0+90; // input angle
var spacing = argument1; // spacing
if (angle > 360) angle-=360; // this makes it so the angle doesn't overflow
if (angle > 180)
{
    angle = 360-angle; // this is the same as 180-(angle-180), it's just faster! ;w;
    image_xscale = -1;
}
else
{
    image_xscale = 1;
}
image_index = floor(angle/spacing); // change image index!
// end
now using:
Code:
scr_player_axis(270,45);
will set the player's sprite to be facing downwards!

and using:
Code:
scr_player_axis(260,45);
will make the player face south-west!

I don't know if i helped but I found it entertaining to solve a problem like this ;0
(i may have complicated things LOL i'm sorry ;^; )

(ps. in action )

##### QUICK EDIT:
I found a bug in which it resulted in negative angles.
I added a check of if (angle>360) to take away 360 degrees, e.g. 370 degrees get canceled down to 10 degrees!
 
Last edited:
C

ColdaDog

Guest
Glad my janky way of doing things might have contributed a little.

And I second this community is a very helpful bunch!
 
Top