Jump to content

Need help with level design methodolgy


Recommended Posts


(Please skip to the paragraph with font in red to start reading about my question);


We're a team of two guys trying to make our very first game. We use Unity in 2D setup as our game engine...

I'm the one producing graphics & animation & overall artwork...


I have done numerous character creations and animations up to now and some basic level&background scenes/setups.


Our level is going to be about 20.000 pixels wide in total. Not mentioning height since the game is side scrolling platformer and the height of levels is irrelevant to level length in terms of dimensions.


I'm comfortable with using Illustrator CS4 and plan to design whole one level in it. So, please do not suggest me to change the software I'm working with. I need a method that can be applied for Illustrator.


Here is the scenario that I need help with;


The level I'll be working on is going to be approximately 20.000 pixels wide in total (the later ones can be wider). But, maximum allowed artboard dimensions in Illustrator is 16.000 pixels wide. Fine, I'll scale the whole work to 1/2 and the width makes 10.000 pixels, thus, comfortably fitting in the maximum allowed width for the artboard and allowing me to work on it as a whole.


1) How I'll go about exporting the background in actual dimensions to be used in Unity and actual game?... Because when I'll export it, it should be reverted back to 20.000 pixels width and therefore Illustrator will not allow me to export this because of the limitations. And there is no function such as  "export to target dimensions/scales in pixels" but PPI settings. PPI will not work since it's useless to render it in 150 nor 300 PPI since it won't be used for printing purposes but screen.


2) I can export it in exact 1/2 scaled dimensions with 10.000 pixels wide in total. But what happens when we import it in Unity and scale it 2x?... It will eventually be distorted since it won't act as a vector drawing anymore and also RAM & System resources usage / performance issues may occur with such big images (I'm not sure with this part since I'm not experienced with optimizations for performance regarding a game.)



I can divide whole level in two parts each 10.000 pixels wide(or say, 4 parts with each 5000 px) with 1/1 scaling. Then comes my actual questions, will my friend working in Unity, be able to align those two parts back to back and join them in Unity without a problem?... Is this the convenient way of doing this so that if we have, say, 40.000 pixels wide level, can I pass the background image to him in 4 parts? Will this also save us for optimization purposes and will this method work for using system resources in a better way?


Thanks for all the replies and suggestions in advance;



Link to comment
Share on other sites

Hi SymboliC,


