Noob: Lost in side scrolling

Monkey Forums/Monkey Beginners/Noob: Lost in side scrolling

GreGorGy

(Posted 2014) [#1]

Hello Gaming peoples.

I have been saddled with the task of coding a side-scroller. My daughter has an art project which she wants to take the form of a side scroller. So I found Monkey and it looks decent. But I am lost on where to even start. Are there any good tutorials for what I want to do? I see a collection of YouTube stuff but unfortunately, in South Africa, bandwidth is expensive and going through those could cost an arm and a leg.

Any pointers would be appreciated.

Goodlookinguy

(Posted 2014) [#2]

What level are you programming wise (beginner, novice, experienced, etc.)?
What experience do you have with game making?
Do you have a time constraint (and how much time if yes)?

I read what you wrote and without knowing those we couldn't begin to point you anywhere.

erebel55

(Posted 2014) [#3]

I would point you to diddy, as I know therevills has started some tutorials around it and it can quicken the process if you are a noob
http://www.monkey-x.com/Community/posts.php?topic=8405

Goodlookinguy

(Posted 2014) [#4]

I doubt dropping a module on top of mojo right away is a good idea. Sticking to the basics is best to start.

GreGorGy

(Posted 2014) [#5]

Thank you for your responses

I am experienced in programming (Xojo - was RealBasic) but I have zero experience in games. I do have a time constraint - we're looking at the end of June basically.

I saw the Diddy tutorial but the first lines...

Import diddy

had me wondering what diddy was and where to import it from.

Goodlookinguy

(Posted 2014) [#6]

I have zero experience in games

we're looking at the end of June basically

That doesn't give much time at all and a side scroller is not an easy task. You might be better off trying a GUI game making system like Construct, GameMaker, or Multimedia Fusion. Not to insult the power of Monkey, but you need more time. Game making itself is an incredibly hard task, let alone learning Monkey's language, kinks, and limitations. Then to pack something like diddy, fantom, or even my XAddon module on top is a very long process.

I'm not saying you shouldn't learn Monkey later, but no experience in game making and a time constraint will likely not bode well for you.

Gerry Quinn

(Posted 2014) [#7]

Indeed, game makers tend to come with built-in side scrollers etc. because built-in standard patterns are what they do.

That said, one way to think of a side-scroller is a long map, in which on every update you simply draw the section centred around your ship//runner/whatever. So it's not really that complicated, unless you yourself want to be fancy...

Goodlookinguy

(Posted 2014) [#8]

Just a bare basics overview of a platformer...

- Tile maps
- Collision and Response
- Camera
- Jumping & Grounding

There's nothing particularly simple about these. If you have no experience with making games, doing this will not be a walk in the park. You and I might be able to do it because we've done so much other stuff, but for someone who has never done this, it's very difficult. I can attest to it having never made a game only a few years ago, even though I had years of programming experience.

therevills

(Posted 2014) [#9]

Diddy has a 2D side scrolling platform game demo in the examples:
https://code.google.com/p/diddy/source/browse/#hg%2Fexamples%2FPlatformer

Or if you didnt want to use a framework here is some stand alone code:

Strict
Import mojo

Global SCREEN_WIDTH:Int
Global SCREEN_HEIGHT:Int

Const WIDTH:Float = 320
Const HEIGHT:Float = 240

Global game:MyGame

Function Main:Int()
	game = New MyGame()
	Return 0
End

Class MyGame Extends App
	Field player:Player
	Field bomb:Bomb
	Field scrollX:Float, scrollY:Float
	Field level:Level
	
	Method OnCreate:Int()
		SCREEN_WIDTH = DeviceWidth()
		SCREEN_HEIGHT = DeviceHeight()
		
		level = New Level()
		level.Load()

		player = New Player(level.playerX, level.playerY)
		bomb = New Bomb(level.bombX, level.bombY)
		SetUpdateRate(60)
		Return 0
	End
	
	Method OnUpdate:Int()
		player.Update()
		Return 0
	End
	
	Method OnRender:Int()
		Cls 
		PushMatrix 
		Scale(SCREEN_WIDTH/WIDTH, SCREEN_HEIGHT/HEIGHT)
		level.Draw()
		player.Draw(game.scrollX, game.scrollY)
		bomb.Draw(game.scrollX, game.scrollY)		
		PopMatrix
		Return 0
	End
End

Class Sprite
	Field image:Image
	Field x:Float, y:Float
	Field createImages:Bool
	Field pixels:Int[]
End

Class Bomb Extends Sprite
	Method New(sx:Int, sy:Int)
		image = CreateImage(60, 60)
		pixels = New Int[image.Width() * image.Height()]
		createImages = True
		x = sx
		y = sy
	End
	
	Method Draw:Void(offsetX:Float = 0, offsetY:Float = 0)
		CreateImages()
		DrawImage(image, x - offsetX, y - offsetY)
	End
	
	Method CreateImages:Void()
		If Not createImages Return
		createImages = False
		Cls(0, 0, 0)

		SetColor(100, 100, 0)
		DrawOval(0, 0, 30, 30)
		
		ReadPixels(pixels, 0, 0, image.Width(), image.Height())
		
		' convert the mask colour (black) to alpha
		For Local i:Int=0 Until image.Width() * image.Height()
			Local argb:Int = pixels[i]
			Local a:Int = (argb Shr 24) & $ff
			Local r:Int = (argb Shr 16) & $ff
			Local g:Int = (argb Shr 8) & $ff
			Local b:Int = argb & $ff

			If a = 255 And r = 0 And g = 0 And b = 0 Then
				a = 0
				argb = (a Shl 24) | (r Shl 16) | (g Shl 8) | b
				pixels[i] = argb
			End
		Next
		
		image.WritePixels(pixels, 0, 0, image.Width(), image.Height())

		image.SetHandle(image.Width() / 2, image.Height() / 2)

		SetColor(255, 255, 255)
		Cls(0, 0, 0)
	End
End
	
Class Player Extends Sprite
	Field border:Int = 50	
	
	Method New(sx:Int, sy:Int)
		image = CreateImage(60, 80)
		pixels = New Int[image.Width() * image.Height()]
		createImages = True
		x = sx
		y = sy
	End

	Method Update:Void()
		If KeyDown(KEY_LEFT)
			x -= 5
		End
		If KeyDown(KEY_RIGHT)
			x += 5
		End

		If x < 0 Then x = 0
		If x > WIDTH + game.scrollX Then x = WIDTH + game.scrollX
		If x - game.scrollX < border Then game.level.ScrollHorizontal((x - game.scrollX) - border)
		If x - game.scrollX > WIDTH - border Then game.level.ScrollHorizontal((x - game.scrollX) - (WIDTH - border))
	End
	
	Method Draw:Void(offsetX:Float = 0, offsetY:Float = 0)
		CreateImages()
		DrawImage(image, x - offsetX, y - offsetY)
	End
	
	Method CreateImages:Void()
		If Not createImages Return
		createImages = False
		Cls(0, 0, 0)

		SetColor(255, 255, 0)
		DrawRect(15,0,10,10)
		DrawRect(15,10,5,5)
		
		SetColor(255, 0, 0)		
		DrawRect(10,15,15,5)
		DrawRect(5,20,5,5)
		DrawRect(15,20,5,5)
		DrawRect(25,20,5,5)

		SetColor(100, 150, 255)
		DrawRect(15,25,5,5)
		DrawRect(10,30,5,5)
		DrawRect(5,35,5,5)
		DrawRect(20,30,5,5)
		DrawRect(25,35,5,5)
		
		ReadPixels(pixels, 0, 0, image.Width(), image.Height())
		
		' convert the mask colour (black) to alpha
		For Local i:Int=0 Until image.Width() * image.Height()
			Local argb:Int = pixels[i]
			Local a:Int = (argb Shr 24) & $ff
			Local r:Int = (argb Shr 16) & $ff
			Local g:Int = (argb Shr 8) & $ff
			Local b:Int = argb & $ff

			If a = 255 And r = 0 And g = 0 And b = 0 Then
				a = 0
				argb = (a Shl 24) | (r Shl 16) | (g Shl 8) | b
				pixels[i] = argb
			End
		Next
		
		image.WritePixels(pixels, 0, 0, image.Width(), image.Height())

		image.SetHandle(image.Width() / 2, image.Height() / 2)

		SetColor(255, 255, 255)
		Cls(0, 0, 0)
	End
End

Class Level
	Const TILE_SIZE:Int = 16
	Const GRAVITY:Float = 0.18
	
	Field map:Tile[][]
	Field width:Int, height:Int
	Field pixelWidth:Int = 0
	Field pixelHeight:Int = 0
	
	Field playerX:Int, playerY:Int
	Field bombX:Int, bombY:Int
		
	' 32 across
	Global level1:=[
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,120,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,124,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,124,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,124,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,124,0,0,0,16,124,16,124,16,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
		116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,116,
		115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,115,
		0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

	Method Load:Void()
		width = 32
		height = 16
		
		pixelWidth = width * TILE_SIZE
		pixelHeight = height * TILE_SIZE
		
		map = TileArray(width, height)
		
		For Local x:Int = 0 To width - 1
			For Local y:Int = 0 To height - 1
				map[x][y] = New Tile((level1 [ x + y * width ] ))
			Next
		Next
		
		playerX = 110
		playerY = 170
		bombX = 400
		bombY = 170
	End Method
	
	Method Draw:Void()
		For Local x% = 0 To width - 1
			For Local y% = 0 To height - 1
				If map[x][y].frame > 0
					SetColor map[x][y].red, map[x][y].green, map[x][y].blue
					DrawRect Int(x * TILE_SIZE - game.scrollX), Int(y * TILE_SIZE - game.scrollY), TILE_SIZE, TILE_SIZE
				endif
			Next
		Next
		SetColor 255, 255, 255
	End Method
	
	Method ScrollHorizontal:Void(change#)
		game.scrollX += change

		If game.scrollX <0 Then
			game.scrollX = 0
		Else
			Local maxX% = pixelWidth - WIDTH
			If game.scrollX > maxX Then game.scrollX = maxX
		EndIf
	End Method
	
	Method GetCollisionTile:Int(x:Float, y:Float)
		If x < 0 Or x >= pixelWidth Or y < 0 Or y >= pixelHeight Then Return 0
		
		local xx% = (Floor(x / TILE_SIZE)) 
		local yy% = (Floor(y / TILE_SIZE))
		
		Return map[xx][yy].frame
	End Method
End Class

Function TileArray:Tile[][](xSize:Int, ySize:Int)
	Local map:Tile[xSize][]
	For Local x:Int=0 Until xSize
	   map[x]=New Tile[ySize]
	Next
	Return map
End Function

Class Tile
	Field frame:Int
	Field red:Int, green:Int, blue:Int
	
	Method New(frame:Int=0)
		self.frame = frame
		red = 255 - frame
		green = 255 - frame
		blue = 255 - frame
	End
End

http://www.therevillsgames.com/monkey/scrolling/MonkeyGame.html

But I do agree with GLG, learn to walk before you run. Start with the classic gaming styles: Breakout, Asteroids, Space Invaders, PacMan, Tetris and then Super Mario.

Sensei

(Posted 2014) [#10]

Slightly off-topic, but I just wanted to say WOW @therevills.
Now THAT's an example that should be included in Monkey documentation. A basic side scrolling example. All it needs is a bit of in-line documentation! Something like this would go a LONG way to helping beginners with Monkey-X.
Awesome!

therevills

(Posted 2014) [#11]

I am planning more tutorials for Diddy, since it comes with a TileD importer, but I could do one in pure MonkeyX...

Lindsay

(Posted 2014) [#12]

What Sensei said!! Looking forward to pulling this code apart :) Thanks!