Wow, has it really been five months since I last posted here? Somehow, it's not hard for me to believe. I'm breaking the blog silence proseletize the newest tech frippery I've become enamored with: Sass.
Sass is compiled CSS. It fits in with the current (kind of stupid, in my opinion) trend of taking a language or syntax that doesn't need compilation, then adding a compilation step in order to get some syntactic sugar. Coffeescript is another example. Sass is a Ruby program that will sit in your CSS directory, scan your .scss or .sass files, then spit out .css results. With these sorts of things, you have to decide if learning new syntax will save you time later on.
I'm doing some CSS work for the first time in about a year, so figured I'd give Sass a shot, because I'm bored out of my mind, and need to do something to keep myself entertained. After working with it for about an hour, I was pretty much converted.
The main benefits I see to Sass are the nested syntax, mixins, and variables. With it, you can write CSS in a "nested" fashion, similar to how your HTML document is arranged. It makes it much easier to scan a block of Sass to see what style corresponds to what HTML element. An additional benefit is that copy/pasting large blocks of CSS is now possible, without having to remove or change the top level selectors for a rule. I've been able to create whole new page layouts extremely quickly using this technique.
Mixins and variables are just extra bonuses. Instead of having to write a bunch of vendor prefixes for box shadows or gradients, I can create a box-shadow mixin that can then be included in every rule that requires that style. Variables are great, too: you can just define a $text-color variable, then refer to it easily later without having to memorize an arcane hex value.
If you work in web development, I'd recommend giving Sass a try. Check out this article at 37signals.com for more info, then read the Sass tutorial. Next stop: productivity!
Finally, after a lot of procrastinating, here's the first part of the introduction to Unity that I promised so long ago. Unity is both a game engine and level editor, and is primarily visual in nature. You'll create entities (known as "GameObjects") in your game, then tell them how to act by attaching "components" to them. For example, a "RigidBody" component makes a GameObject use Unity's physics engine, and an "AudioSource" component allows a GameObject to emit sounds. While Unity's built-in components are powerful, you'll have to create your own components (via scripting) to truly make your own game. However, the total amount of actual programming needed to get objects to interact the way you want is minimal compared with creating a game exclusively with code.
In Unity, the terms "scene" and "level" can probably be used interchangeably. A Unity project can contain multiple scenes, and these scenes can be swapped in and out as your game progresses. For example, when a game is launched, the player might be presented with a title scene containing UI, allowing them to select a gameplay scene. When the player chooses, that scene is loaded up and then the player can start interacting with the game. The game that we'll make for this tutorial will have two scenes, a title scene and a game scene. Pretty basic, but it'll introduce the concept of switching between scenes.
First, we'll create the title scene. Bust open Unity and create a new project. This project will be based off another game where aliens are trying to "invade" from "space." Let's call it "Alien Attack." So, when you create a new project, there'll be a default scene already there for you. Hit Control/Command + S to save it, and name it "Title." All this scene will do is show a title graphic with a button to start playing. Fire up Photoshop (or Pixelmator or Acorn) and create a logo for the game. Now, since I'm using Photoshop, I'll just save the image as a PSD right to my desktop, and name it "title-logo.psd". Now, create a new folder in the "Project" widget in your Unity window and name it "Images." Drag the PSD from the desktop to that folder, and BAM! You've successfully imported it into your game. If you navigate to the main project directory in your filesystem, you can browse through all the assets you've added to the project, and edit them directly there.
Now we can start adding stuff to the title scene. Click the GameObject menu at the top of the Unity window, and select Create Other > GUI Texture. This will create a default Unity watermark. Looks kinda cool, so let's leave it in there to show that this game was made with Unity! Select the "UnityWatermark-small" object in the Hierarchy view and edit the Transform component using the Inspector until the logo is positioned appropriately in one of the corners of the screen. Now let's add the game logo we just created. Click the GameObject menu again, and make another GUI Texture. Rename this texture "Logo", and select it in the Hierarchy. You'll see in the Inspector, below the Transform component, there's a GUITexture component. Drag the logo PSD you created from the Project widget into the "Texture" property of the GUITexture. Presto, now your logo is displayed! Adjust the Transform component's Position and Scale properties until the logo looks good. If you want to, you can also change the background color of the title scene by editing the Main Camera object in the Hierarchy. Select the camera, then click the color box in the Camera component in the Inspector. I changed my background to black, but you can use whatever color you want.
Now, in order to make a clickable button that will take us to the game scene, we'll have to create our own "Script" component and attach it to an object in the title scene. The script will display a button and load the game scene when clicked. In the Project window, there's a little "Create" button at the top. Click Create > Javascript to create a new Javascript script. Supposedly C# is the most powerful choice for scripting in Unity, but all the official Unity scripting documentation is in Javascript, so that's what we're going to go with in this tutorial. Name your new script "title" to show that it's in charge of showing the user interface in the title scene. You should probably also create a new "Scripts" folder in the Project window, to help organize all the scripts that will eventually be created. Drag the "title" script into the new folder, then double click the script to open it up in MonoDevelop, the script editor that ships with Unity. You can use any editor you want, actually, but we'll use MonoDevelop for now. You should see that the script comes pre-populated with some functions named Awake and Update; those will come into use later for other scripts we'll create. For now, just add this code to the script:
function OnGUI() {
var width = Screen.width;
var height = Screen.height;
if (GUI.Button(Rect(width / 2 - 50, height - height / 5, 100, 50), "Start!")) {
Application.LoadLevel("Game");
}
}
This will create a 100x50 button with the text "Start!" on the screen. However, if you try playing the game right now, the button doesn't show up! That's because a script has to be attached to a GameObject in the Hierarchy before it can run. It doesn't matter what object this GUI code is attached to, so we'll attach it to the main camera. Drag the script onto the Main Camera object in the Hierarchy, then try running the game again. Success! However, if you click the button, you'll get an error, because we haven't created the "Game" scene yet, which we'll do next.
Under the File menu, select "New Scene" to create another scene. Save it and name this one "Game." This'll be the scene that we create our actual game in. One thing to remember is that for every scene you create that you want to be in the final game, you have to add it to the "Scenes in Build" property in the project's "Build Settings." Go to File > Build Settings and drag both the Game and Title scenes into the Scenes in Build window.
Next, let's set up the camera in the newly-created Game scene. Although the game that we'll create uses 3D objects, we'll constrain movement to be along only two axes. This means that we can position the camera to create a cool effect where enemies at the top of the screen are able to be seen from a lower angle. Move the main camera to (0, 70, -6) and set the rotation to be (60, 0, 0). This will make the player (positioned at the origin) appear to be at the bottom center of the screen. Alternately you could make the camera point straight down and make the projection "orthographic" to remove all perspective from the game objects, which would better simulate a 2D game.
One thing we might want to change is the fact that there's no light source in this new scene, so any objects we create will be pretty dark. In the Hierarchy, click Create > Directional Light. Select the new light, and set its' position to be (0, 20, 0) and rotation to be (90, 0, 0). This will create a light pointing straight down that will illuminate the tops of all the game objects we create.
Next, let's create the player and enemy game entities. I thought it would be cool to do 3D pixel art, in an attempt to go beyond the standard cubes and spheres most tutorials provide. Also, since the player and enemies will be made up of a bunch of GameObjects, I'm going to attempt to create a cool effect where the entity breaks apart when it dies, by assigning physics components to each "pixel."
In the Scene view, click the y-axis in order to get a top-down view. We'll follow Unity conventions where a "top view" means the x-axis is left/right and the z-axis is up/down. Or, alternately you can set up your camera to view the X/Y axes. It really doesn't matter as far as I know.
First, create a cube in the Hierarchy window. We'll use this cube as a "pixel" to create an enemy object. Set its' position to (0, 0, 0) by using the Inspector. This cube will be the center of the object, so we'll build around it. Next step is to give the cube a better color than the default grey. To do that, create a new material in the Project window, and name it "Alien." Click the Main Color color box in the Inspector, and choose a bright color. Drag this material onto the Cube object you created in the Hierarchy, and BAM!, the cube turns green! The great thing about this is that you can make a change to the Alien material, and all the objects that use the material will be updated automatically.
Now select the cube in the Scene window using the Translation tool, and hit Command-D (or Control-D) on your keyboard. This will duplicate the object. However, it's still occupying the same space as the original, so drag it to one side using the translation arrows. Hold down Command (or Control) as you drag so that the object snaps to the unit grid. This means that you can easily place the duplicate cube 1 "meter" away from the original, without having to manually change the coordinates. Continue to duplicate and move cubes away from the center cube until you're happy with what the alien looks like.
Next, we'll "parent" all those cubes into a generic GameObject. That means we can move the GameObject and all the "children" will move with it. Click the "GameObject" menu, then select "Create Empty." This will put a new GameObject in the scene Hierarchy. Place the empty object at the origin (0, 0, 0) using the Inspector. Using the Hierarchy window, select all the cubes you created and drag them into the GameObject. You'll see that a small arrow gets created to the left of the GameObject entity, and all the cubes are now indented, to show that they are "children" of the GameObject. You can show/hide them by clicking the arrow next to the parent. Now you can rename the GameObject to something more descriptive, like "Alien."
To deal with collisions, we don't want to have to check for a collision against every cube that makes up the alien. Instead, we'll create a Box Collider component and attach it to the parent GameObject. That way collisions can be checked against one big collider, instead of lots of little ones. Select the Alien object in the Hierarchy pane and click the "Component" window menu. Select Physics > Box Collider to add a Box Collider component to the Alien. You'll see that by default, the collider is a 1x1x1 cube. You can adjust the center and size of the collider until it fits around the whole object (I made mine 11x1x7). Also, make sure that the "Is Trigger" option is checked, which means the collider will only be used to detect collisions, not for physics.
We'll add some basic sound effects to our Alien. Make sure the Alien object is selected in the Hierarchy, then click the "Component" window menu. Select Audio > Audio Source to add an audio player component. This gives a GameObject the ability to emit sound effects via a script. Now, the player won't hear anything unless there's an Audio Listener in the scene, but fortunately the main camera has an Audio Listener component by default, so you don't need to worry about it. Bust open sfxr or cfxr and create an "explosion" sound effect that you like, save it to your desktop, then drag it into the Project window to add it to the project (you can create an "audio" folder for organizational purposes if you like). Now highlight the Alien object again, and drag the sound file into the "Audio Clip" area of the Audio Source component in the Inspector. We'll play this sound effect via a script that will be attached to the Alien object later.
The last thing we'll do is assign a tag to the Alien. This lets us easily determine the type of object it is when it interacts with other GameObjects. For example, if your player object hits another object, you can test and see whether or not that other object is tagged as an enemy. If so, then your script can take the appropriate action. Again, make sure the Alien is selected in the Hierarchy, then look at the very top of the Inspector. There you'll see a "Tag" property, which you can select from a drop-down menu. Click the menu, then choose "Add Tag" to create your own custom tag. Modify the "Size" property of the list that shows up, and create a new "Enemy" tag. Now you can go back and assign that tag to the Alien object.
Finally, we're ready to actually create a "prefab" based on the complex GameObject we just put together. Prefabs are saved GameObjects that you can easily add to your game, either dynamically while the game is running or just by dragging the prefab object into the Scene. The advantage of using prefabs is that you don't have to manually set up each new enemy object, you can just create one archetype and duplicate it a bunch of times. In the Project window, click the "Create" button and create a new prefab and name it "Alien." Drag the Alien object you created from the Hierarchy over on to that prefab icon, and you'll see the object name in the Hierarchy turn blue. You can make sure everything worked correctly by now dragging the prefab back into the Scene view; you should see another copy of the alien appear.
Now, repeat the steps we used to make the alien, except this time create the player's ship. Remember to parent all the cubes into a new GameObject, add a Box Collider, an Audio Source (with a "shooting" sound effect), and tag the ship as "Player" before making it into a prefab.
You now have the two objects that will be used in the game. How about getting them to do something? Here's where we'll create more Script components to use with our game objects. Create a new Javascript script component and name it "player." Double-click it to open it using the default Unity code editor, MonoDevelop. Here's the Javascript code that will go inside:
// player.js
// #pragma strict enforces static typing in Unity Javascript
#pragma strict
// This public variable can be easily changed later in the Inspector
var moveSpeed:float = 5.0;
function Update () {
// Get input from WASD or arrow keys (values from 0.0 - 1.0) and modify it by the "moveSpeed" variable
// Also make framerate independent by multiplying by Time.deltaTime
var x = Input.GetAxis("Horizontal") * moveSpeed * Time.deltaTime;
var z = Input.GetAxis("Vertical") * moveSpeed * Time.deltaTime;
// Modify the "transform" component of the GameObject this script is attached to
// Translate (move) it along the X and Z axes.
// Y will always be zero because we only want to move in two dimensions
transform.Translate(x, 0, z);
}
Save the script, then drag it on to the "Ship" prefab that you created. You should see the script component added in the Inspector when you select the Ship. Create a new instance of the prefab by dragging it into the Hierarchy, then set the position of that instance to (0, 0, 0). Now if you click the Play button at the top of the Unity screen, you should be able to move the Ship object around by using the WASD or arrow keys. The default movement speed in the script is pretty slow, so feel free to change the moveSpeed value either in the script or by using the Inspector.
Aaaand, break! Right now we've got a solid base for our game, having created complete player and enemy objects. The next installment will cover scripting a bit more in depth, so that we can actually shoot enemies. Let me know if anything was unclear, and I'll do my best to help out. Also, feel free to download the project file to get started.
Since it’s been a few weeks since I last posted, I figure my loyal audience might need an update as to what’s happening in Ganbaru Games-land. Well, in December I took a break from development to play through The Legend of Zelda: Skyward Sword (which was awesome, by the way). January was regulated to dealing with various illnesses, one after the other. First my daughter got a cold, right after Christmas, and then it spread to my wife and me. No sooner did we start to get better, when the kid got sick again! And now I’m coming down with yet another cold. Bad news! So, as you can imagine, sleep has been taking precedence over programming. </p>
However, every dark cloud has its’ silver lining. In this case, the silver
lining is a new, addictive game I’ve been playing called Triple Town. Triple
Town has been a Facebook game for a while, but I don’t really play Facebook
games, so I never tried it. Fortunately, Spry Fox,
the game’s developer, has released both iOS and Android versions,
so I figured I’d give it a shot. Spry Fox is actually involved in some litigation
right now, suing a former partner that has released a pretty blatant Triple Town
clone, so weirdly that also made me more interested in the game. If it’s good
enough to straight up copy, there must be something there, right?
The idea behind Triple Town is simple: build up a town on the game grid by placing three or more objects next to each other. For example, three “grass” tiles create a bush, three bushes join to form a tree, three trees make a hut, etc. I’m actually not sure how high you can go, since I’ve never gotten anything above a mansion (3 huts -> house; 3 houses -> mansion). Pretty standard idea, but the twist is that the new structure forms where you placed the last match. You therefore have to plan out your moves so as to eliminate gaps between buildings. </p>
The other twist is wild animals. Bears, to be specific. Every turn, you get a random
object to place, and sometimes that object is a bear. Bears move around the board,
preventing you from placing regular tiles on the spots they’re occupying. Even
worse are Ninja Bears, who jump erratically around the stage. You can get rid of
regular Bears by pinning them in a narrow area so they can’t move, but Ninja Bears
can only be disposed of by Robots, which clear an object on any tile.
“Bear Control”
is a key aspect of the game; you’ll find yourself building special holding areas
for bears, so they can’t run amok throughout the whole stage.
The game mechanics are deceptively simple, but very addicting. There’s just enough of skill vs. randomness to keep things interesting. In fact, once you get the hang of the game, you’ll probably want to play for some marathon sessions. This is where yet another interesting design choice comes in. Triple Town is a F2P (free to play) game, and its monitization strategy is quite clever. As you play the game, you have a limited number of moves you can make. Your move meter recharges itself over time, and you can also buy more turns using the in-game currency, which is earned by building large towns. However, if you don’t perform well enough during the course of a few play sessions, you’ll eventually run out of turns. That’s when you can either buy more in-game currency (for real-life $$$) or purchase the “Unlimited Turns” DLC. Of course, if you’re patient and wait for your turns to recharge, or create large cities, you can always play for free.</p>
In conclusion, since Triple Town is a free download, you basically have nothing
to lose by checking it out. Who knows, you could get addicted just like I have.
I think the only way that Triple Town could be improved is if Spry Fox had named
it “Trippple Town.”
Heyooo, time again for me to write another game review instead of actually making
games! This installment will cover the “underground” PC hit with the most
redundant/nonsensical name ever, Super Crate Box. Super Crate Box (hereafter, SCB)
was released a year ago to critical acclaim by Dutch developers Vlambeer.
Unfortunately, the first release was Windows-only, so I never actually tried it
out (although there’s a Mac version now). Fortunately, Vlambeer decided to cash
in a bit on the success of the freeware PC release by porting the game to iOS. So, how is it?
Well, SCB is a single-screen shooting game. The goal, as the name of the game might
imply, is to collect “crates.” Nabbing a crate will increase your score by 1. Hey,
it’s not quite that easy! To prevent you from becoming a crate-collecting master,
baddies stream down from an opening in the ceiling (I don’t know how they got there).
You can shoot or avoid the enemies, but if an enemy makes it to the bottom of the
screen, it falls into a fire pit. Naturally, this enrages and teleports it back to
the top of the screen, where it becomes even harder to deal with. Fortunately, every
time you collect a crate, you get a different weapon to help eliminate the hordes of baddies.
Seems simple? Deceptively so. The fun of the game is the balance between killing enemies
and collecting crates. While each crate gives a weapon that is better than the pistol
you start with, some weapons are certified lemons. The disc gun, for example, will
chop baddies in half, but it also ricochets and can slice you in half as well. Dual
pistols just means that you can shoot underpowered bullets both left and right.
Mines take a second to arm, which doesn’t help
when there are enemies right on top of you. An average game means getting a good weapon
(such as the grenade launcher) and clearing the screen, then picking up as many crates
as you can until another good weapon appears.
SCB uses virtual “buttons” to control the action, and while physical buttons will
always be better for playing games, Vlambeer has managed to make the controls not
quite as painful as other iOS games. This is because the hit-detection area of each
button is much larger than depicted on screen, so even if your fingers move around
in the heat of battle, you’ll still usually be able to control the game. Every once
in a while I’ll experience a “cheap” death, where my fingers migrated off the buttons,
but most of the time my character bites it because I’m too greedy for crates.
The verdict is in, and that verdict is: get it. It isn’t too often that a “simple”
game such as SCB provides such a level of addictiveness. And, as always, for $1, you can’t go wrong on price.
As you all may have noticed, it's 2012 now. The end of every year has its' share of annoyances, not least of which are people trying to get you to donate money before the end of the year. If you visited Wikipedia at all in the past month, you've no doubt completely tuned out the "Read a Personal Appeal!" banners that were strewn across each page. Normally I tune all that stuff out too, but this year I got to thinking a bit about how privileged my life is.
Grew up in a solidly middle class family
Graduated from both high school and college
Have a full-time job with health insurance
Disposable income to buy Apple kit
Disposable time to program said kit
It's pretty remarkable, actually. I'm probably in the top 1% of the world in terms of having a comfortable life. So I decided to try to be a little bit less of a selfish prick and donate some of this past year's gaming income to a worthy cause.
I decided to help the scholarship fund for Harambee Christian School. It's a K-7 school in Columbus, Ohio, that provides private education to kids who would otherwise not have many opportunities. I figured that since Harambee is a program in my city that tries to give kids something that I take for granted, helping out financially would be the least I could do.
I realize that this post is about a month late to try to convince people to donate to charitable organizations before the end of the year, but you should think about regularly donating to a non-profit regardless. The audience of this blog is primarily people just like me: middle class, with enough income to buy crap we really don't need. Take a step back and think about how you can really help people, and not just by providing bits of mindless entertainment to smartphone users.