I say this with absolute respect and in an attempt to protect your time, energy, and sanity.  This is a common and terrible beginners mistake/misconception.  Levels should be bade out of small, reusable segments (which you can create with anything you'd like)...otherwise you'll cripple the games performance, take much longer to create each level or heaven forbid change a level,  and drastically increase the games overall file-size. Hint, if the graphics program is limiting a max size, its for a reason.


I just recently had to talk a beginner game artist friend of mine (who was trying the same thing with Photoshop) down off of that same ledge. Photoshop was slowing to a crawl on his system, but he expected a game, with lots more additional art (animations), a ton of math, collision detection, game logic etc to not crawl while displaying the same image?  Yes, you can chop up the full level to more manageable chunks (for game performance), but level editing and reediting is still just as big an issue or bigger, because the chopping up and putting back together in game is now another step.


Ironically, my friend, who was resistant to reusing art then showed me his finished giant hand painted level, and there was tons of reuse anyway.


Please look into level editors and tile map editors that work well with Unity ASAP. A Game level can look 100 percent hand painted and still be made out of carefully crafted and reused (with scaling, flipping and rotation..and even color tinting) small segments.


PS, Rayman Legends uses the same system of tiling art and reusing small chunks of earth, grass, platform, etc etc.


I hope this comes across as helpful and not annoying or pushy.. I've just seen fellow artists exhaust themselves due to this very "idea", only to end up having to redo all the levels they made later, the right way...because not only did it prove to take far too long (especially because there will ALWAYS be constant needs to redesign levels) but because the games performance became absolutely terrible.


So, my two cents as an over decade long professional game artist... measure twice, cut once.. do your research and force the programmer to do very realistic benchmarks to make sure you're not making a game in a manner that will destroy itself. I highly recommend you research all your level creation options for Unity.

Again, my alarmist arm waving and hyperbole comes from a strong desire to protect a fellow artist from something that will cause much pain and exhaustion (and typically depression)....This very thing has destroyed countless game projects in their tracks.


Sorry if this comes off as abrasive.


Mike.... but speaking as a pro game artist, NOT as a representative of BrashMonkey in this case.

Link to comment
Share on other sites

I agree wholeheartedly with what Mike wrote about game levels. Using one, giant (or even a few rather large) raster images for backgrounds is a bad idea. You may argue that Unity is hardware accelerated, but the hardware is still expecting "textures" which are usually limited to squares anywhere from 128x128 to 1024x1024 pixels in size, in powers of two. Besides the actual runtime aspects, your idea would also have a negative impact on efficiently storing and distributing the resulting game.


I also want to go slightly off-topic for a bit and point out that InkScape is free, and I just tested creating a 20,000 x 1080 pixel canvas, and it worked just fine (although I haven't drawn much actual content on said canvas). This isn't really that surprising, though. InkScape doesn't have to store 21,600,000 actual pixels anywhere, since vectors are just abstract, mathematical constructs, and thus use very little memory. They're only turned into pixels when you want to look at them, and then they're usually limited to the size of your computer's display (which I doubt is 20,000 pixels in any one dimension ;)). Exporting such an image to a file will, of course, take a while, and use scads of memory. This probably has something to do with why Illustrator has its size limit.


I know this probably won't make you switch to InkScape, but you should at least give it a try (but only for making smaller stuff, like Mike said... at least until someone makes a tool for importing SVGs into Unity as actual geometry, rather than as textures). It's actually quite good, and you can't beat that price ;)

Link to comment
Share on other sites



Thank you both for helping me to clear my mind on this subject a bit more. I respect you both for your replies!


I've been reading a lot on game design & development recently but for some strange reason I haven't come across much information on this particular area of game making or maybe I'm looking for wrong answers.


As I've also pointed out in my OP I tought that it would be more efficient to divide the whole level into smaller "segments" prior to importing in Unity. Since I have had many experiments with Adobe Flash and I'm a little bit aware of RAM x CPU exchanges, I also guessed it isn't a wise move to export all level background as one big PNG to import in Unity later.


But here comes the part that I wonder about... Would it STILL be convenient to work on a level as a whole in Illustrator and then slice it into many small segments and pass them to my friend to place it in Unity enviroment?


Or should I consider quitting using Illustrator and switch to another software? Like the one RunnerPack has suggested?

Though 16000 px limitation is not a problem anymore if I'll have the chance to chop it into smaller parts.


On the other hand, despite it's a side scroller, I'm tinking of trying to inject as much realism as it can take into the graphics & line art...

As a 80's & 90's gamer I'm fully aware of tiling, tile sets, assets etc.... but never had experience producer-wise aside from playing those old games.... =) I don't know how it is applied in modern games with advanced graphics and textures... does it make any difference having detailed graphics or 8-16 color tiles?...


BTW, I should mention that, I have divided and prepared the artwork in a few main layers(with sub layers) to speed things up.


1st layer -> still image background, which I assume will be sliced into as many pieces as needed like 20.000/20 = 1000 pixels wide each... or even twice more the ratio, half the size per segment...

2nd layer -> platforms - they're just in form of red boxes for now for prototyping purposes. I didn't care about going deeper in details with them since their positions are going to be manipulated many times from now on.

3rd layer -> items

4th layer -> the character & the enemies


other "layers" or camera is specific to Unity. I'm just referring to artwork side with those ones.


For the tiling part, I think we're going to need to use tiling and reusable bits of graphics for the 2nd layer I wrote in bold? Right? Or should I consider using this method also with the background despite slicing it into many segments??...


Thank you both for helping me out with this...

I think I'll soon figure it out completely...  :roll: (hopefully...) 

Just want to get on the right track before starting working on level designs which are now created conceptually in small sizes.



Link to comment
Share on other sites

Upon re-reading this post of mine, please keep in mind I'm not talking specifically about you or directly to you..as I've seen and tried to help several artists who fell into this trap early on.. and when this topic comes up I tend to cover all the points and flavors of every incident with each of the specific artists.  So please know I'm not trying to pin any psychological or philosophical position onto you... just trying to cover all the bases for any other artist as well who might stumble upon this forum thread when facing the same issue/decision.





Hi again Symbolic.


To use fantastically appropriate word-play, no matter how you cut it, creating the level as one giant illustration is just a bad idea.


1) Super hard and time consuming to drastically edit a levels design after you've already created it, which is in the vast majority of games, especially side scrolling games, critical for ensuring fun gameplay!


2) Super wasteful of the platform's texture space...no matter how small you cut up a giant painting, its still ALL THERE... Imagine you cut it into 4096x4096 textures...you're still going to have at least two of these taking up texture space at a time at all times...and even this size is far bigger than ideal for optimal



3) Super wasteful of the games file-size, download size.


In short, using giant bitmaps for levels (even cut into pieces after the fact then reassembled in the game engine) is nothing but an inexperienced game maker trying to make something work within their current experience and tool-set comfort level.  This is an age old problem..people bending over backwards to try to rationalize and execute a very un-optimal solution to a situation using whatever limited knowledge base and tool set they currently have.  It typically leads to either disaster or a drastically inferior final product taking drastically longer to make, causing immense stress, frustration and exhaustion for the artist and delaying or dooming the entire project.



Please consider that taking a few days to research a more optimal option will empower you for the rest of your life, (all future game projects) and will end up saving you a ton of time and energy over the remaining course of this project, and for every future game project for the rest of you life. It's THAT important.


Important points I want to make:


1) Please DO use illustrator, but NOT to create entire levels, only to design the segments you will use to create the entire level in a proper level editor.


2) Please always do your research as thoroughly as possible when confronted with any new MAJOR task.  Creating many large levels for  a game is a HUGE undertaking, and it's critical you "power up" before you dive in blind and shoot yourself and the entire project in the foot with an "I'll wing it" approach.


