Cube Orbit – Almost Finished

Before Christmas, I started yet another game project. I had the core game loop prototyped almost a year ago. It always felt fairly accessible as well as fun and from a developers/designers perspective it promised to be a project with limited scope. Just what I needed to finally finish a game, since my last game “Gravity Racing Madness” was released almost 4 years ago. Now it is finally there. The first people play the alpha, I feature freezed; we are still tweaking the right balance, but that is it. There even is a website.

Cube Orbit is a free-to-play casual match-3 single player game with 3D graphics. An average run lasts between 45s and 10 minutes. The perfect distraction for commutes, standing in line, or other short annoyances. It was specifically designed for mobile touch devices. The game has a fairly abstract design with no references to violence, sexuality, drugs, or inappropriate language. It might be problematic for players with photosensitivity.

Digging into colored cube structures is aesthetically pleasing and naturally relaxing. Juxtaposition with a timer leads to a rewarding and challanging experience. The coloring cooldown is neccessary to avoid winning the game solely by fantic tapping and adds another dimension of depth to the game. Carefully choosen bonuses, powerups, and skills allow for long-term fun with the game.

Environment the Third: Considering the Camera Angle and Focal Distance First

2013-01-screenshot-1

The current game environment (see screenshot) has flaws:

  1. Its going for a realistic look which requires lots of texture work and large textures.
  2. Elements like bridges and ladders require lots of tris without producing enough buzz.
  3. The pillars block the view even for ridiculously placed cameras. Which requires expensive z-buffer magic (blending and double draw calls) with complex programming.
  4. The confined environment and camera properties call for a backdrop graphic or other kind of background.

Before I dive headless into the next iteration of the environment, I should do some thinking.

Camera angle and focal length determine how much of the environment can be seen. The angle is determined by the game mechanics: one has to be able to see what one has to see to play the game. The focal length is limited: getting the camera to close will distort the view on the important game elements. Besides these contraints, the camera properties can be tailored for the background.

As the following graphics show, longer focal length and steeper angles lead to less visible environment. This effects the environment elements that can be seen, their placement, and their size. Hence it is very useful to fix angle and focal length before hand, work with a placeholder environemnt, and do all the detailed work on the environment later.

Environment-Considerations

Anyhow, since a foto realistic style is beyond my abilities, would require too much effort, and doesn’t really work for an indie game anyways, I decided to go for a simple, more abstract look. Currently I am thinking about “Low Poly Terrains”. Artists like JR Smith, Alexandre Duforest, Vitaliy Prusakov, or Jeremy Kool are examples for this. It still need to test this might be very suited for my needs:

  1. Based on a first look on a few “Low Poly” tutorials, it seems to be doable with my skills.
  2. Since it is just colors, shadows, ambient occlusion (AO), and some paper/grunge texture. It should be possible to combine many les-res, pre backed AO and shadow textures with a single high-res paper/grunge texture that (re)used for all objects. Should deliver good performance. Needs to be tested to make sure it looks good.

Environmental concept art and YouTube

Early concept art of the environment for our first game.

To establish scenery and mood for the new game, I forced myself into digital painting for the first time. After sweating hard for a couple of days and with a little help from youtube, I came up with this beaut’ here. While it certainly does not reach the masters I learned from, it provides a sufficient starting point to create further assets for my “Zuma meets The Binding of Isaac” genre-mix.

Here is a list of YouTube tutorials that I found rather useful and complementary to each other. I hope this helps you to filter the abundance of vids for this subject matter.

 

Photoshop basics for painting digitally

The following video series explains the basics for using a drawing tables, photoshop brushes, colors, wet-in-wet color mixing, color pallets, using layers in paintings, lassoing, and more. All you need to start painting in photoshop.

Perspective, Values, Light

As I learned these three concepts are key to any painting. I found the following tutorials most useful for explaining these concepts. (I left out composition: it seems to be hard to teach and explain. At least, I could not find a video on it that I liked.)

Perspective:

Values:

Light:

Example paintings

The amount on high quality timelaps videos with great artists doing great art seems unlimited.

I picked the next clip as an example where the artist only uses basic brushes. Very pure demonstration on composition, perspective, values, and light.

The following uses different techniques relying on textures and custom brushes. But in the end, it is still composition, perspective, values, and light.

Pro artists are fast. Timelapses of pro artists are even faster. This leaves the impression that you have to hurry. I found it very necessary to slow myself down. In this example the artists shows a complete painting drawn in realtime. This is still a way faster speed than I recommend for beginners like me to aim for though.

4 Different Techniques for Digital Inking (and Coloring)

Collection of 4 quality youtube tutorials on different approaches to digital inking (and some coloring). Targets mostly Adobe Illustrator.

To ink drawings is a common task in game development. Game assets like 2D sprites, backgrounds; concepts arts; or marketing assets (e.g. icons, feature graphics) are just a view examples were you have you have to turn your sketches into high quality works of digital art. After watching lots of youtube on the subject, I decided to summarize those video tutorials that I found most helpful. As I learned, there are different techniques that you can use. The trade-off is more effort and more control vs. less effort and less control (i.e. more skill/training required).

The following tutorial shows you the basic shapes of brushes needed for inking (this is very meaningful for all techniques and tutrials). These different brushes give you full control over shape and thickness of your lines. Lines can be drawn with a drawing tablet or with Bezier curves for even more control.

The next tutorial only uses one brush: thin at the beginning and end of a stroke and broader in the middle. This creates the typical “ink-line”. The tutorial presents an interesting technique, where you overshoot lines on purpose to create different line shapes. The overshot ends of a line are later removed with an easy to apply Illustrator trick. This allows to create great results in less time. Still gives you a lot of control. It is most reasonable with a drawing tablet. There is a short version (first) and a long version (second).

The third tutorial only makes sense with a drawing tablet. Using a simple calligraphic brush, different line shapes are created via pressure variations on the drawing tablet. This requires some skill, otherwise you have no control over the lines. If you are patient enough to develop the necessary skill, this produces astonishing results. If you are not patient enough, you better stick to the previous tutorials.

The last one applies the techniques of the previous tutorial to Photoshop. Independent of the uses tool and techniques, this tutorial contains some great general tips for inking and coloring. It is also fun to watch, since the produced example art is astonishing.