Reflections on Building Portal: The Flash Version
How two teenagers developed an iconic Flash game that found its way into an official version of Portal on Xbox
When Valve announced Portal in 2006, I was frantically chatting with my friend Hen Matshulski over MSN Messenger. Valve shaped so much of our gaming life at the time, and Portal was like nothing we had seen before. Excited and mostly impatient, the announcement pushed us to go on a year-long journey of building our own interpretation of Portal, using Flash, before even getting our hands on the game.
Flash support is officially ending December 31st, 2020, after over a decade of being the most popular tool to create browser games. I figured this would be a good opportunity to open some old backed up assets and explore how we built Portal: The Flash Version, our first game.
I’d met Hen a couple of years prior to the announcement in an online Macromedia Flash discussion board. For the longest time, we wanted to submit a game of our own to Newgrounds. We called ourselves “We Create Stuff”, as we had a tendency name things very literally.
“Teamwork is a concept in which two or more people work together, usually with a goal of not failing horribly.” — GLaDOS
Working remotely in 2006
Hen & Ido were 16 and 14, two introverted teenagers who interacted online. We lived a 15 minutes bus ride from one another but we never met. Our communications methodology was based on MSN Messenger texts… and scribbles.
MSN Messenger was an instant messaging app with a little known edge that made it a super weapon. You could draw straight into a chat message, which made it groundbreaking for remote work. We exploited this to explain to one another how certain mechanics should work, how to reproduce bugs, and most importantly, we used it to design levels.
In addition to chat, we used Google Docs to align on high-level goals in a game design document or GDD. I read that this is what big game studios do, so I’ve set up a central GDD to describe the different mechanics we want to cover in 2D, paste in level designs from chat, and coordinate our efforts.
The game was built using just two large source files: One containing the levels, art and animations, the other is the merged game project, containing a one-frame 5,250 lines of code. We didn’t use source control. As expected, we didn’t have a development schedule, other than skip school as much as you can get away with and work on the game.
“This next test is impossible” — GLaDOS
Creating a game based on the trailer of another game
At the time, I was experimenting with ActionScript 2.0 code snippets I found online dealing with basic platformer physics, input controls and rendering animations on screen. Hen took to reimagining some of the Portal visuals in 2D, from player animations to portals and environments.
The most exciting aspect I wanted to work on was the portaling and momentum physics. But first I had to allow the player to create portals. I’d need to calculate a line from the player, in the direction of the mouse, and find the desired wall to create a portal on. In game engines today this is called a raycast method. Since it was rocket science to me, the first iteration of portals would be dragged and dropped around using the cursor. Easy.
This allowed focus on player physics. When the character hits a portal, their location would change to the other portal’s location, while preserving and rotating the character’s momentum. It’s easy to forget, but working on the particular part that excites you is what makes projects tick. I figured out raycasting later.
Hen was preparing the first drafts of the visuals. The player, interactable objects and general level style. He was essentially doing art direction, from the logo to the frame by frame character animations. Portal’s protagonist Chel wasn’t revealed in the trailers yet, but we knew you’d be playing some kind of a test subject. So instead of Chel, we had anonymous “Test Subject #15837”.
The beautiful aesthetics of Portal were translated into a living, 2D animated world. Levels included multiple layers to create a sense of depth, as well as a touch of small background animations. Hen had decided to go for an imitation of an orthographic perspective, while assures portals to be visible when placed on any wall. While we have implemented a follow-camera initially, we ended up with puzzles that always fit one entire screen start to finish.
With portals and a test subject in place, it was time to implement actual puzzle mechanics. A button, a door, and later a cube were the basics in creating a proper puzzle. These were core elements of so many of our puzzles, and once we had them in place it was easier to design levels.
Despite the time we’ve put into it at that stage, we were a bit of a cynical duo and weren’t sure where it’s going with it. To be considered a good Flash game, is having 10 puzzles enough? 40? 100? Is Valve going to ask us to remove it?
These anxieties shifted after seeing deeper mechanics in place, for example with cube physics. The 2D cube physics I have implemented could probably compete for the least performant engine ever created. Yet it worked, and it was fun to play with. Things fitting together helped push the game from a side project to a goal for the both of us.
Admittedly, our level design focused a bit much on agility and speed rather than actual puzzle-solving, perhaps because we were so focused on that first Portal trailer. We had elements like time-based electrifying floors, spikes and other fast paced dangers that didn’t end up in the original Portal game as much.
When we let our friends play the game, it looked like they enjoyed the concept, but the experience wasn’t entirely coherent. You’d walk up to a portal on a nearby wall, and if it was raised only a few pixels above ground you’d get blocked and have to jump to get in. In other cases portals would get correctly placed in the direction of the player’s aim, but not where the player had intended them to be — it isn’t the same thing.
So we spent time iterating on what feels good: if you placed a portal on a wall, slightly raised above the floor level, we add an invisible “step” to help you pop into the portal smoothly. Instead of outright denying portal placements, we’d attempt to correct the placement by moving it a few pixels when needed to figure out the player’s intentional placement. These helpers helped make Portal: The Flash Version a better experience overall.
“Congratulations! The test is now over.” — GLaDOS
Pushing the submit button
Valve’s Orange Box, which includes Portal, was scheduled to release on October 10th, 2007. While we didn’t have a development schedule, we had one rule: we must release before the Orange Box. We figured there’s no way anybody would want to play a fan game after. It was the holiday break for us during October and we spent much of that time crunching.
Shortly before release, we sent out an email to Valve saying “hey, we built this thing”. Back then Steam didn’t house indie games as it does today, but they did service a single Flash game called Codename Gordon!
I now realize that the developers at Valve were probably working their butts off just the same in October 2007 in preparation for the Orange Box release. The cold fan mail we sent would not get anybody’s attention.
We submitted the first version of Portal: The Flash Version on October 9th, 2007 to Newgrounds, a few hours before the Orange Box unlocked worldwide, and then to Armor Games and others. It includes all of the Portal puzzle mechanics across 40 original puzzles, at roughly 45–60 minutes of gameplay. We were bummed we couldn’t fit a level editor in there but we had to release. And we went to sleep.
Over the next couple of weeks, Portal: The Flash Version became the top-rated submission on Newgrounds and was reuploaded to hundreds of other Flash sites. It was an overwhelming response. We were so unprepared that we didn’t implement any analytics to track how many played it as it was copied from one website to another. Adding up the play counters would amount to tens of millions though! Whew.
You can play Portal: The Flash Version (2007) after December 2020 through:
- The Flashpoint game preservation project
- Using a standalone Flash player and downloading the original SWF file (right click -> download file)
- If your browser still supports Flash, play it in the original We Create Stuff website, or Armor Games, Newgrounds, Kongregate and others
“Speedy thing goes in, speedy thing comes out” — GLaDOS
The Map Pack and releasing on Xbox
Valve has always been friendly to content creators, which is famously how Counter Strike, Team Fortress and other games came to be. Many of their tools are free to explore and use, including some level sources, assets and more. During this time Hen has been experimenting with Hammer, the world editor tool for the Source engine, the core behind every Valve title.
Valve’s Portal is only 2 hours long. And it was wildly successful. This produced a starving community looking for more puzzles. Wait a minute, we’d designed 40 of those for a Flash game just a few months back!
In early 2008, Hen began porting all 40 test chambers we designed from Portal: The Flash Version, our 2D puzzles, as a map pack for the original Portal in 3D. He’d meticulously translated the levels to fit a 3D environment, but kept the spirit of every test chamber as we designed it in 2D. It was called Portal: The Flash Version — Map Pack (did I mention we name things literally?) and released in May 2008.
It was the first major content pack for Portal, just before other great maps and mods that followed for both Portal (2007) and Portal 2 (2011) and it was received well by the community.
Shortly after the Map Pack release, Valve emailed us asking to acquire the level design. After picking our jaws back up we sent them an emphatic yes. It was announced that Valve will include some parts of the Map Pack in their upcoming Xbox 360 title Portal: Still Alive. So we bought Xbox 360s.
The game based on a game thing took a few twists and turns by now. There’s a more recent analysis in the video “History of Portal: Still Alive” (2017) by VNN about it. So, Portal is based on mechanics from Narbacular Drop, and Portal: The Flash Version is based on Portal but in 2D. Portal: The Flash Version Map Pack has translated those maps into 3D, and those designs were used as additional content for in Portal: Still Alive (but only on Xbox), and after years it was exported to be played within Portal again on PC. It took a decade but we’ve come full circle!
You can download the Portal: The Flash Version - Map Pack (2008) files from our website.
“Thank you for helping us help you help us all” — GLaDOS
The end of an era
It’s now 13 years later and Flash support ends on December 31st, 2020. An incredible amount of indie devs today started their careers using Flash technology, being in my opinion the best platform to pick up and concept, learn and experiment with. Luckily, other game engines are catching up today.
Notably, Flash didn’t have a single big “storefront”, making it more developer friendly as creations spread across websites like Newgrounds, Armor Games, Kongregate and others. Things are a little more strenuous for devs today, so I’m asking you to go out of your way to support smaller devs, wishlist their games, like their tweets and help them get their games across! It helps.
Thank you to the amazing Portal community for accepting our foreign piece of a game; To Valve for forging a fascinating universe and pushing our imaginations to create; to Tom Fulp at Newgrounds and Daniel McNeely at Armor Games and their platforms; to Ryan Champion for creating the awesome music for the game; to our friends for play testing the game; and to Hen Matshulski for co-creating Portal: The Flash Version with me, and for over 15 years of friendship.
As of writing this, We Create Stuff is back, and I’m working on a new game with Hen and friends.
This is the 2nd post in my exploration of past game projects. You can also read about the lesser known Flash game Echoes: Operation Stranglehold here.
Do hit me up on Twitter and DM me your Flash game stories or half baked memes at 4am!
- Ido
