As you can see, you can create a large variety of backgrounds simply by laying tiles, like this, on a grid.

Super Mario World actually made this part of the gameplay design: unlike the other Super Mario games, the height you could jump and the rate at which you accelerated are determined in tiles. By having a block somewhere on the screen at all times, the designers made it easy for your subconscious to recognize the distances and give you a gut instinct for whether you could make a jump or not, and precisely how far you would need to run to make that jump.

Anyway, I need to make tiles for Vargenstone. Pixel art tiles are easy. You can see some in my portfolio.

Incidentally, there’s an important lesson in this tile set. Notice how there is no floor tile, and the wall tiles have a ‘scalloped edge’. They are transparent, and meant to be layered on top of a repeating floor of a different size. This was a clever thing I did all on my own, and didn’t bother to tell my programmer about. Which made his use of the tiles super-awkward, as he was trying to implement them the normal way. The way pretty much every game that uses tiles on the face of the earth implements them.

Lesson: talk to your teammates. Which is one of six or seven reasons I’m blogging: documentation on the proper use of the art.

So, this tile set is poorly sized, not designed for my programmer’s intended use, and incomplete. Also, it’s a first attempt.

In other words, I can do better.

Step 1: Make the floor.

For this, I’m using a free tool: Krita. Krita started its life as a Photoshop alternative, but as it became clear that GIMP did that better, Krita zeroed in on its strengths and became a digital painting tool.

The specific reason I’m using Krita is if you have this:

… and you press ‘W’, you get this:

But it’s not just an automatic test of tiling ability! In tile mode, when you draw anywhere on the tiled canvas, it works. You can draw across boundaries, and the program will cope.

Piece of Cake.

Where are the borders in that tile? You can plainly see that it is a repeated pattern, but you don’t know where the actual borders are, and neither do I. Krita makes painted tiles easy.

So. I’m going to paint a floor tile at 500×500 pixels. The final size for the graphic is 100×100, and a 300×300 version needs to exist. Scaling graphics down helps iron out little glitches and inconsistencies, so I’m going to work at a size that’s slightly bigger than the biggest version we’ll ever use.

First: I need to fill the tile with a blue-gray. Bluish colors feel more distant to the viewer, reddish colors closer. By setting the floor as blue-gray, I’m telling the player “this is background. Don’t bother focusing on it.” The characters and the walls will have warmer colors, allowing the player to pick them out instantly.

You see the moon through branches. Maybe it’s silent. Maybe there’s a wolf howl and then silence.

The camera pans down and, meanwhile, the title fades in.

Now, to do this properly, we need to have layers, where each layer scrolls at a different rate. So I’ve separated my title screen into layers, which I’m working on painting.

Layer 1: Moon and Stars. This layer basically stays still.

Adding in Layer 2: Mountains in the distance. This layer moves very little.

Adding in Layer 3: Krag Vargenstone itself. This is the whole point of the reveal. Also note it’s not finished yet.

The Krag needs more contrast and more fine details on the painting, but it’s coming along nicely.

Now, at the size I need to work, my CPU and GPU are already choking. My laptop, on the otherhand, has never even heard of processing power, let alone having any. So, something simple, like animating an orc, or finishing the title font.

A spritesheet is the frames all bundled together in one image. Like so:

Now, this is easy when doing pixel art, my preferred mode of operation. Let’s take an example:

This is cheoncheonse.* It’s a stance meant to strike fear into your foes, and if you’re doing it right, you can flick the sword straight into a cut without first pulling the tip back.

Why, you might ask, is there a hideous pink backdrop to this picture? The answer is in pixel art, a color is either transparent, or it’s not. 100% clear, or 100% opaque. I purposefully choose colors that hurt my eyes as stand-ins for ‘transparent’ because that way, when I’m going through and deleting the color, I can instantly see if I’ve missed a spot.

I do all this deleting after I put all the sprites together in the sprite sheet. With the cell surrounding the sprite as opaque, it’s easy to line everything up correctly.

However, HD art has multiple levels of transparancy. There are no jaggy pixel outlines on this guy:

…because some of the pixels are 30% opaque and some are 17.35% opaque, and so on.

This makes getting the position of frame right incredibly difficult. It can be done. I’ve done it before. But it’s a colossal pain.

Tools exist to do this very thing, and none of them work the way I want them to. Accordingly, I made my own. Just now.

