Main Character Sprites and Animation

• Interface Design - Tree Cutting

Action: Wave the Arm

Sprite Movement Inspiration

I received the original design of the main character and the tree cutting tool from team2 and used Pixilart to complete the design of the tree cutting action. The above motion picture gave me some inspiration. In order to distinguish the main character's state in the game, I used a straight up and down tree cutting action with a large range.

Design Process

The continuous swing of the main character sprite's arm can make the tree-cutting action look natural and smooth. Based on the original design of the main character, I followed the color code and style used for the arm before, designed the pose with the arm raised at different angles according to the orientation and front and back of the main character sprite, and adjusted the axe sprite to the right size and angle, and finally spliced them into the animation.

Change: Characters of Muscle

The initial changes

I have made some changes to the frontal view of the main character sprite body. By looking at the action of cutting the tree in the above motion picture, we can clearly see that the human is in the moment of cutting the tree the muscles of the whole body will expand, and the arms are twice as thick as usual. Our main character is a naked centaur image, so I used the above centaur picture as inspiration to add some more obvious muscle design to the main character sprite.

Design Process

I added a clear abdominal muscle design to the waist of the main character sprite and widened the size of the upper body to show the full body muscle expansion. On the other hand, I widened the sprite's arms and muscle lines, and increased the realism of the tree-cutting action by changing the state of the arms and muscle lines during the arm swinging process.

Design Iterations

At the beginning of the design, I focused on making the axe swing, but the main character's arm didn't move to make the tree-cutting animation become a bit strange, so I changed the moving arm form and position to make the arm and axe swing together to increase the look and feel of the animation and realism. But at the same time, there is also a problem, the main character sprite's frontal arm is too thin, so the cutting action does not have a sense of power, so I added some muscle lines to improve this problem.

Implementation : Direction Change and Animation

Direction Change

Since, the main character is controlled and moved by pressing one of the w,a,s or d key, so the character sprite should also indicate the change in direction. It is done by calling specific animation when one of that key is pressed.

case Keys.D:
        walkDirection.add(Vector2Utils.RIGHT);
        entity.getEvents().trigger("ch_dir_d");
        triggerWalkEvent();
        return true;

So, the event "ch_dir_d" changes the sprite direction associated with key d. In the same pattern all other keys have been associated.

Attack animation

In somewhat similar sense to above when the user presses space to attack, a particular event is called which triggers attacking animation.

case Keys.SPACE:
        entity.getEvents().trigger("attack");
        entity.getEvents().trigger("attack_anim");
        return true;

Reference

Makers. Games.(n.d.).Lumberjack Woodcutter, https://giphy.com/gifs/readycontest-indiegame-lumberjack-YWxV34fttb0ljpRcoY

r/noisygifs.(2012). Lumberjack, https://www.reddit.com/r/noisygifs/comments/25nsok/lumberjack/

TLC Europe.(n.d.). Say Yes To The Dress Wood, https://giphy.com/gifs/tlceurope-iFVXy9PisQhU4GmsqZ

The Roku Channel.(n.d.). Travis Fimmel Lumberjack, https://giphy.com/gifs/therokuchannel-roku-the-channel-50-states-of-fright-xEZNIJuyNmnJ6XdJ1t

Biqqs.(n.d.). Centaur, centaur, horse, centaurworld, centaur world, fantasy, glendale, centaurs Sticker, https://www.redbubble.com/i/sticker/Centaur-centaur-horse-centaurworld-centaur-world-fantasy-glendale-centaurs-by-Biqqs/103922427.EJUG5#&gid=1&pid=3

G.German.(n.d.). centaures, https://www.pinterest.com.au/pin/413909021996293756/

• Interface Design - walk in game

Movement of the legs

Sprite Movement Inspiration

Design Process

Design Iterations