Exploring some new styles. The first image was built tile by tile using Tiled. The inspiration came from old Japanese maps. The “mood” was exciting at first but it felt to me like it overpowered the design of the game.
The change in perspective (2nd image) felt like a breakthrough. The Prince lends itself to symbolic art much more than I realized. This was a very unpolished doodle but it aligns much better with the quick, casual nature of the gameplay.
We’re updating the homepage in an effort to get something accomplished this week. Just kidding – really we’re starting an email database and the homepage needs to streamline viewer subscription. While the hood was popped, I went ahead and upgraded a handful of other assets. After spending an inordinate amount of time on animating a header graphic, I thought it might be cool to share the iterations. Take a look..
Here’s my static header image.
The goal is to make an animated gif in which the sun rays rotated. It’s a pretty big graphic so file size is definitely an issue. However, for the first pass, we just want to get a benchmark. Enter “header-1.gif”
Okay not too bad. Length is one second and the timing is 24 FPS. Loop timing is off though — you can see a little “tick” when it restarts the loop. File size is 567 KB which is WAY too big. Let’s see what happens when we cut the frame rate down.
Whoa. Feels like watching Wheel of Fortune. In this version, the frame rate is 24 FPS but there’s only 4 frames. Let’s see what happens when we match make the frame rate AND the frame count equal (both at 4).
Love it now that I’m looking at it (several hours later). But in the moment, it looked way to choppy.
Seems too fast to me when I look at it now. At the moment of creation, though, this looked great compared to my first few iterations. At that point I was happy with the sun rays and decided to add some motion to the robot.
Overboard. Added several changes at once: back and forth movement to the robot, blinking eyes and motion blur. Since we’re still just dealing with 4 frames of animation, a small motion blur effect was added to every other frame to add the shaking effect. I wanted it to seem like the ground was shaking as the robot walked. Fun to see this but it needs to be dialed back.
Took out one of the blurred frames. Now the ground only shakes for every other rock/footstep he takes. Also dabbled with the eye blink. Still too much.
Reduced the frame rate a bit to slow down the animation. It’s better but still not where it needs to be. I ran it by Steve and he suggested the stomping might be too much for the homepage. We want people to feel relaxed, happy and engaged.
Went back to the smooth higher FPS look. Steve said we can make the file size work using technology of which I’m un-aware. Who knew. It’s nice to have a programmer as a partner. Eyes are kawaii.
Here’s the final… for now. After writing this, I can see about 5 more things to change/add but it’ll have to wait. On to the next thing!
Our gameplay is basically split into two halves. The first half involves exploring a 10×10 map and setting up castles. Read more about the rules and gameplay here. This week we got an alpha prototype running and were able to play 1 vs. 1 over the internet. In the long term, the game will have full color isometric graphics but we decided to make an ascii version to test and polish gameplay before building it out. So it may not look like much, but this is a HUGE milestone and we’re really excited. Thanks so much to our programmer, Steve.
We’re in early alpha right now and the art style has yet to be finalized. I love the loose explorational aspect of this phase of visualization and decided to use my two favorite programs (Adobe Illustrator and Adobe Photoshop) to flesh out a little castle drawing from a previous post. Results (right) can be technically classified as Vector and Raster based renderings. Why do I qualify their descriptions with the term based? Well, here’s where it can get a little confusing. Let me explain.
What’s Raster, Precious?
A raster – or bitmap – image is made up of individual pixels built on a dot matrix (a.k.a. a grid). For example, a 100 pixel by 100 pixel image has 10,000 individual squares (pixels). The file format stores a color value for each specific square. When zoomed in, it’s easy to distinguish the individual squares. We all refer to this “look” as pixelated. When zoomed out, the pixels all blend together to form the shapes, tones and values that make up a picture. Usually, our brain doesn’t notice any of these details and just says, “Hey! That’s my friend Bryan”. Additionally, when it comes to creating game art, raster-based programs traditionally lend themselves more to textures and detail. Common Raster Formats: JPEG, GIF, PNG, BMP
What’s a Vector, Victor?
A vector image, on the other hand, is described in terms of a mathematical equation. In the case of our 100 by 100 graphic, the computer DOESN’T store individual pixel values. Instead, it renders the shape according to the equation. This is often visually displayed during creation as a path with nodes. The math talk is confusing, but beyond saying it’s a “mathematical equation” there is minimal math use involved for the artist. The main benefit is that, inside a vector-friendly program, the size of the image can be scaled infinitely without loss of quality (i.e. blurry pixelation). Also, file size is significantly smaller. One caveat, vector graphics programs (like Inkscape and Illustrator) are used mostly for the initial creation of images/graphics. For final implementation, in most 2D applications, they have to be exported to raster. For example, in my day job as a graphic designer, I often design logos in Illustrator as vectors. However, when I’m finished and need to provide something for the client to use in print and on the web, I give them JPEGs, PNGs, etc. They also get a vector (master) version but usually the only time it gets used is for professional print jobs. Common Vector Formats: EPS, PDF, AI, SVG
A Little Note of Caution
So what’s confusing? Vector and Raster are technical terms that describe a file’s format, BUT because of the nature of the vector process and popular trends, it’s easy to start using that term to describe a graphical style instead of the format. Look at these two blue circles. One is vector rendered and the other raster. Can you tell the difference? Doubt it. Our two terms can’t accurately be used to describe them stylistically even though their construction was based on their respective processes. This is not the case for the castle renderings. The smooth lines and flat color shapes of the castle on the right stylistically look digitally created.. in a word, well, vectorized. But technically, I could’ve made both of these castle images in either a bitmap or vector program. It’s a minor detail but important to understand before starting image creation. You don’t want to spend a ton of time creating art that can’t be re-scaled. For example, I whipped up the castle on the left in photoshop for fun. When I finished, I really liked it but because I didn’t plan ahead, I can’t scale this image without losing detail. A best practice in this case would be to always work on a large canvas.
That’s all for now. Much more could be said (and has been). There are so many articles on this topic. A quick google for “Raster VS. Vector” popped back this, this and this. There are hundreds more.
Good luck. By the way, which castle style above do you prefer?
Capture the opponent’s Prince. This is accomplished by destroying the Castle in which the enemy’s Prince is hiding.
Quick Summary of Gameplay:
The Prince is a 10-15 minute turn-based strategy game played on a 10×10 tile map. It’s a mini “4X” game split into two phases: Exploration & Battle. In Phase One, you explore for resources and build 5 castles in strategic locations. In Phase Two, you deploy your resources offensively/defensively, guess where the enemy’s Prince is hidden, and attack the enemy.
Games We’re Taking Inspiration From:
Settlers of Catan
Romantic Background Story:
You are the Prince of an expanding Kingdom and your father has sent you, the Imperial Guard, and some troops in search of new lands to colonize. After months on the open ocean a thin strip appears on the distant horizon, and soon your fleet is near enough to smell the sweet vegetation of rich, uninhabited island. “At last!,” you think, “This is Heaven.” You know the king would be pleased. You send out a scout and prepare to disembark. But in the night, the scout returns with the unfortunate news that another fleet is preparing to land on the other side of the island! Thinking fast, you decide to lead your troops immediately to find the best places to build strongholds.
This island will be yours—by force, if necessary. There’s not a moment to lose! Now, where should you and your scouting party land?
Phase 1: Explore & Build
Turn 1: Players each land their Prince on a coastal tile (see Map). The Prince can see the terrain on all adjacent tiles. All other tiles remain shrouded in fog of war.
Turns 2+: For the remainder of Phase 1, the Prince can move one tile in any direction. After the Prince moves, the player has the option to build a Castle on any exposed tile. Both players have 5 Castles each.
The terrain consists of several tile types (mountains, hills, forest, etc) and may have one of a few possible resources: iron (offensive points), stone (defensive points), and gold (bonus points).
After the final Castle has been deployed, the Prince is no longer in play as an explorer piece. When both players have placed all 5 Castles, Phase 1 is over, the map is revealed and it’s time for battle! On to Phase 2.
Phase 2: The Battle!
Phase two consists of a series of battles, one per turn. Each battle has two parts (A & B):
Hiding the Prince and placing the Imperial Guard.
Distributing resources to offensive or defensive use for each castle and planning the attack.
Phase 2-A: Hiding the Prince
First, review strengths and defenses of your Castles.
Now hide the Prince in any one of your Castles. The opposing player won’t know where your Prince is located. But choose carefully! If the Castle holding the Prince is destroyed during the battle, you lose the game.
Next, place the Imperial Guard in any one of your Castles. This can be the same Castle that now hides the Prince, but keep in mind that the location of the Imperial Guard is shown on the map, so your enemy will know where you’ve place the Guard. The Imperial Guard completely shields its Castle from the first enemy attack, no matter the strength of the attack.
After both players have chosen Castles for the Prince and the Imperial Guard, this part of the turn is over. Each player can now see the location of the other’s Imperial Guard. (See Map 2)
Phase 2-B: Battle
Observe where the enemy’s Imperial Guard is stationed. The Imperial Guard greatly improves that Castle’s defenses.
Select your first Castle. Offensive points, defensive points, and bonus points are determined by the iron, stone, and gold around the Castle. Let’s say this one has 4 offensive points, 5 defensive points, and 3 bonus points.
Assign bonus points, which can be split between offense and defense. For this Castle, you can use your 3 gold to boost to end up with any of the following:
7 offense / 5 defense
6 offense / 6 defense
5 offense / 7 defense
4 offense / 8 defense
Assign the enemy castle that this Castle will attack. The attack will use all of your Castle’s offensive points.
Repeat steps 2-4 for your remaining Castles.
Finally, assign the attack order for the battle. For example, Castle 3 goes first, then Castle 5, then 2, then 1, then 4. The order is important because the enemy’s Imperial Guard will completely rebuff the first attack on its Castle.
When both players are finished assigning resources, the Battle begins and both player’s attacks happen simultaneously. In the aftermath, players review the damage they’ve been dealt, and the damage they’ve wrought. A Castle’s damage is calculated by subtracting the Offensive Points used against it from its Defensive Points. If the Defensive Points drop to zero or below, the Castle is destroyed.
If both Princes are still alive, the next Battle begins. The game ends when one player destroys the other’s Prince. If both Princes are destroyed in the same round, it’s a tie.
So that’s it! We’re aiming for a quick, fun 4X experience. The concept is constantly evolving and if you have any thoughts, please leave feedback below or email email@example.com.
I’ve been working on a game design document that can be handed to Steve (code) to implement into our first prototype. We decided to build our first prototype in Terminal (OSX) so I’ve been tasked with taking all my illustrious art ideas and converting them to a text-based experience. Take a look:
Creating this in Google Docs. Pretty glamorous, eh? I kid.. I’ve actually really enjoyed this process.
This year we’re focusing on a new project called ‘The Prince’ (working title). Our goal is to launch a commercially viable product mid-to-late 2015. We super excited to share progress, wins and fails on this blog as we go along.
More details to come soon about the game itself but in the meantime, enjoy these concept images.