Sprint2: 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/

Sprint3: Animation Design

Walking Animation

Sprite Movement Inspiration

I found inspiration from the horse's running posture and modified the bent shape of the main character's legs.

Design Iterations

By moving the body of the main character and changing the degree of bending of its legs to show the walking form of the half-horse man.

Design Results

Supporting design display

Acquiring Weapon Animation

Sprite Movement Inspiration

Use the form of a horse prancing in the air as the animation when acquiring a weapon.

Design Iterations

My design in terms of action design is that when the main character gets a weapon from the backpack, his equipment and physique change and will show this action below. His physique will change to a strong form, holding a weapon.