Posts Tagged ‘level design’

Transformagician Level Generation and Design

Posted by
Tuesday, May 3rd, 2016 12:42 am

"ANOTHER

I already touched upon the level generation in the Developer commentary video,
but that’s not enough info now is it! Here’s some more…

Tiles

One of the easiest ways to construct a virtual environment is to use tiles.
For me the decision to go with the technique was made even easier by already having an old tilemapping system laying around.
It was a bit rusty, but a few hours of mangling put it straight.

Sets

WallAndFloors

The tile graphics are as simple as possible. There’s a wall and there’s a floor.

I of course only implemented these assets as they were made by Ranquil. Pay special attention to the bump mapping!

Reading

The level is generated from an xml file. Here’s a little example:

<Ship type="TestMap">
 , , , , , , , , ,
 , . w . h . w . ,
 , . . . . . . . ,
 , . w . p . w . ,
 , . w w w w w . ,
 , . . . . . . . ,
 , . . . e . . . ,
 , . . . . . . . ,
 , , , , , , , , ,
 </Ship>

TestLevel

There are a few oddities right off the bat. The XML element is called a ship as that’s what the original project had, spaceships. The map is also flipped around as unity XYZ coordinates don’t quite match with the XY coordinates of the map file.

One nifty feature in the generator is spawning random rooms to specific positions on the map. The rooms themselves are defined in the same way as the maps.

<Room name="roomD" loot_a="0,1" enemy_a="2,6">
 w w w w . w w w w
 w . . . . . . . w
 w . w . w . w . .
 w . . . . . . . w
 . . w . o . w . .
 w . . . . . . . w
 w . w . w . w . .
 w . . . . . . . w
 w w w w . w w w w
 </Room>

And rooms areas are outlined with the characters R (room start position) and r (room limits).

 c c w c c c c c , , , , ,
 c c c w c R r r r r r r ,
 o c c c c r r r r r r r ,
 c c w c c r r r r r r r ,
 c c c w c r r r r r r r c
 c w c c c r r r r r r r c
 c c w c c r r r r r r r c
 c c c c c r r r r r r r c
 o c w c c r r r r r r r c
 c c c w c r r r r r r r c
 c c c c c c c c c c c c c
 , , , , , , c c c c c c c

(excerpt from a bigger map)

You can see the room randomization featured in the GIF.

Writing

Designing maps in black and white is kind of like programming in vanilla notepad, no syntax highlighting, no nothing. In other words clumsy and crude.

