In this Transcolors remake, guide Smiley through a grid of colored obstacles by matching color. Color changes occur when the character steps on a blinking color transformer, upon which the old color is lost. The object of the game is to reach the flag with a matching color.
Redesigning the Puzzle Layout
The puzzles in the Scratch version of Transcolors are free-form and pixel-based; collisions are detected by touching pixels, using the pixel’s color to determine whether or not an obstacle is passable. Making levels is tedious, as they have to be hand-drawn with precisely chosen colors in order to make the game function correctly.
I decided I wanted to improve upon this model. I first figured out that any free-form puzzle layout can be remade into a grid system, which would make the game logic much more efficient than checking the surrounding pixel color every time the player moved. It would also help to make the puzzles look consistent and easier to render.
So I started by streamlining all the puzzle elements – the color transformers, walls, bricks, and gates – into a tile-based map. What used to be wide open space in the Scratch version is now constrained to “path” blocks. The character now simply moves from square to square.
The player itself is a square in the Scratch version. That doesn’t work so well on a square grid, since you won’t be able to see where you’re standing. So I changed the shape to a circle; that way there’s some context as to what’s behind they player. And why not, let’s add a smiley face on top of that to make the game more fun.
Thus begins Smiley’s debut – hello, Smiley!
With a new tile-based system came a redesign of the puzzle elements. One thing I thoroughly enjoyed making was the brick-smashing animation. Simply run into a brick, and POW! – the whole thing explodes into pixels. If you think that’s satisfying, here’s the same animation on a much larger scale:
The tile-based system also brings a new objective to Transcolors: using as few moves as possible to finish a puzzle. Each time you step on a square, a counter increments to keep track of your moves. You’re also timed once the level starts, and your best move count and time are saved as high scores. I never programmed in the minimum possible amount of moves or any sort of time goal, so the main idea of this feature is to constantly improve your score after you try a level for the first time.
Saving your hard-earned scores is a bit tricky, since there’s no way to store internal data in Khan Academy’s programming interface. Clicking “Save My Stats” from the main menu will output your scores as a JSON object, which you’ll have to override in the game code via copy-and-paste. You can then save the game code in its entirety to your Khan Academy account as a spin-off (or fork, if you will).
The Level Editor
Users can design their own level using the editor found under “Create a Level.” Just select a tile and a color from the palette, then drag on the game board to place tiles. Hit “SAVE”, and the game exports the code used to generate that level. Paste it inside the game code at the indicated spot, save a spin-off to your account, and you’ve just made your very own Transcolors level! You can even challenge your friends to solve it.
Adding to that train of thought, why don’t I just let the Khan Academy community create some of the levels for me?
I created a post in the project discussion area, where community members can submit links to spin-offs containing levels they’ve created. I would then review it and provide some feedback if necessary. If I feel that a level is deserving to be in the game*, I’d include it as an official level with credit to the maker. After the last Version 1.0 update, 13 of the 27 levels in the game ended up being made by community members. Not half bad.
(*I’ve come to learn that level-making is a sort of art, and that it takes effort and some careful thinking to make levels that are effective. As such, I’m quite picky about style and don’t accept every level.)
Reception From the Khan Academy Community
Before long, Transcolors was rising up the ranks and eventually became the #1 most popular puzzle game of the Puzzle Game Challenge. (This was based on the order of which the spin-offs were listed – the challenge is entered by making a spin-off of the Puzzle-Game Challenge project. The ordering criteria was since changed to favor more recent projects, so presently Transcolors is “topped” by several other games – many of which aren’t of the puzzle genre, for the matter.)
Transcolors on Khan Academy: 2.0
Enter Version 2.0 – the complete revamp after the complete remake, with vivider graphics and a whole new experience. Check it out!