Monday, March 23, 2015

Platypus 'Piler Plugins

Totally excited. Totally.
While working on games over the past few months, we've slowly been augmenting and bettering Platypus, the open-source HTML5 game engine that we co-created with PBS KIDS a few years ago. I'm really excited about a new compiler plugin system we created and I want to share it with you. My wife says I rarely get excited, but she also doesn't watch me code. WOOO!

Each game we develop brings its own set of challenges and requirements. When we've developed games for PBS KIDS, for example, audio is a big deal since there tends to be a lot of voice-over to guide children and buttress the educational experience. However, with a game like Entanglement, supporting multiple languages is a priority since the game is a popular past-time across the globe.

With this in mind, we created a plugin system for the Platypus compiler, so that unique games can include just the pieces they need, and, more importantly, developers can extend the compiler easily to handle new and creative use-cases we have yet to comprehend.

Since Platypus is an HTML5 engine, its compiler is written in JavaScript. Makes sense, no? We've taken the original Platypus compiler and broken it into a series of super-cool plugins. These are all enabled by default, but don't do much if their respective flags aren't set in the game config.json file. The list of plugins can be changed in the global game settings as shown:

"global": {
    "initialScene": "load",
    "plugins": ["js/pngquant-plugin.js", "js/manifest-plugin.js", "js/scripts-plugin.js", "js/language-plugin.js", "js/assets-plugin.js", "js/compression-plugin.js", "js/write-plugin.js"]

So what do the plugins do? Glad you're curious! Here's a quick overview:

  1. pngquant - This plugin uses the pngquant compression utility to compress PNGs. You can set how many colors each image should have, and this plugin rolls through the list of assets, smashing PNGs into significantly smaller files.
  2. manifest - This plugin tallies all the assets and creates an application cache for your game. It even handles editing an Apache .htaccess file with mod_rewrite rules so that it can cache the correct audio assets for different browsers!
  3. scripts - This plugin grabs all the JavaScript and JSON files and puts them into a single file for a faster download. It also does the same with disparate CSS files.
  4. language - This plugin uses a language table to create unique language builds for localization. It's a template system that replaces {{language-keys}} in the code with appropriate localized text. It also handles mod_rewrite's to pull the correct index.html if you choose to have multiple languages in a single build. (Alternatively, you can specify to produce multiple single-language builds.)
  5. assets - This plugin copies assets from the source files into the build locations.
  6. compression - This plugin uses the YUI compressor to compress the JavaScript and CSS files.
  7. write - This final plugin handles writing the various scripts, style sheets, and manifest files to the build locations.

The new plugin-based compiler is not yet available on the PBS KIDS Platypus source, but you can get a sneak-peek on the Gopherwood fork

Monday, March 16, 2015

I Am Sorry. We Made Another Prototype

Derek and I want to sincerely apologize for the fact that we have made another prototype. We can't help it, it's too fun! So, check out Buzz and see what you think.

We're honestly not quite sure what it is and which direction it might grow. Right now it's a little bit physic-y, a little bit shooter-y, and a little bit nature education-y. It's also a little bit dodgy, but given that it's a prototype we weren't too worried about that. Instead, we were focused on exploring the game space that the intentionally-challenging controls afforded.

From a development perspective, Buzz has been a lesson in player capacity. I have been thinking about the idea that every player can only juggle so many tasks at once. Too many and the game becomes overwhelming and frustrating. With Buzz, a lot of the player's focus is used up controlling the helicopter. Because the controls are complicated we have to avoid overwhelming the player with other tasks/obstacles in the game. The best additions are elements that overlap with what the player is already focused on. These ideas are what led to the beetle enemy and the challenge of carrying the pollen crystal between flowers.

We're considering expanding Buzz or Shifty Twisty Forest into more fleshed out experiences. If you have opinions, questions, or comments about either, feel free to leave a comment.

Wednesday, March 04, 2015

The Shifty, Twisty Forest

Wow, that forest is just the shiftiest!
Todd and I spent the past few days putting together a game prototype: check it out! The Shifty, Twisty Forest is a story, err..., about a turtle finding his way through a forest - a very blocky forest with locked yellow doors. Help him get to his destination by shifting the forest around!

We created 12 levels to explore the concept and to see whether it's fun. After you've had a chance to play through it, let us know what you think! Does this game deserve more levels, better art, and a real story line (unlike the stream-of-consciousness that caused the confusing backdrop)? Or should we leave the poor forest alone and not make it twistier and shiftier?

Here's another screenshot in case you haven't time to spend on such frivolity but like to look at things and stuff.

Monday, November 24, 2014

Rescue Ecotopia!

Have you ever wondered what would happen if someone removed almost all of the fish out of a lake?
Hacker, Buzz, and Delete carelessly pollute Ecotopia...
CHAOS. First, storks would eat up the very last few, just to survive, and then fly away to find a better lake. Then, the poor crocodiles wouldn't be able to find anything to eat in the lake with all the fish and storks gone. They'd wander into the forest and mangrove, munching on anything they could find! They might just eat all of the mudskippers flopping through the mangrove, which would terribly upset the mangrove goannas, having their snack taken away. Once there are no more mudskippers, both the crocodiles and the goannas would have to leave, and soon 5 species are gone, just because someone removed some fish! Who would do that!?!
The lake needs another crocodile. Because crocodiles rock.
Find out in our latest HTML5 game for Cyberchase - Rescue Ecotopia! This systems-thinking game was designed in collaboration with the awesome team at WNET. It was great fun making it; we hope you enjoy playing it!

Monday, July 14, 2014

New Dinosaur Train Game on PBS Kids!

The first decision in the game is a tough one.
Todd and I have been thoroughly immersed in the Cretaceous for the past few months, but we've traveled back to the future to share all that we've learned! Foremost, we're excited to share our field notes via our new game Station Race. (We scrawl field notes on our computers using JavaScript and inexplicably they show up as a game on the Internet somewhere.)

Station Race is a fun avoidance game that's fully playable on your computer or on your favorite mobile device. After a few rounds, you'll learn all about Deinonychus, Spinosaurus, and how to build railroad tracks across the Cretaceous landscape. Tap and trace your way from one station to the next as quickly as possible to pick up all the dinosaurs!

Lakes, boulders, trees, and sauropods: prehistoric track-building is hazardous.
Although the journey was rough, and the natives gigantic, Todd and I are now resident experts regarding many dinosaurs, and -- most importantly -- I am now proficient at naming each member of my children's toy dinosaur collection without reading the labels on the bottom.

We had a fantastic time working with both PBS Kids and Dinosaur Train on this project, and we hope you and your children enjoy the game and learn something new along the way!

Thursday, January 23, 2014

How I Taught a Dinosaur to Row a Boat

Go Buddy go! Do what I programmed you to do!
Each project we do presents new challenges. In the case of Dinosaur Train's River Run the new challenge for me was creating an AI for an action/racing game opponent. If you haven't played the game already (which you should, it'll help all of this make more sense), the game has two characters rafting down a river trying to collect bugs that appear along the way. The character that collects the most bugs by the end of the river wins. In two-player both of the these characters are controlled by players, but in single-player the AI handles the extra player. The goal then for my AI was to create a life-like, fun opponent to fill in when a human opponent wasn't available. To do this I broke the problem down into two pieces: river navigation (getting the character from one end of the river to the other) and bug collection (finding and navigating to bugs).

River Navigation

The river in River Run has a few characteristics that played into the river navigation problem. First, the river is not the same every game. The river is composed of pieces that are swapped in and out randomly with each race. This means that a static 'best path' cannot be created for the AI player. The AI must chart its path dynamically.
Second, the river contains solid obstacles that must be traversed around to progress. The AI is expected to be able to reliably navigate around these obstacles and make it down river. Third, the camera dictates the pace at which players can progress down the river, so the rafter AI must maintain a pace that matches that of the camera.

We did not have a discrete solution for each of these problems, rather these problems were overcome by the combination of solutions which I'll outline below.
A couple examples of node placement in river sections.
The first step in creating the AI for navigating the river was to discern a means of expressing the shape of the river so the AI could navigate it. In this case the AI doesn't need to have a complete knowledge of the river since we don't need the AI to be able to navigate to any point in the river, only those points that are necessary to traverse it in a single direction (bottom to top in our case). We chose to represent the river as a series of nodes. These nodes would serve as locations along the river path which the rafter would traverse to. By representing the river as unconnected nodes, we can reorder our level pieces without concern for links between nodes.

The actual traversal AI for the character is relatively simple. Since we want the character to move naturally we restricted its movement method to using paddle strokes like the player. Internally it is 'pressing buttons' just like the player. The AI does a search every few ticks for a target (this scanning process we'll talk about in a second). When the AI finds a target it will begin to paddle straight toward it. To make the AI paddle toward the target it determines where the target is relative to the front of the raft (to the left or right) and paddles on the opposite side. This produces a natural looking motion with the AI alternating paddles to keep its nose pointed at the target when it's target is in front of it or paddling repeatedly on the same side to turn toward a target that is beside or behind it.
The valid nodes are those above the player (the orange line) and in the middle of the screen (between the black lines).
The traversal AI is simple but it is assisted by how the targets are chosen. To find a river node to paddle toward the AI searches the list of river nodes. This search is limited to nodes that have a y-position less than the character's y (meaning they are above it on the map) and nodes that are in the middle of the current game view. With these limitations in place, the search then chooses the closest node as it's new target. If it finds a target better than the current target it replaces it. Otherwise it continues pursuing the current target.
An example of 'most-likely' paths through river sections based on the node locations.
This method of selecting nodes does a few things for us. First, it makes sure the character is only traveling down river since they won't target nodes behind them. This means that our unconnected nodes now behave more like a directed graph with paths weighted based on how close they are to the previous node. Second, by only selecting nodes that are in the center of the screen we ensure that the AI keeps pace with the screen. Finally, because the AI continually pursues a target node even after it reaches it, the traversal AI causes the character to paddle in circles around its target node once it reaches it. This behavior was not intentionally created, but it gives the AI character a pleasant looking idle behavior and gives the player the feeling that the AI is actively searching for bugs.
An example of a level layout we'd avoid. Since the AI always wants to go up a u-shape like this will snare the AI.
Because there is no course correction in the traversal code, the river layout and node layout are both critical for the AI to make it down river. The river layout must be considerate of the abilities of the AI. A key terrain concern was avoiding creating concave terrain that the character can get caught in. Since the AI only attempts to move up, a concave shape that requires the AI to reverse direction to escape would trap the AI.
An example of ill-placed nodes. The left node is closer to the character, but the path to it is blocked by terrain.
Node placement can create similar problems for the AI. Since the AI tries to travel in a straight line between nodes and always chooses the closest valid node, placing nodes so that there is a clear path between close node pairs is necessary. Placing nodes such that the closest node is unreachable could trap the AI.

Bug Catching

Bug catching reuses much of the functionality of the river navigation system with small changes.
An illustration of bug scanning. Bugs inside the white ring are close enough to be considered.
The search for bugs occurs immediately before the search for river nodes. If a chasable bug is found, the AI will give chasing the bug precedence over traversing the river. Finding a chasable bug involves a distance search around the character. The selected bug will be the closest on-screen bug within a given range. If no bugs are found within the range, no bug is selected. When a bug is selected the traversal code used for node navigation is used to navigate the character to the bug. Thankfully this code works well with moving targets too. One change we made was increasing the paddling speed when chasing a bug. This has the benefit of decreasing the turning radius of the character so they are more likely to catch the bug and also gives the impression that the AI character is excited about catching the bug.
As the AI collides with terrain the scan ring shrinks until the problem bug lies outside the ring.
Because, unlike river nodes, bug locations are not static and the search for a chasable bug does not include a check for obstacles between the character and the bug, the situation in which the AI attempts to reach an inaccessible bug is likely. Solving this 'properly' would probably involve implementing a new mechanism for mapping the river and something akin to A*, but, well, we're game developers and sometimes the easy solution is good enough. So, our solution to this problem was to alter the search distance used when finding a 'chasable bug' when a search seems to be going wrong. Each time the character collides with the terrain the bug search distance decreases. If the character repeatedly collides against the terrain, the distance value will eventually shrink to the point that the sought bug will no longer be within chasable range and the AI will 'forget' about it and move on to navigating the river. Once the AI stops colliding with terrain the bug search range slowly grows back to its original size. While this 'bumping into terrain' behavior looks silly when it happens, it happens rarely enough that it isn't distracting and it's a graceful solution to a complex problem.

A Gentle Shove

The final system that assists our AI was actually originally created for human players. When testing the game with human players we found that players wandering off-screen was a significant problem, so we put into place a buffer on the top and bottom of the screen that would push players on-screen. This buffer pushed them vertically toward the center of the screen and horizontally toward the closest river node. This ensures that players pushed off-screen by a piece of terrain will be dislodged by a horizontal push and then pushed vertically back on screen. This ended up working out well for human players and also we discovered offered a fail-safe solution to when the AI got stuck too. While it rarely happens it's nice to have a little insurance in case everything else goes wrong.


This concludes this quick overview of how the rafting AI in River Run works. Hopefully you enjoyed it. If you want to see the AI in action to see the strengths and weaknesses of our solution, you can check it out here. If you have any questions, feel free to leave a comment we'll do our best to answer. Thanks for reading!

Friday, January 17, 2014

Dinosaur Train Goes Mobile!

One thing I love about working on web games is that you get to write lots of blog posts about how you've just finished something because web games tend to a have a pretty quick turn-around compared to the console games I used to work on. So, today, it's my pleasure to write another one!

We've had the pleasure, over the last 6 months, to work with the PBS Kids and Jim Henson folks on several titles related to the Dinosaur Train property. They're moving into the HTML5 realm and we got to be a small part of that and learned a lot about dinosaurs and time-traveling trains along the way.

There were several parts to the project, so here's a breakdown:

I wish the river rafting trips I went on had whirlpools like that!
  • River Run - The newest Dinosaur Train game. This one is based on the latest season of Dinosaur Train in which the Dinosaurs go on various adventures at Adventure Camp. In River Run players join Don and Buddy as they paddle down river in search of bugs for Don's collection. Player's can play single or multiplayer taking on the role of Don or Buddy competing to see who can find the most bugs. I'll probably put up another post talking more about this game, but until then, you can try it out here.
You would think they could make the path to the convention center a little less...maze-like.
  • Buddy's Amazing Adventure ported to HTML5 - Buddy's Amazing Adventure is an example of a great existing title created by the nice folks at Fablevision that we reworked in HTML5 so mobile users could play it too. I think Derek did a great job of recreating the experience and users will be hard pressed to find the difference between the Flash and HTML5 versions. If you want to try to find the difference visit this link on mobile and desktop devices. The mobile version is ours, while the desktop version will load Fablevision's original version.
Prehistory's nemesis to a well-washed car.
  • Field Guide ported to HTML5 - The Field Guide is essentially a giant dinosaur encyclopedia. We took the existing Flash version and ported it to HTML5. Along the way, we learned a whole lot of dinosaur facts by osmosis (Did you know Quetzalcoatlus had a wingspan of 36 feet? That's crazy!). You can check it out here.
Even Giganotosaurus needs his moment in the spotlight.
  • Mobile Website - PBS Kids already has an excellent desktop friendly Dinosaur Train website, but they didn't have a version that worked on mobile devices. So, we put together a site for mobile users. PBS Kids automatically redirects traffic to the correct page, so if you're on a mobile device, that link up there will take you to the mobile site we designed.
We hope you'll take some time to explore some of our recent creations and leave us some feedback. Have fun!