This issue can be resolved with conditional formatting in a spreadsheet (in this case Libre Office). Compare and contrast, the text file version:

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
 , W w w w w w w , , , , , , , , , , , , , , , , , , , , , w c c c c c , , , ,
 , w p p . . . w , , , , , , , , , , , , , , , , , , , , , w c o c o c , , , ,
 , w p p w w . . c c c c c c c c c c c c c c c c c c c c c c c c c c c , , , ,
 , w . w R r r r r c c c c c c R r r r r r r r r c R r r r c w w , , c , , , ,
 , w . w r r r r r c , w c , c r r r r r r r r r c r r r r c , , , , c , , , ,
 , w . . r r r r r c , w c , c r r r r r r r r r c r r r r c , , , w c w , , ,
 , w w . r r r r r c , w c , c r r r r r r r r r c r r r r c , , , w c w , c ,
 , , , c r r r r r c c c c c c r r r r r r r r r c r r r r c , , , w c c c c ,
 , , , c r r r r r c c , w c c r r r r r r r r r c r r r r c , , , w c w , c ,
 , , , c r r r r r c o , w o c r r r r r r r r r c r r r r c , , , w c w , , ,
 , , , c r r r r r c c , w c c r r r r r r r r r c r r r r c , , , , c , , , ,
 w c c c c c c c c c c c c c c r r r r r r r r r c r r r r c , , , , c , , , ,
 , c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c , , , ,
 w c R r r r r r r r r r c c c c c R r r r r r r w c c R r r r r r c , , , , ,
 , c r r r r r r r r r r c c c c c r r r r r r r w c c r r r r r r c , , , , ,
 w c r r r r r r r r r r c c c c c r r r r r r r c c w r r r r r r c , , , , ,
 , c r r r r r r r r r r c c c c c r r r r r r r c c w r r r r r r c , , , , ,
 w c r r r r r r r r r r c c c c c r r r r r r r c c c r r r r r r c , , , , ,
 , c r r c c c c c c c c c c c w c r r r r r r r c w c r r r r r r c , , , , ,
 w c r r c w c w c w c w c c c w c c c c c c c c c w c r r r r r r c , , , , ,
 , , r r c c c c c c c c c c c w c R r r r r r r c w c r r r r r r c , , , , ,
 , , r r c w c w c w c w c c c c c r r r r r r r c c c r r r r r r c , , , , ,
 , , r r c o c o c o c o c w c c c r r r r r r r w c c r r r r r r c w w , , ,
 , , , , c c c c c c c c c c w c c r r r r r r r c c w r r r r r r c , w , , ,
 , , w w c c c c c c c c c c c c c r r r r r r r w c c r r r r r r c , w , , ,
 , , w w c w , , , , c c c w c c c c c c c c c c c c c c c c c c c c , w , , ,
 , , w w c w w , , , c c o w o c c R r r r r r r r c , , c c , , , c , w , , ,
 , , w w c w w w , , c w w o w w c r r r r r r r r c , , c c , , , c , w , , ,
 , , , , c , w w w , c c o w o c c r r r r r r r r c w c c c c w w c w w w w w
 , , , , c , , w w c c c c w c c c r r r r r r r r c w c o c c , , c , w , , w
 , , , , c , , , c c c c c c c c c r r r r r r r r c c c w o c c c c , w , , w
 , , , , c , , , c c R r r r r c c r r r r r r r r c c c o w c c c c , w , , w
 , , , , c , , , c c r r r r r c c r r r r r r r r c w c c o c , , c , w , , w
 , , , , c c c c c c r r r r r c c r r r r r r r r c w c c c c w w o w w w w w
 , , , , c w w w w c r r r r r c c c c c c c c c c c , , c c , , , w , w , , ,
 , , , , c c c c c c r r r r r c w c , w , , , w , c , , c c , , , , , w , , ,
 , , , , , , c w c c r r r r r c o c , , w , w , , c c c c c c c c c , w , , ,
 , , , , , , c w c c r r r r r c c c , , , w , , , c R r r r r r r c , w , , ,
 , , , , , , c w c c r r r r r c w c , , w , w , , c r r r r r r r c , w , , ,
 , , , , , , c w c c r r r r r c o c , w , , , w , c r r r r r r r c , w , , ,
 , , , , , , c w c c c c c c c c c c c c c c c c c c r r r r r r r c , w , , ,
 , , , , , , c c c c c c w c c c c c , , , , , c , c r r r r r r r c , w , , ,
 , , , , , , , , , , c c c w c R r r r r r r , c w c r r r r r r r c c c c c ,
 , , , , , , , , , w o c c c c r r r r r r r , c w c r r r r r r r c w w w c ,
 , , , , , , , , , , c c w c c r r r r r r r , c , c r r r r r r r c c c c c ,
 , , , , , , , , , , c c c w c r r r r r r r c c c c c c c c c c c c c c o w ,
 , , , , , , , , , w c w c c c r r r r r r r c c c c c c c c c c c c c c c c ,
 , , , , , , , , , , c c w c c r r r r r r r c w , , w c o c c w , c w w w c ,
 , , , , , , , , , , c c c c c r r r r r r r c w , , w c c c c w , c c c c c ,
 , , , , , , , , , w o c w c c r r r r r r r c c c c c c c o c w , , w c w , ,
 , , , , , , , , , , c c c w c r r r r r r r c w , , w c c c c w , , w c w , ,
 , , , , , , , , , , c c c c c c c c c c c c c w , , w c o c c w , , , c , , ,
 , , , , , , , , , , , , , , , c c c c c c c c w , , w c c c c w , , , c , , ,
 , , , , , , , , , , , , , , , c o c o c o c , , , , , c , , c , , w w c w w ,
 , , , , , , , , , , , , , , , , w , w , w , , , , , , c , , c , , w c c c w ,
 , , , , , , , , , , , , , , , , , , , , , , , , , , , c c c c c c c c h c , ,
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , w c c c w ,
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , w w , w w ,

With the conditionally formatted spreadsheet:

Spreadsheet

A thing a beauty! And here’s the map rendered in engine (flipped around this time, also no lighting)

Level2Full

Yet again there are a few issues. You need to jump though some hoops to get from the ODS spreadsheet file to the XML file. First the file is converted to the comma separated values format (CSV) and then the data is manually copied to the XML. Yeah, that last bit especially is not so great.