See, I’m not attending Devgame because I want to do art for games. I’m attending Devgame because I want to design games. If I can’t hack it, then I’d love to make a living making games anyway, but I learned the art side of things for the same reason I learned how to code: the artist’s catch 22.

It works like this: if you are a writer, cartoonist, or whatever, nobody will publish you until you’re a known quantity. And you aren’t a known quantity until you’ve been published.

When I first booted up Super Mario World on the SNES and realized that this was what I wanted to do, I assumed that game design was like all the other arts. Nobody will produce one of your designs until you’ve designed something that has been produced. And since I’m poor as a churchmouse, and can’t outright hire people to produce my stuff for me, I assumed I would have to do everything myself.

Thus, I am a third-rate artist and a fourth-rate code-monkey. And please, don’t mistake that statement for humility. Third and fourth rate are still a hell of a lot better than average.

*I can assure you that is not spelled correctly. Then again, there are three official systems of transliterating Korean into Roman letters, and the techniques my teachers use seem to line up with none of them, so there you go.

]]>http://ehegames.com/2016/03/03/devgame-internship-2/feed/0343Devgame Internship progress journal #1: Momentumhttp://ehegames.com/2016/03/03/devgame-progress-1/
http://ehegames.com/2016/03/03/devgame-progress-1/#respondThu, 03 Mar 2016 06:18:57 +0000http://ehegames.com/?p=332For the one of you out there who is following my project progress (hi mom!), Bestiary has been back-burnered because I have an opportunity to work an internship as part of my Devgame class. So w00t.

I started strong, but at the beginning of February, I stalled out. Here is a list of reasons. The difference between reasons and excuses is that reasons result in solutions.

I decided to rework the character model to make his proportions more readable and rework the the walk animation to convey the right attitude. This amounted to extra work on a character that was already approved. This added up to burnout on that character. Moreover, I should have sent the proposed changes to my designer for approval, and did not. Solution: I use 3D-rendered rotoscopes for the dwarf. Get those rendered and approved so my programmer has something to work with that functions exactly like final art, even if it is not, in fact, final art. Submit the changes to the designer for approval. Make something else for the game.

Git is not accepting my submissions to the main branch, despite the fact that my programmer wants things done that way on the theory that our changes will never intersect. Several days of trying to sweet-talk git into doing things the ‘right way’ killed my momentum entirely. Solution: Document the problem, use a workaround (a dedicated art branch), and Get Something Done (more on this later).

Half my family and friends were born in February, and there’s a family event on Leap Day, so there were a lot of interruptions. Solution: Time travel to March. Mission Accomplished.

Now on regaining momentum. I have found that there are three things that lead to increasing and maintaining momentum.

The first is to brainstorm up the smallest possible task I can do and do that. Small motion begets larger motion.

The second is to show my work. I’m an artist. I’m egotistical. I welcome the incoming adulation. (And no, I don’t require you to provide said adulation. I selected my wife for just that purpose.)

(But if you feel like adulating, don’t let me stop you. Oh, and as a result of the most recent class, I’ve thrown up a portfolio here.)

Edit: Oh. Forgot the third thing. The third thing is inspiration. No, that doesn’t mean waiting for the muse to strike. That means mugging the muse. Specifically, that means watching movies, reading books, and playing games that get me thinking about dwarves, orcs, caves, and stealth.

Enough talk! Pics or it didn’t happen!

Here’s a couple of frames from the dwarf walking. The originals have long since vanished.

Problems:

The characters’ arm swing looked footloose and fancy-free. I wanted to convey a mix of tension and badassery. Solution: Change the animation.

The animated form had a lot of jitter (it’s where details jump around in a distracting fashion). In traditional animation, the lead animator draws the extreme awesome poses, the new guy draws the in-between frames, and the intern traces everything and gets rid of jitter. Lucky me: I’m the lead, the new guy, and the intern! Solution: Eliminate details.

I went and altered the walk cycle so that the arms swung less and the stance was more aggressive. Our Hero, Big McLargeHuge, may, in fact, be terrified. But if so, he’s expressing that through murderous rage. Stealthy murderous rage. Okay, how about quiet determination?

Here are a pair of animations showing the new walk cycle:

Problems:

Jitter is pronounced in the Southwest form.

He looks like he’s peddling rather than walking.

His arms motion looks like he’s use ski poles or a rail.

