Developer's Journal: Designing Linden's Metroidvania Caves 2D

   

     
Hey everyone...this is the first of what I hope will be a continuing series on designing levels in Atmosphir. Hopefully this gives a little background info, along with a few tips and tricks that will help you make your own adventures.
 
The level starts outside of the cave.
Today I'll be writing about Linden's Metroidvania Caves 2D, a new level I uploaded a couple of days ago, but have been working on for the past week or so (I'd guess about 18 hours of designing/playtesting total). With last Friday’s Update 14, the new Camera and Force Area tools were added in the Interactives category, and I immediately knew I wanted to make a 2D “ Metroidvania” style level. Super Metroid was one of my favorite games growing up in the 16-bit era, and although I’m not able to make something that big in Atmosphir (well, not yet - level linking is scheduled for early next year), I wanted to test out the general premise and see how far I could go.
 
To be honest, I didn’t do much pre-planning. I just built it up section by section, letting the design sort of grow organically and trying out new ideas when they came to me. I knew I wanted the character to fall into a cave at the beginning, taking a cue from the awesome Shadow Complex. I also knew I wanted a big fight at the end, and I thought a little about what the collectables would be to unlock new areas - in this case, it was mainly keys and bombs. There are also some timed run and jump powerups thrown in there for good measure.
 
One thing I like about 2D levels (having only designed 3D levels before in Atmosphir up until now) is how much more accessible and streamlined they are. I remember the learning curve I first had to go through to understand a WASD + mouse setup...controlling two things at once - the character and the camera - did not come naturally. But here, you’ve got the Mario formula that everyone understands: just worry about the character. Move left or right, jump or climb, and use a weapon every once in a while. Actually, I’m thinking that I’ll even make my future 3D levels completely designer-camera-directed, as they are in Super Mario Galaxy.
 
 The full level, as seen from the "map room" area
My favorite part of the whole thing really is the map room, where the camera zooms out for a complete shot of the entire level. It was kind of a cool "a-ha" moment when I added it in, and it’s a perfect example of how cameras can be used to do much more than just follow the character around. From cutscenes to security cameras to whatever, this is a powerful little tool. Another highlight for me is the gravity room, because I wasn’t quite sure how gravity puzzles and platforming would work in 2D. Turns out they’re pretty sweet, and I must have re-made that section 5 times before I was happy with the layout. I also thought a lot about the foreground/background elements, so you see a lot of slightly-blurry items in the foreground and distant mountains and trees in the background. They’re cheap but effective ways to give a 2D level like this a little more dimension.
 
Playtesting this level probably took just as much time as designing it. I had to think a lot about backtracking and making sure you could get back to every section if you needed to so the player was never trapped. For example, in the final boss room, a block falls down behind you, blocking your way out and making the final fight more confined. But if you run back through the level and get back to the other side of that wall, you would actually be stuck and have no way out. So I hid a teleporter under the ground, and had it trigger on only after the final boss is defeated. I’m always anxious to push a level out as soon as it’s ready, but it’s worth it to play through everything multiple times and make 100% sure it’s not broken. Now I don’t upload a level unless I can play through it 2-3 times perfectly. I’m constantly pressing F2 to jump back and forth between play and design, making small tweaks here and there.
 
 The final boss fight has Muka Shaman shooting at you from the foreground
In the end, there’s always stuff I wish I had added or improved upon. I wish I had added some unlockable achievements/treasures like Linden’s Stratosphere for collecting all the bombs or jewels or something, to make the completionists happy. The box-pushing puzzle didn't translate that well into 2D, or maybe I should have made the box bigger. I also wish I had thought up of more ways to unlock areas instead of just bombs and keys - gradual increased run/jump powers would have been a really cool addition. But maybe I can save that stuff for a sequel, if enough people like this one.
 
The level is edit-unlocked if you want to go in there to look under the hood and see how things were made (just click the edit button on the level detail page). Some quick design tips and techniques for looking through the level:
 
1. Check out how many Force Area objects are used. In some areas, I wanted to restrict the player to a 2D plane only, but in others I wanted them to be able to go a block or two deep into the background. So instead of just using one big 2D plane, I cut it up into several sections to make sure players could reach the correct areas.
 
2. The hidden puzzle room (in the far right corner, under the final ladder) is a nice case study for triggers and moving platforms. You step on two "pressure plates", which are essentially just moving platforms that drop down when you touch them to reveal an invisible area trigger, which in turn sets off the flying wooden discs that push the soccer ball around. I modified this puzzle a lot to prevent glitches, such as the moving platforms pushing the ball through the wall or off the course...that's why the moving platforms rise from the floor and slide into the background, instead of just going up and down.

3.Shift + WASD (fast pan) and Shift + Q/E (10 floor jump) were the best shortcuts ever with this level, which required a lot of bouncing around between sections.
 
4. There are a lot of invisible info stickers attached to timer triggers. Instead of having the same info sticker message show up over and over again when you entered an area, I had it set to only show up once for 5 seconds or so. This helped it feel a little less repetitive and not feel out of place (like a hint about bombing a block showing up even after you've already blown it up).
 
5. I tried to squeeze every ounce of performance I could in the level, so I used area triggers to spawn enemies, move platforms, and light torches only when you've entered that particular section. The level has to keep track of all "interactive" objects that move around at all times, even if they're off screen, so it's helpful to have these guys hidden until they're really needed. A little extra boring grunt work, but hopefully it helps the level play a little smoother.

Well, that's it for this entry. Hope you enjoy playing it, and please let me know what you think!
http://www.atmosphir.com/atmosphir/level/show?id=128474
-dave ( okaysamurai)
8 Comments
9 Comments
Posted by okaysamurai

   

     
Hey everyone...this is the first of what I hope will be a continuing series on designing levels in Atmosphir. Hopefully this gives a little background info, along with a few tips and tricks that will help you make your own adventures.
 
The level starts outside of the cave.
Today I'll be writing about Linden's Metroidvania Caves 2D, a new level I uploaded a couple of days ago, but have been working on for the past week or so (I'd guess about 18 hours of designing/playtesting total). With last Friday’s Update 14, the new Camera and Force Area tools were added in the Interactives category, and I immediately knew I wanted to make a 2D “ Metroidvania” style level. Super Metroid was one of my favorite games growing up in the 16-bit era, and although I’m not able to make something that big in Atmosphir (well, not yet - level linking is scheduled for early next year), I wanted to test out the general premise and see how far I could go.
 
To be honest, I didn’t do much pre-planning. I just built it up section by section, letting the design sort of grow organically and trying out new ideas when they came to me. I knew I wanted the character to fall into a cave at the beginning, taking a cue from the awesome Shadow Complex. I also knew I wanted a big fight at the end, and I thought a little about what the collectables would be to unlock new areas - in this case, it was mainly keys and bombs. There are also some timed run and jump powerups thrown in there for good measure.
 
One thing I like about 2D levels (having only designed 3D levels before in Atmosphir up until now) is how much more accessible and streamlined they are. I remember the learning curve I first had to go through to understand a WASD + mouse setup...controlling two things at once - the character and the camera - did not come naturally. But here, you’ve got the Mario formula that everyone understands: just worry about the character. Move left or right, jump or climb, and use a weapon every once in a while. Actually, I’m thinking that I’ll even make my future 3D levels completely designer-camera-directed, as they are in Super Mario Galaxy.
 
 The full level, as seen from the "map room" area
My favorite part of the whole thing really is the map room, where the camera zooms out for a complete shot of the entire level. It was kind of a cool "a-ha" moment when I added it in, and it’s a perfect example of how cameras can be used to do much more than just follow the character around. From cutscenes to security cameras to whatever, this is a powerful little tool. Another highlight for me is the gravity room, because I wasn’t quite sure how gravity puzzles and platforming would work in 2D. Turns out they’re pretty sweet, and I must have re-made that section 5 times before I was happy with the layout. I also thought a lot about the foreground/background elements, so you see a lot of slightly-blurry items in the foreground and distant mountains and trees in the background. They’re cheap but effective ways to give a 2D level like this a little more dimension.
 
Playtesting this level probably took just as much time as designing it. I had to think a lot about backtracking and making sure you could get back to every section if you needed to so the player was never trapped. For example, in the final boss room, a block falls down behind you, blocking your way out and making the final fight more confined. But if you run back through the level and get back to the other side of that wall, you would actually be stuck and have no way out. So I hid a teleporter under the ground, and had it trigger on only after the final boss is defeated. I’m always anxious to push a level out as soon as it’s ready, but it’s worth it to play through everything multiple times and make 100% sure it’s not broken. Now I don’t upload a level unless I can play through it 2-3 times perfectly. I’m constantly pressing F2 to jump back and forth between play and design, making small tweaks here and there.
 
 The final boss fight has Muka Shaman shooting at you from the foreground
In the end, there’s always stuff I wish I had added or improved upon. I wish I had added some unlockable achievements/treasures like Linden’s Stratosphere for collecting all the bombs or jewels or something, to make the completionists happy. The box-pushing puzzle didn't translate that well into 2D, or maybe I should have made the box bigger. I also wish I had thought up of more ways to unlock areas instead of just bombs and keys - gradual increased run/jump powers would have been a really cool addition. But maybe I can save that stuff for a sequel, if enough people like this one.
 
The level is edit-unlocked if you want to go in there to look under the hood and see how things were made (just click the edit button on the level detail page). Some quick design tips and techniques for looking through the level:
 
1. Check out how many Force Area objects are used. In some areas, I wanted to restrict the player to a 2D plane only, but in others I wanted them to be able to go a block or two deep into the background. So instead of just using one big 2D plane, I cut it up into several sections to make sure players could reach the correct areas.
 
2. The hidden puzzle room (in the far right corner, under the final ladder) is a nice case study for triggers and moving platforms. You step on two "pressure plates", which are essentially just moving platforms that drop down when you touch them to reveal an invisible area trigger, which in turn sets off the flying wooden discs that push the soccer ball around. I modified this puzzle a lot to prevent glitches, such as the moving platforms pushing the ball through the wall or off the course...that's why the moving platforms rise from the floor and slide into the background, instead of just going up and down.

3.Shift + WASD (fast pan) and Shift + Q/E (10 floor jump) were the best shortcuts ever with this level, which required a lot of bouncing around between sections.
 
4. There are a lot of invisible info stickers attached to timer triggers. Instead of having the same info sticker message show up over and over again when you entered an area, I had it set to only show up once for 5 seconds or so. This helped it feel a little less repetitive and not feel out of place (like a hint about bombing a block showing up even after you've already blown it up).
 
5. I tried to squeeze every ounce of performance I could in the level, so I used area triggers to spawn enemies, move platforms, and light torches only when you've entered that particular section. The level has to keep track of all "interactive" objects that move around at all times, even if they're off screen, so it's helpful to have these guys hidden until they're really needed. A little extra boring grunt work, but hopefully it helps the level play a little smoother.

Well, that's it for this entry. Hope you enjoy playing it, and please let me know what you think!
http://www.atmosphir.com/atmosphir/level/show?id=128474
-dave ( okaysamurai)
Posted by MB

I've never heard of Atmosphir, but now I'm wondering if it should even have a game page on the site. What exactly is this?

Moderator
Posted by okaysamurai

It's a blog entry documenting the creative process behind a level I recently designed using Atmosphir. I just wanted to start a little developer's journal here about my level designs...is that okay?

Posted by MB
@okaysamurai: Oh it's fine...I was talking about Atmosphir itself and whether it's page on Giant Bomb should even exist. It's probably fine, I'll talk it over with some of my colleagues. 
Moderator
Posted by okaysamurai
@MB:  Gotcha. Yeah, I wouldn't see why not - it's an online game/editor in the same vein of LBP / Minecraft / etc.
Edited by Nazmus
Linden's Metroidvania Canvas 2D Review 
By Nazmus Shakib Khandaker 

 My first adventure game was a 2D DOS game called Dangerous Dave. While a 21st century kid might find the game nothing more than an outdated, boring, piece of software, it was the world for me. I would scroll horizontally in colorful rooms, avoiding water, fire, and predictable monsters; I would loose and have to start from level one, determined to reach level 10 in the next try. There is something about games like these that I don’t find with modern games. Not to say I don’t like modern games; in fact, I don’t know how I would live without it. But something is missing in today’s virtual reality gaming experiences that existed in the ancient gaming era.

It is the simplicity that is missing from today’s games. Most games today try to depict reality, and, I have to say, they are doing a very good job at it. Back in the day, we did not have to take into consideration the dozens of things when trying to play a computer game; we did not have to worry about a 360 degree camera, an enemy coming from the back, different combat moves, strategic defenses, driving, shooting, at least not all at the same time. We would focus on the core gameplay and be good at it! Sometimes, one of our favorite games are those that are simple and doesn’t have much going on (Mario anyone?) Sometimes, we want to talk away from the complex reality and go into a simple wonder world. Linden's Metroidvania Caves 2D, by Okaysamurai, is a simple wonder world.

Linden’s Metroidvania brings back many of the feelings that the 2D games once had, yet is so riche in environmental details that I felt completely immersed in the game during the entire gameplay. Linden’s Metroidvania is a game designed in a platform called Atmosphir. It is about the main character trying to explore a forest, when he falls into a hidden underground cave, full of treasures, dangerous obstacles and angry creatures. But the game is much more than that. It keeps the player engaged throughout the entire gameplay, with a constant storyline, hidden secrets, and even a mini puzzle. The designer paid attention to every environmental detail, making every part of the game look realistic and believable. But the best thing about this game is that all the environmental details does not distract the player from the gameplay at all. In most 3D games, the environment greatly affects a gameplay. A tree, for example, would require a player to walk around it. But because Linden’s Metroidvania was a “sidescroller” the environment did not affect the core gameplay, but rather blended in the background and foreground. The game looks beautiful, yet, it retains the simplicity missed from the old 2D sidescrollers.

One of my favorite things about Linden’s Metroidvania is the “map” area. When the player enters this area, the camera slowly zooms out, giving us a view of the entire level. Not only is this helpful, it works great and gives us a sense of how big the level is. But what I really appreciated is the minor details the designer worked on. In the “map” view, there are boxes and a torch in the foreground, and, surprisingly, this fits the scene so well, that it makes everything look beautiful. No wonder I returned to the “map” view just to appreciate the how it looks.

An important thing with designing or building anything is the final polish. This final touch can make huge difference on how the product is presented. Unfortunately, I have seen so many products that are, by itself, great products, but their lack of polish makes them look as if it is unfinished, or as if its designer did not put much care into it. But Linden’s Metroidvania is not one such product. It has polish. The designer made sure that the game is optimized for performance, and nothing is too hard or frustrating, and that everything feels right. I have to give a hand to Okaysamurai for that extra effort. Another thing I like about the game is that I felt connected with the designer, only because of the dialogues provided throughout the game. They were not annoying or useless but rather had a welcoming tone to it. While I didn’t read every dialogues (really, who ever does?), I appreciated them when I did read them.

I will conclude with some of my thoughts on the platform itself, Atmosphir. Since my childhood, I would finish a game and still be hungry for more of it. I would imagine what happens next. When I found a flaw in the game, I would ask myself, “if I created this game, I would make the game behave like this, or add this in, etc.” But at the same time, I never thought I could. But Atmosphir changed that! Atmosphir allowed me to play with my own imagination and create my ideal game. I no longer have to follow a game development career to create my own game! I can be anything and yet develop my own gaming experience. Atmosphir makes it easy and is a perfect platform for those, like me, who want to test their gaming imaginations. I give Okaysamurai another hand for making Atmosphir a reality.

Posted by okaysamurai

Wow, thanks for the review Nazmus. Glad you enjoyed the level!

Posted by LordAndrew
@okaysamurai: Looking at it, it seems to be browser-based? I think that's the issue MB has: Giant Bomb does not cover browser-based games. That's not to say you can't blog about them, just that they don't get pages on the site.
Posted by okaysamurai
@LordAndrew: Ah okay, thanks for the clarification. Atmosphir started out as a desktop game, then moved to the browser with Unity 3D, and now a desktop version is coming out next month. I'll update the main page to reflect that...much appreciated.