By this point, if you’ve been following these blog posts, it should be quite obvious by now that I am pretty much the dedicated sprite artist of our group. I would love to write about something else, but I am left with little choice, as I really haven’t done much else, not counting character designs and such from early development.
This week, I hope to at least cover a different topic than character and enemy sprites. Yes, this week I have, among other things, worked on some sprites for the UI. When it became clear that the very still health point sprites needed some spicing up, I agreed to add some animation to them. But since the first attempt left them unaligned, and an already present glow, I decided to go all out at actually make new animations from scratch.
We had already talked about having the hearts break when you lose a health point, but I decided to take this one step further, and animate them crumble and break. I first made the heart gradually darker, while turning the glow into a reddish brown shadow around the heart. After that I drew short, thin and spread out lines with the eraser across the heart, and then frame by frame made these lines thicker, while also using thinner
Anchor points, great for quick animations
lines to connect them. This added a nice cracking effect. When it had cracked enough, I started cutting those chunks out and moving them away from the rest of the heart. I used the lasso tool to select the crumbled-off part of the heart, then I used the transform tool (ctrl+T) to move it. But in stead of moving it normally, I moved the anchor point to the bottom of the heart, and then changed the angle in relation to that point. This made the parts fall outwards.
A crumbling cookie with ants
Now I was faced with another problem, when I made the background transparent, the cracks looked too bright. They no longer looked like cracks, it was too obvious I just used the eraser tool. So I decided to use the ‘Square Charcoal’ 3D brush to add some dark
purplish red behind those cracks, as well as around some edges. This looked fine, but the rough lines around the edges did not look the same in each frame, it kind looked like a kind of jittery black mess crawling along the edges. Basically, it looked like a crumbling cookie with ants.
To fix this, I decided to draw some lines sticky black liquid that stretched between the separating parts before breaking off entirely. This really drove home the idea that this was a heart, even though it used the classic heart shape, instead of a realistic one.
Sticky black heart goo, what makes us all tick
Then I put all the frames into ‘TexturePacker’, a programme that makes sprite sheets from separate images, to put together a sprite sheet and call it a day! Sprite work is tedious, but with this, I at least got some variety!
maxsnall 
Hello there Max.
I have read your blog post and it was a rather pleasant experience. I get a marvelous sense of progression as I read. Your creative process really shines through and you explain every stage of the asset’s development. The images really add to this. They help your text make sense. I also liked the way you positioned them. Personally I have put my images (mostly of sprites) in a vertical line. But you have put them in a more “dynamic” way, which makes the blog post overall more interesting for the reader. Great stuff really.
There are no negatives really. The only odd thing I found was that you misspelled “instead”. You wrote “in stead” but your point came across, meaning it was not a big mistake. So maybe run a quick spell check before posting. Although, even when spell checking small errors can be left unnoticed. A solution can be to let a friend spell check, and why not spell check his/her while you are at it!
Good job on this week’s blog post! It was difficult to write two hundred words about your blog post since it was pretty much flawless!
Over and out.
//Jonatan Ersarp.
LikeLike
It’s good with some insight to what you’ve been doing before at the beginning, since I for example haven’t read your earlier posts. I like some personality in these posts that keeps them from being too dry.
The animation looks really nice. Love what you did with it and most of all how you did it. Maybe it is because the heart’s pretty small in that picture but I couldn’t see the “ants” that you spoke of in the first animation. The slimy strings that show in the final animation are great details that makes it alot more icky and horrifying when your hearts break. It’s also nice that you put up the entire spritesheet for the reader to look at as I’ve seen many other blogs that’s missing that final touch.
There’s a good structure from point a to point B in the text, as a reader I never found myself to get lost or anything and there was no confusion about anything.
There were some small mistakes in the grammar that I noticed, for example it should be “making” not “make” at the end of the second section. Some typos to, like “programme” wich should be “program”.
Overall I enjoyed this text and as stated before: great work on your animation!
//Daniel
LikeLike