It is trivial to read the CSV file directly from Unity (something I didn’t know about way back then), so that’s what I’m going to do in the next project.

Conclusions

Tiles are a simple and powerful way to represent a level. Reading letter based map files is easy to code and fluid to create (with conditional formatting at least). Reusing systems that you’ve made before is a great boon to productivity. Take advantage of previous work as often as possible.

And, of course, you can play Transformagician right here.

Fear Me! – Post-mortem (pun not intended)

Posted by (twitter: @JustSomeNikola)
Friday, August 28th, 2015 1:58 pm

In Fear Me! you play as a happy-go-lucky ghost who has recently breached the veil of the damned in pursuit of his favorite leaisure activity – scaring children. A sort of action-puzzle blend, check it out if you dig that sort of stuff.

One of the more action oriented levels.

One of the more action oriented levels.

Short disclaimer: I’ll be writing like I know everything about everything, but in fact I just have approximate knowledge of many things.

How it went:

After being rudely awoken somewhere in the early afternoon by a combination of my dogs yelping and my neighbours drill-and-hammer work, I came to the realisation that Ludum Dare was going strong for about 11 hours. After a couple of sobering slaps, cups of java and some sandwiches I was ready for some gamedev on PC action. It was time for…

Brainstorming! (1-2 hours)

I put some depressing music on – Steve von Till – and pulled out my notebook and pen. A list of wild ideas came torrenting from the weird places of my brain.
It includes a Through the eyes of a dictator – Painting Simulator where you’re a painter. But you’re also Hitler.

Pictured: Game design document.

Pictured: Game design document.

(more…)

Three Hours In: The Doorman

Posted by (twitter: @nick_mudry)
Saturday, April 18th, 2015 9:35 am

Jacob (known as jtpup0), and I got about three hours in last night before we decided to call it a night and catch some sleep.

We started working on a game called Doorman. Our unconventional weapon? Doors. Yes, doors.

No, you’re not throwing the doors at people, instead you are placing doors around the level. You can use your doors to grant yourself access to other rooms you wouldn’t normally have access to, or even place a door in the floor and have an enemy fall through it!

Who is the doorman? Well…

The doorman used to be the doorman for a big shot top secret tech company, but instead he’s breaking in to find the company’s secrets and revealing them to the world.

It’ll be a fun little action/puzzle game, and feature pretty fun gameplay (if I do say so myself…).

Here’s a Vine Jacob recorded of just the player moving around and a little bit of the door creation… There’s also some screenshots I took from the Unity editor below it. Still a lot to do, but we’re moving along pretty quickly for just three hours of work last night!

Follow myself, @Nick_Mudry on Twitter and @jtpup0 on Twitter for more frequent updates as we work on the game! We’ll also be streaming development the game once we’re fully awake again! Click here for Nick’s channel, and click here for Jacob’s. As a shameless plug, check out our game dev team, Play Nimbus, for more of our games!

Luminess Post-Mortem: Level Creation Work Flow

Posted by
Thursday, December 19th, 2013 7:22 am

      Our experience in previous jams has taught us that with the short time frame you need to streamline workflows and divide up tasks.  During the planning phase of Luminess we made it a goal of ours to create a way to make levels so that Evan did not have to hardcode them all.   This would allow him to focus on coding the game and allow Jason and me to design the levels.
 
Level 3
       So, how do you get sweet visuals like this and be able to make a bunch of levels? Evan’s code loads an image that Jason or I create and checks every pixel for specific colors. Those colors correspond to specific types of walls. Generic walls that do no damage are in RGB Grey=100,100,100. The red kill walls seen here at the right are RGB Red=100,0,0.
 
 
 
 
 
Level 2
 
       Besides walls, the code also scans for certain pixels and places, PlayerSpawn, FinishSpawn, ColorOrbs, and Enemies. Enemies are drawn into the current levels, their spawns will turn on in an upcoming version. To the left is the drawn image of the level above. The little ‘P’ is where the player spawns and the ‘E’ is to spawn the end portal.
 
 
 
 

Tiles
      The workflow for level creation is this. We made a template in Pyxel Edit with the precise colors. Solid block tiles for various walls and icons for the spawns. The level is designed and output 8x the size. Evans code currently requires each pixel to be 8-bit, so we open the PNG in Gimp and Image>Mode>Indexed>Convert the image.

 
      We will be making more levels, and adding enemies. I will make a guide on how you can make levels and maybe we will add them to the game! So check back often to play the newer version! Look forward to reading iiechapman’s post on the Pixel Scanning code with SDL_GetRGB(). Also, darfnagel’s posts on his experience with level design and music production.
 
       Check out Luminess!
 

