2D Levels

I know this is a very basic question, but I'm just confirming. Do 2D games, like Mario, load up an entire image and use it like a tilemap?

no. mario will load a set of tiles and then draw thoses tiles on-screen (depending onthe player's position on the level) based on a map datafile.

Yikes; any suggestions then?

Yeah - use big chunks of images and make an editor which uses big chunks.

This is not only faster, but better for pcs. Where memory is at a premium, or storage space at a premium, tilemaps are used.

Pcs do not need tile maps for most games. If you have a HUGE area then you will need tile maps.

Proof is in platypus - a great shootemup by antony flack. No tilemaps there... runs well even on crippled pcs.

Could you please make a "stupid" version of what you just said lol? I'm a beginner to this whole 2D scene...

He means that you need to create many smaller images (likely in the form of squares). Then, you will use those images on a grid to make up a bigger picture. Have you ever noticed how 2D games such as RPGs use the same image for paths and trees all the way through the level? I'll leave you my RPG engine, though i doubt that it will help much as it is nowhere near completion and will NOT run w/o a level map and images. Level editor not included.

;WORKLOG
;3/25/06
;ADDED:
;frame keeper
;Drawhud/console variable
;keylist
;NEEDED:
;character commands and scripts
AppTitle("VGEngine")
Graphics 500,500,16,2
SetBuffer(BackBuffer())
SeedRnd(MilliSecs())
AutoMidHandle True

Type plyr
	Field img,spec
	Field movetime
	Field x,y
End Type

Type bkgd
	Field img,spec
	Field x,y
End Type

Cls

;scancode key list
Const up_key=200
Const left_key=203
Const right_key=205
Const down_key=208
Const q_key=16
Const w_key=17
Const e_key=18
Const r_key=19
Const t_key=20
Const y_key=21
Const u_key=22
Const i_key=23
Const o_key=24
Const p_key=25
Const rbrack_key=26
Const lbrack_key=27
Const a_key=30
Const s_key=31
Const d_key=32
Const f_key=33
Const g_key=34
Const h_key=35
Const j_key=36
Const k_key=37
Const l_key=38
Const semi_key=39
Const apos_key=40
Const z_key=44
Const x_key=45
Const c_key=46
Const v_key=47
Const b_key=48
Const n_key=49
Const m_key=50
Const com_key=51
Const per_key=52
Const forslash_key=53
Const main_1_key=2
Const main_2_key=3
Const main_3_key=4
Const main_4_key=5
Const main_5_key=6
Const main_6_key=7
Const main_7_key=8
Const main_8_key=9
Const main_9_key=10
Const main_0_key=11

centertext("Loading")
Flip
Cls

Global viewx,viewy
Global lvlname$ = "tstlvl.lvl"
Global maindir$ = CurrentDir$()
Global imgdir$=maindir$+"images" ;this is the nonexistant images directory (for you).  
Global lvldir$=maindir$+"levels" ;this is the nonexistant levels directory (for you).  
Global console=1 ;this is just an optional thing to display information that helps me debug the program.  
Global scrnshtdir$ = imgdir$ + "screenshots" ;nonexistant screenshots folder.  
Global plyrimg = LoadImage(imgdir+"tstplyr.bmp") ;nonexistant player image
Global errorfont=LoadFont("arial narrow",15)
Global timer=CreateTimer(50) ;frame timer to keep the number of frames drawn per second down to a managable level.  
Global back.bkgd = New bkgd
Global plyr.plyr = New plyr
	plyr.plyr=New plyr
	plyr\x=11
	plyr\y=11
	plyr\img=LoadImage(imgdir+"tstplyr.bmp")
	
;check to see if a directory is nonexistant
Global errorexists = FileType(Left$(scrnshtdir$,Len(scrnshtdir$)-1)) 

If FileType(Left$(imgdir,Len(imgdir)-1))=1
	direrror(Left$(imgdir,Len(imgdir)-1))
End If

If FileType(Left$(lvldir,Len(lvldir)-1))=1
	direrror(Left$(lvldir,Len(lvldir)-1))
End If

If FileType(Left$(scrnshtdir$,Len(scrnshtdir$)-1))=1
	direrror(Left$(scrnshtdir$,Len(scrnshtdir$)-1))
End If

If FileType(imgdir)=0 Then CreateDir(imgdir)
If FileType(lvldir)=0 Then CreateDir(lvldir)
If FileType(scrnshtdir$)=0 Then CreateDir(scrnshtdir$)

centertext("Loading.")
Flip
Cls

Dim bgimgs(255,1)
Dim chrimgs(255,1)

;load every existing image on the map into a number predefined bye the name of the image into the arrays
For I=0 To 255
	If FileType(imgdir$+"img"+I+".bmp")=1 Then bgimgs(I,0)=LoadImage(imgdir+"img"+I+".bmp")
	If FileType(imgdir+"img"+I+".dat") = 1
		bgfilein=ReadFile(imgdir+"img"+I+".dat")
		bgimgs(I,1)=ReadInt(bgfilein)
		CloseFile(bgfilein)
	End If
Next

centertext("Loading..")
Flip
Cls

;same for characters
For I=0 To 255
	If FileType(imgdir+"chr"+I+".bmp")=1 Then chrimgs(I,0)=LoadImage(imgdir+"chr"+I+".bmp")
	If FileType(imgdir+"chr"+I+".dat")=1
		chrfilein=ReadFile(imgdir+"chr"+I+".dat")
		chrimgs(I,1)=ReadInt(chrfilein)
		CloseFile(chrfilein)
	End If
Next

centertext("Loading...")
Flip
Cls

loadlevel(lvlname)
centertext("Loading...Done!!!")
Flip
Cls
While Not KeyDown(1)
	Cls
	frames=WaitTimer(timer)
	For I=1 To frames
		testkeyboard()
	Next
	drawlevel()
	drawplyr()
	drawhud()
	Flip
Wend

Function testkeyboard()
	Local tk_msecs=MilliSecs()
	If KeyDown(up_key) And tk_msecs-plyr\movetime > 200
		plyr\y=plyr\y-1
		plyr\movetime=tk_msecs
	End If
	
	If KeyDown(down_key) And tk_msecs-plyr\movetime > 200
		plyr\y=plyr\y+1
		plyr\movetime=tk_msecs
	End If
	
	If KeyDown(left_key) And tk_msecs-plyr\movetime > 200
		plyr\x=plyr\x-1
		plyr\movetime=tk_msecs
	End If
	
	If KeyDown(right_key) And tk_msecs-plyr\movetime > 200
		plyr\x=plyr\x+1
		plyr\movetime=tk_msecs
	End If
	
	If KeyHit(s_key) Then screenshot()
	If KeyHit(c_key) Then console=-console ;toggle the console
End Function

Function drawlevel()
	;if the image will be on or near the screen then draw it.  Otherwise skip it to save time.  
	For back.bkgd = Each bkgd
		If Abs(back\x-viewx) < 22 And Abs(back\y-viewy) < 22 Then DrawImage(bgimgs(back\img,0),(back\x-viewx)*24,(back\y-viewy)*24)
	Next
End Function

Function drawplyr()
	viewx=plyr\x-10
	viewy=plyr\y-10
	DrawImage(plyrimg,(plyr\x-viewx)*24,(plyr\y-viewy)*24)
End Function

Function loadlevel(levelname$)
	Local lvlin=ReadFile(lvldir+levelname$);load the level map
	Local curx,cury
	Local sizex=ReadInt(lvlin) ;see how many peices the level has horizontally and vertically
	Local sizey=ReadInt(lvlin)
	Local ver=ReadInt(lvlin) ;in case I add new information to the level
	
	;clear all previous backgrounds.  
	For back.bkgd = Each bkgd
		Delete back.bkgd
	Next
	
	;this is the meat of loading the level.  
	For cury=1 To sizey
		For curx=1 To sizey
			back.bkgd = New bkgd
				back\x=curx
				back\y=cury
				back\img = ReadInt(lvlin)
		Next
	Next
End Function

Function screenshot()
	SaveBuffer(FrontBuffer(),scrnshtdir$ + CurrentDate$() + " " + Right$(Str$(MilliSecs()),5) + ".bmp")
End Function

Function centertext(in$,x_move=0,y_move=0) ;a very useful text centering function
	Local gw = GraphicsWidth()
	Local gh = GraphicsHeight()
	Text((gw / 2) - (StringWidth(in$) / 2)+x_move,gh / 2-StringHeight(in)-y_move,in$)
End Function

Function direrror(dir_loc$)
	Cls
		SetFont(errorfont)
		centertext("Folder ",0,15)
		centertext(dir_loc)
		centertext("Cannot Be Created!",0,-15)
	Flip
	FlushEvents()
	WaitKey()
	End
End Function

Function drawhud()
	If console = 1
		Text 0,0, plyr\x + "," + plyr\y
	End If
End Function

A 2d map is like a 2d array.

If your map has -say- max 256 tiles it can use then each tile has a unique number, 0..255.

So what you store in the 2d array are these numbers.

If your map is bigger than what can be seen on screen (like RPG's or Gradius-style shooters) then you need offsetx and offsety variables.
The other set of variables you need is mapx and mapy (or camerax and cameray etc.). To show a piece of the map:

dim map(159,159)
for y=0 to displayheight-1
  for x=0 to displaywidth-1
    tile=map(mapx+offsetx+x,mapy+ofsety+y)
    ; now you know which tile to show, and you could show it like this:
    DrawImage mapgfx,x*tilewidth,y*tileheight,tile ; assumingly you loaded such a gfx file as animimage, so each tile has its own number
  next
next

Yikes. Well what about games like Metal Slug and Street Fighter? One big tileimage?

If there are structural repetitions in the image, an image that's also large than a screen, one can assume it's tiled. For stills behind sprites (a big planet behind space invaders), one could put a normal picture there.

If you are trying to get your head round 'stuff' (it sounds like you are). Look at the samples and sample games and programs that came with b+

they help with seeing what can be done, and many of the basic skills you need to progress. The time you spend wont be wasted.:D

How other games were done is in some respects irrelavent, there is often more than one way to reach a gaol.

Go with what you prefer, experience will give you an idea of whats more efficient - to program - to draw - or in system resources.

I don't have blitzplus. I have blitz3d. I only post here for 2D advice since there are much more 2D threads than there are in the 3D section.

I would like to start off with the basic 2D style that Metal Slug uses. Do I just load 1 big animated image, or do I load seperate big images?

If your gametiles are all equal in size (16x16 32x32 etc.), use animimage.. keeps things much more managable after all. You could also consider multiple layers where each layer has its own tilesize.

I totally overlooked animimage when making a tile based platformer, I loaded in one giant image and grabbed the images I needed into an array of images.

Well I prefer drawimagerect with a big image actually, too bad it's broken in bmax. Advantage is that you don't need to know the tilesize in advance then..

To answer the question you asked, yes you do use many images rather than one big one.