In 2006, when Valve announced Portal, I chatted selflessly with my friend Hyun Matschulski on MSN-Messenger. Valve was defining our lives in terms of games at the time, and Portal was unlike anything we’ve seen before. The excited, impatient announcement prompted us to make a Flash version of Portal on a year-long journey before we even touch the original game.
Portal Announcement (2006)
Flash support officially ends December 31, 2020 [прим. перев: оригинал статьи опубликован 22 декабря], after more than ten years of existence as the most popular tool for creating browser games. I thought this was a good opportunity to open up some old resource backups and explore how we created the Flash version of Portal, our first game. I met Hyun a couple of years before the announcement on the Macromedia Flash forum. We wanted to introduce Newgrounds our own game for a long time and called ourselves “We Сreate Stuff” because we tended to literally call anything at all.
Portal: Flash Gameplay Screenshots
“Teamwork is when two or more people work together, usually to avoid horrible failures.” – GLaDOS
We were 16 and 14 years old, we were introverted teenagers, communicated via the Internet. We lived 15 minutes by bus from each other, but never met. Our communication methodology was based on MSN-Messenger texts … and sloppy drawings.
MSN-Messenger was an instant messaging application with a little-known advantage that turned it into a super weapon. You could draw in messages; the feature made the messenger innovative in the sense of remote work. We used this opportunity to explain to each other how certain mechanics should work, how to reproduce bugs, and most importantly, we worked with it when designing the levels.
Portal: The first sketch of the Flash version level was made in MSN-Messenger
In addition to chat, we used Google Docs to agree on high-level goals in a game design document or GDD. I read that this is what the big game studios do, so I created a central GDD to describe the various mechanics we want to do in 2D, embed level design from chat, and coordinate our efforts.
The game was built using only two large source files: the first contained the levels, all the art and animation, the second was a single game project, with 5250 lines of code per frame. We did not use a version control system. Of course, we didn’t have a development schedule other than how to skip school as many times as we could get away with and work on the game.
“Next Test Failed” – GLaDOS.
Making a game based on the trailer of another game
At the time, I was experimenting with the ActionScript 2.0 snippets I found on the Internet, dealing with basic platformer physics, input controls, and animation rendering. Hyun has reworked some of Portal’s visuals in 2D, from player animations to portals and environments in the game.
The most exciting parts I wanted to work on were portal physics and momentum physics. But first, I needed to let the player create portals. It was necessary to calculate the line from the player in the direction of the mouse cursor and find the wall for the portal. Today in game engines this method is called raycast. For me it was like building a rocket, so the first version of the portals was dragged with the mouse cursor. Easy.
This allowed me to focus on the physics of the character. When a character enters a portal, his position changes to the position of another portal, while the momentum is preserved and rotated. While it’s easy to forget about it, working on the specific part that captures you is exactly what makes projects successful. How raycasting is done I understood later.
Take and drag portals!
Hyun did the first drafts of character sketches, objects with interactivity and the style of the level in general. Basically, he did art, from logo to character stop-motion animation. Portal’s protagonist, Chel, hadn’t appeared in trailers yet, but we knew we’d be playing some sort of experimental, so instead of Chel, we had an anonymous Test Subject # 15837.
Portal’s beautiful aesthetic is brought to life in a 2D animated world. The levels contained multiple layers to create a sense of depth, and some background animation. Hyun chose to mimic orthographic perspective while still making the portals visible from any wall. At first we implemented a security camera, but eventually we got levels that always fit one whole screen from start to finish.
With the portals and the subject emerging, it was time to implement the puzzle mechanics. The button, door, and later the cube became the base of the working level. These were the basic elements of many of our puzzles, and when they got their final shape, it became easier to design levels.
Despite the time we spent on it, we were a bit of a cynical duo and weren’t sure where this was going to lead. Are 10 puzzles enough for a good flash game? Maybe you need 40? 100? Maybe Valve will ask us to remove the levels? Our worries subsided as we took a deeper look at mechanics, for example with cubic physics. The 2D cube physics I implemented could probably vie for the prize as the world’s slowest engine. He worked and was fun to play with. All of this together helped to become a game not a side project, but a goal for both of us.
2D cube at level 26
By general agreement, the level design was too focused on agility and speed rather than puzzles; perhaps because we focused heavily on the first Portal trailer. We had an electrified floor that disappeared and reappeared, thorns and other rapidly replacing dangers, which were less in the original game.
When we let our friends play the game, it seemed like they were enjoying the concept, but the impression was unclear. If you come to a portal that is only a few pixels up, you have to jump to get into it. In other cases, portals appeared in the direction of the target, but not where the player would like – and this is not the same thing.
Therefore, we took the time to new iterations to it was nice to play: In case the portal is slightly raised above the floor, we have added an invisible “step” to help smoothly enter the portal. Rather than placing the portal right where the cursor is pointing when necessary, the portal has shifted a few pixels when necessary to make it clear what the player really wants. All this made the flash version Portal it is better.
Enables the visibility of collision boxes. The yellow step next to the portal helps jump into the portal when it is raised off the floor.
“Congratulations! Test completed ”- GLaDOS.
Submitting the game to Valve
The Orange Box Valve, which contained Portal, was scheduled to release on October 10, 2007. We didn’t have any schedule, we had one set: we must release the game before the Orange Box release. Shortly before the release, we sent a message to Valve: “Hi, we made it.” There weren’t indie games on Steam back then, like today, but there was one flash game – Codename Gordon!
Now I understand that the Valve devs were probably working on the same thing in October 2007 in preparation for the Orange Box release. Otherwise, the cold fan letter we sent out would not have gotten any attention.
PS A small post on Habré will be an excellent addition to the publication: Portal: The Flash version, which was written by falone back in 2008. In this post you will find a link to the developers site and, already on this site, 40 level maps in the archive
- Profession Unity Game Developer
- Profession Web developer
- Data Scientist Profession
- Data Analyst profession
- Java developer profession
- JAVA QA engineer
- Frontend developer profession
- Profession Ethical hacker
- C ++ developer profession
- The profession of iOS developer from scratch
- Profession Android developer from scratch