Level design sketch

Posted by
Sunday, December 15th, 2013 12:24 pm

level design sketch

 

A sketch of our game level design. Doors, movement of enemies and some dark areas to hide.

Procedural Maps

Posted by (twitter: @Local_Minimum)
Wednesday, October 30th, 2013 3:16 pm

In my personal slow-Jam I’m working on I decided to leave everything to Random and a few parameters.

Still there’s the need for levels, and the very basic requirements that everything should be connected, walled in and have a nice balance between narrow passages and open spaces.

There’s probably well known and better ways to do this, but any case, since I think the end result was more or less exactly what I wanted, I’m gonna outline how I did.

  1. Define an allowed geometry by normal sampling a width and height of the map (in tiles). I used a 2D boolean array as representation when doing the calculations
  2. Randomly seed some few (<1%, but more than ~7) positions so that each has a safety margin to the border of the array
  3. Iteratively connect dots by randomly selecting one not connected to the others and walk towards the closest other true position following Manhattan distance = 1 setting all passed positions to true.
  4. Repeatedly randomly select any edge pixel and randomly select one of its 4-neighbours that are unused and expand there.
  5. When sufficient number of tiles have been placed. For all edge tiles, place a wall in all unused positions with a chessboard distance of one

This is the result of three maps generated after one and other:
Cube Sphere Pyramid Lvl example 1

Cube Sphere Pyramid example lvl 2

Cube Sphere Pyramid example lvl 2

I only need quite small levels as each is only meant to last for maximum of 60s and the game is absolutely way too confusing to allow for larger levels, but in principle it would only require some parameter tweaking to get them too look quite differently.

I also like how one sort of can see where the seeds must have been placed.