Now this is likely the point where a producer would step in and say “good enough!” But no. I had to make it better or worse. For science.

I altered the dwarf’s proportions to make him more distinct. I also altered the animation so he doesn’t really swing his arms at all. This is a reasonable thing: I practiced stomping around in a furious pose just to see how the arms actually swing.

The result was these two pics:

That second is the 3D model I use for reference. If I were doing a side-scrolling game like, oh, say, a Karateka clone, I would create the character entirely by hand — it’s hard to make rotoscoped 2D art look good. (Although, if I recall correctly, Karateka used good-looking rotoscoped 2D art…) But with eight directions of top-down, I needed reference to make sure I got the proportions correct.

In both of the new walk animations, the definition of the character’s muscle has been greatly reduced, to reduce opportunities for jitter. The unshaded sprite will eventually be shaded — it’s essential to maintain the brooding cavern atmosphere — but for now I’m going to render out a bunch of terrible 3D model animations, like the bottom one, and send that to my programmer for future use. Whether the proportions or the animation itself are approved or not, the overall image size and framerate is final, so I should be able to just swap final pics in.

]]>http://ehegames.com/2016/03/03/devgame-progress-1/feed/0332Dev Game 02: Stand on the Shoulders of Giantshttp://ehegames.com/2016/01/19/dev-game-02-stand-on-the-shoulders-of-giants/
http://ehegames.com/2016/01/19/dev-game-02-stand-on-the-shoulders-of-giants/#respondTue, 19 Jan 2016 02:30:32 +0000http://ehegames.com/?p=299Theodore Beale is a groundbreaking game designer and Satan Incarnate (the ground he broke was the invention of the FPS escort mission). He’s teaching a 10-session online course through a technical college in Zürich on game development and, by the looks of things so far, it will be worth your while to sign up for the eight remaining courses. I’m not going to write up a full report in this space, since the organizers surely deserve remuneration, but I plan on writing up a takeaway each week.

This week’s takeaway is stand on the shoulders of giants.

One of Mr. Beale’s little factoids was this: Grand Theft Auto is Pac-Man.

You’re Pac-Man, your mission destinations are the dots, and the cops are the ghosts.

There is nothing truly original.

It’s rare for a game designer to come up with something new to the world of game design. And even then, it wasn’t new to the world at large. Before there was Pac-Man, there were physical, meatspace games like tag and capture-the-flag. Innovation comes not from inventing new things, but combining old things (tag + TV screens = Pac-Man).

]]>http://ehegames.com/2016/01/19/dev-game-02-stand-on-the-shoulders-of-giants/feed/0299Dev Game Session 1: Make Yourself Usefulhttp://ehegames.com/2016/01/11/dev-game-session-1-make-yourself-useful/
http://ehegames.com/2016/01/11/dev-game-session-1-make-yourself-useful/#respondMon, 11 Jan 2016 22:48:55 +0000http://ehegames.com/?p=294Theodore Beale is a groundbreaking game designer and Satan Incarnate (the ground he broke was the invention of the FPS escort mission). He’s teaching a 10-session online course through a technical college in Zürich on game development and, by the looks of things so far, it will be worth your while to sign up for the nine remaining courses. I’m not going to write up a full report in this space, since the organizers surely deserve remuneration, I plan on writing up a takeaway each week.

The takeaway this week is make yourself useful.

It’s About Connections

Like most things, getting into game dev has a lot to do with connections. If you want to join a company, knowing someone who knows someone is going to get you farther than an application or portfolio. Even if you want to go lone wolf, like me (and Beale gave me food for thought on that count, too), you need connections: You need to have a community of people who want to play your game.

To Make a Friend, Be a Friend

How do you make these connections? Well, you have to reach out to people. You have to give them something of value. You have to hang out and be friendly. Some examples I can apply in my own work.

Simple art contributions. I do pixel art from time to time, and I’m pretty quick at it. Throwing together a sprite or tileset once every other week or so would be a relaxing break from Bestiary, and could be invaluable to people learning game dev who could use some consistent, well-made royalty-free art.

Featuring awesome stuff. I’m working on developing a Mignola-esque art style for Bestiary. Why not feature a lesser-known artist or two from deviantArt who serves as inspiration for my own work? Why not do that for other artists as well?