3) An unwillingness to learn and add new tools for the right job to your tool belt will lead to  drastically more depressing and unsuccessful life.


did you click the link I provided to those resources for 2d level editing in Unity? The Smart-Sprite functionality is definitely one of the things you should learn and strongly consider using. Rayman Legends is an absolutely gorgeous game who's levels often look very much like giant hand painted masterpieces, but its all smart-sprites and re-used hand placed scaled and rotated segments.


Here's a peak into what a truly great 2d level editor looks like: https://youtu.be/y-chi097uV4?t=7m7s


As you can see, its a more advanced version to smart-sprites but extremely similar.


I assume you wouldn't draw every blade of grass from scratch no matter what... so instead of making a group of grass blades and stamping them around in Illustrator, please make your group of grass and stamp it around in a level editor, so its actually a small image being reused in an optimized manner in the game.


Lecture now over. Thanks for your patience. :)



Link to comment
Share on other sites

hi mike,

First of all thank you so much for spending your valuable time to share all those thoughts and experiences with me. I really appreciate this!!

About my questions and what I got from your replies is that I really know very little about game design other than traditional designing.

My next question is how do you make the final level design stand in unison and homogenous if one must work on it in so many little pieces?... This is like DaVinci painting a war scene on a 15m*8m wall... :shock:  and for sure I'm no Leonardo.  :mrgreen: 

Second, i'll have a look at the links you've sent... Actually I checked with the first one last night.

* Should I create background image's pieces and all level design just like i go with level assets?...

Thanks a lot for making me become aware of all those and i'll reconsider the necessity of additional tools that I need to work with...
but i was really comfortable with illustrator and hope to use it in exchange with other softwares...  :roll: 


Link to comment
Share on other sites

Illustrator is great for making the sections.. and you can perfect the sections and text them in illustrator to make sure they can be combined nicely in the ways you'd want.  Once you watch the video clip I linked to things will make a bit more sense.


Definitely look into the Smart Sprites editor..a combination of that and hand placing sections directly in Unity might be the way to go...another possibility is you could actually create bigger groupings of the segments you make in Spriter itself and place them as though placing an animated character in a level...they would just be big, and one frame.


I've never made a game in Unity that required side scrolling level creation and not for years, so all I can say is do research, experiment, and most of all, benchmark testing to make sure whatever solution you come up with will run smoothly once everything is in place.



Link to comment
Share on other sites

Hi mike,


At first, I was quite confused by the methods you have mentioned above since I am not familiar with game artwork creation.

But, after watching Rayman, things started to fall in place.


And also  a few minutes ago I've spoken to my friend who's responsible from the development/unity part of this project, he suggested me to watch tutorial vids on youtube regarding a tool called Ferr2D (https://www.youtube.com/watch?v=7QMRYddFeME)... And there, the texture used during tiling process was quite similar to the one you've referred to a couple of posts back in this topic. https://bitbucket.or...unk/READMER1.md


So to sum it up, what I understand from this workflow is,


1) Let's say, I'll have a mansion theme/scene which has a couple of staircases, a few chandeliers, carpets etc... And I want that staircase to be either interactible or part of the background.

2) I'll draw a couple of "steps" of the whole staircase in illustrator,

3) Then import this "asset" into Unity which has an extension of a level editor (some X named level editor)

4) Then start to build all the enviroment there, including those staircases using small bits that I've previously prepared in Illustrator. (just like similar to character rigging in Spriter like adding arms, legs, head of a character which were previously created in an illustration software where you see the character as a whole and decide about the joints etc so it will work as a charm when you import those body parts into Spriter... right?)

5) Finally, all the enviroment/level can be seen in the level editor in Unity and I'll do the adjustments and tweaks inside there... i.e.if I decide to go with having more staircases here and there, I'll do it so in the level editor)




And what about a cityscape/skyline in the background?... Will it be done in the same manner?... I mean, will I draw a city silhoutte of 4-5 buildings which has a total width of 200 px and then tile it along the X axis in level editor to generate a 20000 pixels wide cityscape?


Also, please correct my terminology where needed...  :oops:



Link to comment
Share on other sites

Exactly right.. and you can always tweak and re-import each small part like the steps as you work on the level in Unity..to make sure it connects perfectly as you need with other art assets.


Yeah, That Ferr2d is awesome. Definitely learn that too.


Keep in mind, there's the actual solid/interactive parts, like floors and walls, and then stuff placed just to add visual variety etc...which typically are in the background or closer to the camera than the player's layer and therefore have no collision detection requirements.


Use still like Ferr2d for the majority of the level designing, and use other image bits, rotated, flipped, scaled etc and placed wherever in order to add more variety and interesting details.



Link to comment
Share on other sites

Thank you very very much for letting me to know those essential details and also introducing "level editing" process to me.
I think you've saved much of my time and energy by doing so!! =)
Now, the next assignment for me is to explore the world of Unity and start watching some tutorials regarding level creation.
Thank you once more!  :)



P.S. Is there a [sOLVED] tag for the topics that we've opened?... It is very useful since people can jump straight into solved topics to get what they want easily. I, at least, pay attention to that... ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...