Of course if anyone is interested in the code just let me know (it’s C# for Unity, and it’s not super-efficient by any means but since it’s only run at level start I figured it doesn’t matter too much).

First level mostly finished

Posted by (twitter: @piece_o_ham)
Saturday, August 24th, 2013 10:07 am

I think I may finish on schedule (I tried to auto complete that sentence with Ctrl-space LOL). I have most of my first level done:

level1

I think I may also get autotracker. Could anyone tell me if it is hard to use or if it does everything for you. Are there any parameters you must specify?

The rest of the game design notes

Posted by (twitter: @OmiyaGames)
Sunday, May 5th, 2013 8:26 pm

[Cross-posted from Omiya Games blog]

Here’s a dump of all the design decisions I’ve made on The Sentient Cube.

levelDebug

First, the debug level. Always gotta have one for Unity. It’s a great place to create prefabs, and tweak the numbers to apply to the rest of the levels. Also a great place to test stuff, like the water block (top-left), unattainable block (top), bouncy block (top-right, unused in game), ice block (not shown), and rocket boosters (red, left).

levelHowToPlay

How to Play was a nasty one. The first curve is there to give a clear and empty view for the player to practice the controls. It also puts the Goal out of view, making it easier for me to teach the basic objective of the game: collect smaller objects. The first bend is where I scatter the smallest objects, and provide the instructions to roll into them. I’ve put a lot of objects there to show them lighting up as you get bigger.

Proceeding forward, I have this weird bend that stretched all the way to the left. The straight-way itself is intended to let the player practice collecting bigger objects, in a true breadcrumb fashion. It’s also here that I mention the arrow at the top of the screen, that it indicates where the goal is (straight ahead). It’s worth mentioning that I call this bend “weird” because it was also intended to hide a problem: Unity’s default GUI shader draws over all other objects. By placing it to the far-left, the player wouldn’t see the text at the beginning of the level. The shader that corrects this weird overlap is openly available online, but to respect Compo rules, I didn’t copy this shader; I merely hid it.

level1

Level 1 was actually the second level I created, code-named “pyramid.”  This level simply acts like a practice level, where the goal was clearly above you, and the objective was simple get large enough to be able to climb up the steps.  The bouncing spheres was a small challenge I’ve added to make things a little more interesting, i.e. you have to time it correctly to obtain each sphere.  Past that, it’s a pretty generic Katamari level.

level2

In Level 2, I wanted to establish that the Goal could be anywhere.  In this level’s case, directly below you!  This was actually the first level I created, and you can tell from the knocked over objects I really just zoomed through this.  It was the first place, though, where I got a good handle on the amphitheater formation.

level3

In Level 3, I introduce the rockets!  I initially intended the rockets to help you fly upwards, but that was nearly impossible to do with the given control scheme.  Instead, I found it useful to traverse great distances due to its added speed, and decided to do a level designed to demonstrate just that.  To acknowledge that players may simply wants to play around with the rockets, I placed slopes around the Goal to make it easier for them to reach it.

level4

In Level 4, I introduce the water block and the ice block rather haphazardly.  This was the last level I created, and I simply had very little time left, so I dumped every new assets I had into it.  The walls surrounding the ice is there to prevent both you and the objects you’re trying to stick from falling out, making it easier to collect things.  The objects are placed almost randomly, partly because of the chaotic nature of the ice-block.  The water blocks were intended for helping you adjust your controls, but in the end, they ended up being pretty useless.

levelCredits

And the Credits. This was actually hard to design, mainly due to tweaking the size of the breadcrumbs so you can definitely grab each text. Other than that, it’s intentionally a breadcrumb-to-breadcrumb level with no other purpose than, well, providing the credits.

Interested? Try The Sentient Cube here, and please rate the game!

[Cross-posted from Omiya Games blog]

Designing the levels for The Sentient Cube was a fascinating exercise, and one that provided a great insight in how Katamari Damacy was designed.  Both games have very lenient win conditions, and as such, have equally lenient level design that can be both creative and flexible.  Broadly speaking, there are two types of object placements used in The Sentient Cube: the breadcrumb and amphitheater formation.

breadcrumbFormation

Breadcrumb Formation

The breadcrumb formation is the easier one to understand, yet harder to setup.  In short, it’s a placement of increasingly larger objects placed into a trail for the player to follow.  It’s purpose is simple: to lead the player towards a specific point of interest.  This is most obvious in The Sentient Cube under the “How to Play”, “Level 3”, and “Credits” levels where they’re designed to introduce the player a new concept.  In “How To Play”, the breadcrumbs literally lead the player to the goal.  In “Level 3,” it leads the player to the rockets, which they can use to traverse through the large expanse very quickly.  Furthermore, the rest is intended to lead the player to the goal, much like “How To Play.”  Lastly, the “Credits” leads the player to each text in the game, making it more likely that they’ll spend the time to read it.

One interesting tidbits I learned from using the breadcrumb formation was that making a simple, straight trail was actually the worst way to implement this idea.  With the exception of the “How to Play” where the player needs to be guided to the goal, a straight trail feels too easy and boring.  Instead, it’s better to have the trail curve, and even place obstacles around those curves to emphasize it.  This is most evident in “Level 2” where I zig-zag the breadcrumbs; “Level 3” where it creates a small ‘C’ to lead you to the rockets; and “Level 4” where obstacles obstructs your view from seeing the next breadcrumb.

amphitheaterFormation

Amphitheater Formation

The amphitheater formation is a little less easier to understand, yet easier to implement.  In this formation, objects are placed in concentric circles with each layer consisting of similar sized objects.  As the layer gets farther away from the center, the objects gets bigger.  The formation is like that of the breadcrumbs, but in all direction.  Unlike the breadcrumb formation, amphitheater is flexible enough to allow quite a difference in size for each circle, which gives the level designer some flexibility.  This is seen in “Level 1”, “Level 2”, and “Level 4” where the objective is simply to grow big enough to roll over walls.

Similar to breadcrumb formation, variation in sizes within each layer is a lot more interesting to the player than the same size.  Additionally, each layer should increase in size exponentially rather than linearly.  Other than that, you can be pretty creative with it, making it square-shaped, putting objects at different elevations, putting gaps between cross sections, or even making them bounce.

Conclusion

Honestly, this game genre is surprisingly simple when it comes to level design.  With its loose restrictions, it’s easy to get creative on what kind of setting you’d like to create, let it be in Japan, USA, underwater, in space, etc.  Hopefully this will help and encourage others in exploring this great idea.

Interested? Try The Sentient Cube here, and please rate the game!

Time to write some levels.

Posted by (twitter: @caranha)
Sunday, December 18th, 2011 1:01 am

After a short night of sleep, time to write some levels to my game. I´m a little afraid that I may have made the game too hard, and that only luck will carry you through without dying at least once.

But if I think again, not that this is a bad thing, is it?

Or maybe it is the day two blues of not believing in your own creation…

Well, time for coffee and graph paper.

[cache: storing page]