This week’s dev-blog was typed very slowly because I cut a part my finger off while making salad… Yea… You don’t win friends with salad… Anyway, I’d like to talk a bit more about procedural content generation. We’re working on this large procedural world created using Voronoi math and assigning biomes, etc. (See blog posts 52 and 53) Currently the generated island looks like this (well, one random version of it anyway):
A little less patchy than it was a while back, and now there are some entities on the terrain like trees, people, and of course rabbits. There’s still some things missing though, roads and rivers!
To be able to create nice looking roads and rivers, I came up with a modular system that allows for cool automated content generation along a path. To create roads between two points in the world, I would do a standard A* path find, and then feed the path into the procedural road generator, and it would draw the road on the terrain, and add entities where it sees fit. The procedural generator works with paths, and modules that can modify this path, or perform an action on the path. Here is a shot from the procedural-editor:
There are two points with an interpolated path in between. As you can see I’ve added a ‘Repeat’ node, which repeats any action underneath it every x meters. Currently there’s only a ‘Paint Surface’ action, which draws tiles onto our terrain within a given radius. As you can see, the tiles underneath the yellow line have been changed to a stony looking surface.
Ok, so now we can draw a road on the terrain. Now it gets more interesting. What if we wanted trees along the road, evenly spaced? Well, that’s easy too:
I’ve added another ‘Repeat’ node, but this time it repeats every 8 meters. The first child node is a ‘Transform’ node, which allows me to offset everything to the side of the road. Then we have a ‘Place Entity’ node, which can place any entity in the world. I chose a Pine tree for now. As pine trees can’t live on solid rock, I decided to paint the surface underneath the tree to soil.
We can do this another time and add a few stones to the right of the road:
This was done in pretty much the same style as above. Other node types include random offsets, in between nodes, only at the end or at the start nodes, and I’m sure I’ll be adding more in the near future.
The nice thing about doing things procedurally is that you can change the start and end points, and it will still look cool:
Alright, that’s it for this week. Next week we’re getting new standing desks delivered (yay!!), and to allow for the delivery, we’re going to be out of the office. In fact, I’ll be visiting my beautiful and super smart sister in Memphis, I can’t wait! The dev-blog next week might just feature Elvis, Music and BBQ!
It’s Jesse here with some super cool information on how we slay out all our art here at Slick! If this goes by alright we’ll be returning to this format every now and again much like Nick’s “Waanderful-Tech” posts!
To start I thought I’d take you guys through the process of art creation here with a brand new character just for this Dev-Blog post. Now we are still getting some things ironed out with our new project but we’ll stay in the same theme which happens to be a sort of a wacky fairy-tale cartoon world with a slightly dark edge. I like drawing in every genre pretty much but I find that fantasy tends to resonate with people the most, probably because they were raised on all these classic ideas of dragons and swashbuckling. Dragon’s and swashbuckling? That sounds like a great starting point, let’s work on some sort of pirate-dragon!
Step 1: Rough Ideas, and I mean ROUGH
Now that there’s an idea rattling around in my head I’ll start scribbling down some ideas. This is actually the most fun I have drawing because there’s no rules. Plus a lot of rough sketchy stuff tends to look cooler as your brain has a good time making sense of the messy lines. Here we see that there is definitely some elements that are coming up, we got the classic cutlass in the sash, a parrot atop his tail, and even a nice big hat to emphasize his grizzled head. We’ll make him the first mate and call him Scalesbeard for now.
Step 2: Refinement Pass with some tighter brushes
Now that Scalesbeard has got it going on we’ll refine him and his parrot friend with a slightly tighter brush and get those ideas less abstract. The entirety of Shellrazer was drawn with 3 Photoshop brushes so we’ll use the same tools to make our sea-faring dragon. I tend to draw mostly from my head when it comes to making stuff for the worlds here at Slick. Reference is always super awesome but when it needs to be done faster I draw from my gut and just get it down. We can see that we added quite a bit of embellishments to those scratchy shapes, the attitudes of the character and his props really start showing up in this phase. Things like the hooked tail and the pistols in the sash are drawn with more confidence because we are more familiar with the character now and can safely say “Sure, Scalesbeard would totally have those!”.
Step 3: Color and shade that action!
The last pass I usually do for fast stuff like this is going over the refined lines again with a static brush. This brush has no sensitivity and keeps the lines even. I fill everything with flat colors and then throw a 40% black over the whole character and “Scoop” out areas of light with the lasso tool. This may not be the prettiest way of adding dimension but it’s super quick and gets the point across. With our new game in the works I’ve been experimenting with some other styles of shading and coloring but the game will definitely have the same visual feel of Shellrazer. So here’s our first mate Scalesbeard! If he were to be animated I’d start chopping his parts up in a puppet fashion and get to animating a few different states for him.
And there we have it! a quick look at how some goofy stuff gets made up here! I hope you enjoyed this small sample of how art gets done up around here at the Slick office and be sure to tune in next week for another super cool Dev-Blog. Let us know if you’d like to see some more goofy art stuff on here in the comments! And if you too are a fierce drawbarian and have any questions about being an artist on a small team just fire away and I’ll be sure to answer them! Have a great week everybody!
Today we’re doing another episode of the Waanderful tech posts. One question I get asked a lot is how we do our 2d sprite animation. Well, when I was working on N+ for XBLA we decided to invest some time in a sprite editor that uses 2d skeletal animation. This editor has evolved over time, and it is now fully integrated in our game editor (still called TrackEditor because of Scrap Metal :) ).
If you’re not familiar with the concept of skeletal animation, it basically means nodes linked to other nodes, like your hand is connected to your under-arm, which is connected to your upper arm. If you were to ‘rotate’ only your upper arm, your lower arm and hand move as well, because they are linked.
Below you can see a screenshot of the TrackEditor, which Jesse uses to create all the animations for the game. (Click on the image for a larger version)
On the right at the top you can see the basic animation controls, where you can add/remove/rename animations in the sprite, set the looping mode, change the duration, and preview it by pressing the play button. The looping mode controls how the animations loops in the game. The options are:
Loops the animation until you switch to a new animation
Plays the animation once and sticks on the last frame.
Doesn’t progress the animation at all, which is usually used for finely controlling the animation through code, for example for an aiming animation that aims up or down. We know the exact angle we want to aim at, so we can tell the animation to go to a specific time.
Below is a tree view control that shows the hierarchy of nodes. There are a number of different nodes:
(the little green & red arrow icon).
(the little bitmap icon). Draws a quad with a given texture/color.
(not shown). Draws a vertex coloured polygon.
(not shown). Allows us to link and animate a visual effect inside the sprite, for example sparks when hitting something, etc.
(not shown). Allows us to link a sound to a specific time in the animation.
(not shown). Allows us to link a camera shake to a specific time in the animation.
Linking visual effect, sounds and camera shakes to the sprites is super useful. Before I had this, I had to manually spawn these through code, and it just made things quite messy at times. Now I just call a certain animation in the sprite, and everything just works. Nice!
Below the tree view are the animation key-frames. The yellow line is the current time in the animation, which can be dragged left and right to scrub through the animation. As you can see, each node can animate the position, rotation and scale, and we can enable/disable linking to the parent for each of the components. Frankly we don’t use this much, but it’s nice to have for those times where you do need it. Because the selected node is a quad node, we can also animate the sprite index. The sprite index can be used to do flip-frame animation if you link more than 1 texture to the quad.
Then there’s Move Forward/Backward. This is used to alter the render order for each node, without changing the hierarchy. This really is quite important to have, there are many instances where you want a certain hierarchy, but a different render order.
Then Jesse plays around with this for a few minutes, he comes up with cool animations like this:
In this video the skeleton is enabled, depicted by the yellow lines. Each green-red axis is a separate part of the sprite.
Because the animation key frames aren’t set to a specific frame, but rather just have a time with a large number of decimals, we interpolate between the animation keyframes smoothly, adjusted by the playback speed or framerate. This makes for super smooth animations, with a minimal texture load compared to flip-frame animation. And the best thing is that you could still do flip frame animation for certain parts if you wanted to. Best of both worlds.
We just got back from an awesome GDC, and we’re actually a little bit down now that we’re back in the office. It was great to meet and hang out with a ton of interesting people and watch great talks about their experiences, we’d want it to last forever. Some people called it the post-GDC-depression, and as far as I am concerned, that’s a pretty accurate description!
We had a Independent Games Summit pass, which includes access to the Independent Games Summit (of course), as well as the expo hall for the rest of the week. Since I’ve become indie I found that the IGS has way more relevant talks than the main GDC. The main GDC talks are still interesting of course, but most of them are so specific that they are not very useful to an indie who has to do all the programming for an entire game. The IGS talks are less instructional, but way more inspirational, which is why I go to the GDC in the first place nowadays. I find it very interesting to hear about the development process of FRACT, the art and lifestyle of Incredipede, the sobering and raw talk about the development of Retro Grade, and many others.
After the IGS ended, we spent the rest of the week hanging around the IGF booth, and partying at night. We attended the Mojang party, where Skrillex and Diplo were playing an awesome back to back set. I’ve been a fan of Skrillex for a while, and heard Diplo through my lady’s music list, but we’d never seem them live. Needless to say, great times were had.
On the Friday night we were hanging around in the Hilton lobby and we met Daniel Cook (of Spry Fox‘s game Tripple Town), and we ended up showing a few tech demo’s. I was showing him the Voronoi generation code we’re using for the procedural landscape generation, and it turned out he knew the guy who wrote the page I based it on. Sweet! Dan, being the awesome designer he is, started jamming on the idea of using the Voronoi app as the base for a sheep herding game. We may just put it together during a game jam one day!
Alright, that’s it for this week, keep those turtle cannons blazing!
I almost can’t believe it: Slick Entertainment is a decade old! In the last 10 years we’ve made a bunch of great games, and I am super proud of what we’ve achieved with our small team: 4 fun games, custom C++ engine on 6 different platforms, 3 games feature online multiplayer, all hand-drawn art for […]