Gallery – 100 Days of Art Practice Days 11-20


Day 11: Finished my first sketchbook! Then started a new one and practiced some Ernest and Celestine style.

Day 12: Watercolor of one of the Ernest and Celestine drawings. It’s easy to mess up an ink drawing with sloppy watercoloring! Then a freehand drawing of Big Ben, our giant old stuffed bear. This was my first real freehand. I liked it.

Also, one ink practice of the game Hollow Knight, and one of my old Bugsby.net games, Roshambo.

Day 13: A lot of time spent working on the first page of the Earthbound comic, doing practice drawings of town, doodads and characters, and doing some photoshop layout.

Oh! And I finished the page!

Day 14: Can’t remember what I did. All I have is this bizarre remnant:

Day 15: Avatar practice drawings. I really like the earth bender, though since Jin pointed out that his arms and legs are shrimpy relative to his head, I want to draw a much taller Sokka standing behind him, arms crossed, unimpressed.

Day 16: Hands from a reference. Everyone was right. Hands are so hard. But I had so much fun drawing this.

Day 17: Without setting out to do it, I drew something controversial. Also, Jeremy Clarkson.

Day 18: First tests of the grey pen. Gosh, she looks scary. The perspective drawing is nice though.

Day 19: Discovered Chris Chatterton, whose style I think I would like to copy.

Day 20: I experimented with quickly adding art assets to games, from a hotel room with no tablet or scanner. This was also a good test of Honey. I got the following proof of concept off the ground with about forty minutes of art, ten minutes of photoshop, and twenty minutes of programming.

The background is https://watercolorpainting.com/staging/wp-content/uploads/2016/11/wispy-clouds-featured-image.jpg, and the lovely music is from my friend WhiteShip, a part of the failed game that led to Honey and something I really hope to use in future games.

Gallery – 100 Days of Art Practice Days 1-10


Day 1: Just trying out some styles (Tom Gauld, Zach Weinersmith, Stanley von Medvey) to see how well they fit with my own style.

Day 2: More style exploration. The first picture is Spaceman Spiff with a bit of Aaron Burr.

The second picture is just… weird. I started off by free-handing someone’s space station drawing, then decided it was a hat, then went to photoshop and traced it, then ended up with this:

Day 3: Bunch of ink drawings from reference pictures. The face I tried drawing upside down.

Day 4: More ink drawings from reference pictures. Three of them are from the series “Usagi Drop”. I’m going to try to water color the last one.

Day 5: Sure enough, I did the watercolor. The other stuff is freehand doodling.

Day 6: These ones were my own ideas. First one is my first self portrait. I used references for the pie and the pool float.

Day 7: Might as well start a comic!

Day 8: Bit more comic practice. These are all from Earthbound.

Day 9: Doodles

Day 10: More Doodles.

And that’s the first ten days!

Let’s Make Honey! Version 0.15c – Sprites!


 

Let’s Make Honey!

 

We finally get to finish version 0.15 by making sprites.

 

 

I tried to avoid this for a long time, I think because I’m still afraid of allocating and deleting in C++. Now I think I was crazy to wait so long. Sprites are so damned convenient.

 

The concept here is simple. We make a class which abstracts a 2d object drawn to the screen. It draws a particular picture (a graphics label in our system). It has all the things our 2d graphics system is currently aware of: position, color, rotation, scale, and opacity. It has methods to get and set each of these, and what’s more, it has methods to set each of these with a transition animation, by using an effect under the hood.

 

When using Honey, instead of calculating all of these things in the draw method for each picture we want to draw, we now create a Sprite, set the parameters wherever we want, and in the draw method, we just call sprite.draw().

 

I feel really dumb for not introducing this earlier, because it is a core element of all 2d graphics systems since the Logo Turtle.

 

Anyway, here is the diff for sprite.cpp.

 

In lines 13 through 20, we have a constructor which takes a label (assumed to be defined in graphics), position, color, opacity, rotation, and scale.

 

In lines 22 through 116, we have ordinary getters and setters, all simple, as well as animated set methods. The animated set methods take an animation duration, and each define a tween effect which starts at the old value, ends at the new value, and lasts for the specified duration. For now, these are all going to use the tween style that I think is best for that type.

 

Color requires three tweens, one each for R, G, and B. We could have had one tween from 0 to 1, but we would have had to store both colors, which is less good if someone calls the animation method twice quickly. More on that in a minute.

 

Opacity gets one additional convenience method to fade the sprite in and out. We use a sinewave tween from 0 to 1 to do this. Position also gets an additional method to shake the position.

 

We have two draw methods, one that just uses the default position, and (for drawing the same object multiple times) one which takes a new position value.

 

Lines 118 to 120 is the method that uses the default position. It just calls the other method with the default position.

 

Lines 122 to 165 are the proper draw method.

 

We take each thing, position, color, opacity, rotation, and scale, start with the stored value, adding the tweens if they’re busy, using my chosen blending style. I chose sigmoid for position, color and scale, linear for opacity and rotation, and sinewave for the in-and-out opacity fade.

 

Note that the tweens actually update the values as they go, so if someone creates a second animation to override the first one, it won’t reset to the oldest position, but instead start from the current location.

 

We call graphics to set the color, and finally we call graphics to draw the image with all the other values.

 

Done! That was not hard.

 

Well, sort of. In a subsequent hot fix, I gave each sprite a unique id and used it to make tween labels unique for each sprite. This was necessary because multiple sprites were interfering with each other’s animations. The hot fix also made Textbox a subclass of Sprite, which was natural.

 

Now done.