Digging into communities. I’m making Bestiary because I’m disappointed in available virtual pets. The concepts of Pokémon and Digimon can easily extend to darker, more mature themes, and in fact should, since the original fans of those franchises are now quite a bit older. Jim Butcher made a monster-training fantasy series that can be taken quite seriously.
The original fans of these shows almost certainly congregate on the interwebs, and I’d almost certainly get along with many of them. So I should.

Make Yourself Useful

There was a lot of awesome stuff in session 1. I took six pages of notes, and I definitely need to spend some time really, really examining what I want to do in game dev, and what that will look like, as a result. But the thing I want to leave you with is this: even the lone wolf dev needs people. And to get people, you have to reach out and give them a reason to keep you around. You have to make yourself useful.

]]>http://ehegames.com/2016/01/11/dev-game-session-1-make-yourself-useful/feed/0294Comment Toggleshttp://ehegames.com/2015/12/30/comment-toggles/
http://ehegames.com/2015/12/30/comment-toggles/#respondWed, 30 Dec 2015 15:11:00 +0000http://ehegames.com/?p=275I prefer my tools, such as my sprite editors to take up the whole screen. But a straight-up screenshot of that size would be annoying.

Zoom and pan given keyboard shortcuts because I couldn’t find my wireless mouse.

Box selection implemented.

Editor displays a list of parts you’ve cut out.

Next up:

Individual part editing

Changing names

Outlining color sections

Assigning palette indices

Scrolling through the part tray should probably be implemented as well.

Packing the resulting kibbles and bits into a fairly tight texture atlas and saving the relevant offsets.

Then on to the animation creator!

Wed, 30th:

Box selection now works from any corner, instead of forcing you to drag from top-left to bottom right.

Moved the piece tray into its own file for ease.

Mouse controls no longer work on the selector screen if the mouse is hovering over the piece tray.

You can scroll the pieces up and down in the tray with the mouse wheel.

Pieces in the tray now scaled to a common width.

Thur, 31st:

Added a new state for editing the individual layers of a piece.

You toggle into the state when you click the piece in the tray.

The state draws the piece as a whole

Added a simple text button drawer/thinger.

Got the two states to play nicely together.

The layer peeler now draws the layer you are currently working on.

Next up:

Switching layers.

Labeling the layer and the piece.

Selecting the specific source rectangle of the layer.

Rebuilding the palette and selecting indices.

Packing it all together in a single texture.

And the like.

1-1-16 Happy New Year!

Note: I can pass a delegate to a state that’s meant to serve as an input box. When the state is done, it will call the lamda, thus passing the result back. Is this a terrible plan? Probably, but I try more for speed of implementation when building my tools. Is this a terrible plan? Probably, but it’s the only way I’ve ever finished a game.

Added a text button with the name of the piece, so we can change that later.

Noted that my text buttons looked like those text stickers you used to use on your stuff, and intentionally ramped up the similarity because I can’t help dallying for artistic niceties.

Added buttons to switch from layer to layer

Created a palette and displayed it

Created a color editor.

Next step: Switch in an enum/int/int key for the pieces. Then make the appropriate ‘name changer’. Then make the part slicer for the sublayers.

Stuff and things! 1-2&3ish

I can change the names of the pieces. Also the modifications have been moved to an external dictionary for access beyond the slicer. First major step on the way to making this sprite-animator ready.

Next up: having the layer selecter read from and write to this common sprite thingus, so that palette changes persist. Then, outlining individual parts. Then the dreaded packer.

]]>http://ehegames.com/2015/12/30/bestiary-in-progress/feed/0268How to make an original game:http://ehegames.com/2015/12/29/how-to-make-an-original-game/
http://ehegames.com/2015/12/29/how-to-make-an-original-game/#respondTue, 29 Dec 2015 15:28:40 +0000http://ehegames.com/?p=266My wife pointed out a monster catching and raising game on iOS with the question, “Isn’t this what you’re trying to do?”

No. It’s not. See, here’s my design philosophy: I make the games I want to play. If someone else has made it already, I don’t have that unrequited desire to make the game, as I can requite said desire any time I like. Or at least as soon as I save up the cash to buy it.

Ergo, every game I intend to make has never been done before. Most are variations on things that have been done before. But all are, in some way, original.

As I gain skill and a feel for the market, I intend to expand my rubric: I intend to make games that lots of people, including myself, want to play. Once again, games they want to play because they don’t exist yet.