Mojo: Moving view, but keeping objects fixed?

Monkey Forums/Monkey Programming/Mojo: Moving view, but keeping objects fixed?

DeltaWolf7

(Posted 2013) [#1]

Hi,

I have up and running a world based on the mojo example for the tileset.
The guy moves around and the world stays still..
So I went and added another item (bomb) to the world and it spawned where it should, now my problem is that the spawn point is based on the location on screen and when the player moves the screen over, the bomb move over, retaining its position.

How would one go about working out its location relative to where it spawned, rather than the screen? In others words, how can I get objects to stay, even when the screen is moved?

Ideas appreciated,

Craig

ElectricBoogaloo

(Posted 2013) [#2]

You need to scroll your objects based on the current scrolling offset.

Where you DrawImage() your object, offset it's X and Y co-ordinates the same amount as you're offsetting the tilemap.

Paul - Taiphoz

(Posted 2013) [#3]

hope this helps.. I find a visual explanation is often easier to grasp if your having trouble with it.

ElectricBoogaloo

(Posted 2013) [#4]

Platdude Error. Redo from Start.
Your Platdude has a short neck.
-=-=-
Upon closer inspection, that's an optical illusion caused by his oversized hands..

Paul - Taiphoz

(Posted 2013) [#5]

lol, I could never draw him as well as you :)

DeltaWolf7

(Posted 2013) [#6]

Hi,

Thanks for the ideas. I kind on understand what I should do, just not getting it working.
I managed to get them to partly stay, but they get offset more and more and the render repeats.

Using the example here which uses the same method I am, how would you add in the function?

http://www.monkeycoder.co.nz/Community/posts.php?topic=5078

I have added my test in to the Draw of the level class. The last test I did was like this.

For Local entity:Entity = Eachin Entities
	If entity
		entity.Draw(xPos + TileHeight, yPos + TileWidth)
	Endif
Next

Not even sure if this is the right way to do really.

Paul - Taiphoz

(Posted 2013) [#7]

Would be easier if we could see your whole code, but from the looks of it your not drawing or adding the offset for x or y, I assume tileHeight is static ?

DeltaWolf7

(Posted 2013) [#8]

Hi,

I will upload it tonight for you to look at. Its all a learning curve for me, so maybe others will find it helpful to have the source.

Will be home about six GMT.

SLotman

(Posted 2013) [#9]

You should store everything in map/world coordinates. Forget about the screen!

For ex: your map is 20 tiles of 64x64 - so your map has a width of 1280px. Place your objects in the interval [0...1279].

When rendering, get player position (also inside the map/world), and draw everything near the player (for example, draw everything from player-50px to player+750px)

The image drawn by Taiphoz shows exactly that :)

therevills

(Posted 2013) [#10]

Sorry couldn't help myself, heres a quick example:

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

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

Xaron

(Posted 2013) [#11]

Hey therevills, he can't jump! ;)

therevills

(Posted 2013) [#12]

LOL! I know... I was only showing the scrolling part...

I didn't want to add collisions etc. to confuse the issue.

ElectricBoogaloo

(Posted 2013) [#13]

*sigh*

...Spheres should be blue, floors are red.. <Alan Partridge>Stop Getting Platdude Wrong!!</Alan Partridge>

Xaron

(Posted 2013) [#14]

Haha, nice one!

DeltaWolf7

(Posted 2013) [#15]

Not home yet, but saw the email about this post.
Should mention, that its a top down game I'm going for, don't know if this matters much. Like the old rockfall or boulder dash, etc.

Paul - Taiphoz

(Posted 2013) [#16]

oh therevills you have incurred the wrath of the platdude god lol :)

James your just jealous that mine and therevills are better than yours :P

ElectricBoogaloo

(Posted 2013) [#17]

I seriously wish I could get touchscreen controls working with JNKPlat mechanics. Sucks that I can't.. ...and trust me, I've been trying!!!

DeltaWolf, just be sure to keep track of a single set of ScrollX and ScrollY variables, and use that to offset all your drawing functions.. (Except the GUI, and stuff!)

DeltaWolf7

(Posted 2013) [#18]

Looking like good stuff. Thank you very much for all the info. I haven't cracked it yet, but as promised..

http://code.google.com/p/deltas-monkey-games/source/browse/#svn%2Ftrunk

All my learning monsters are uploading to here. The one referred to in this discussion is the rockfall evolution game.
Please have look and tell me how bad I did.. The basic idea comes from things I found on the forum and a video on YouTube.

Please mention anything, that I might be doing wrong, that way I can learn.

Word of warning, during my learning, I have been commenting.. (NOTHING)..

Good luck ;-p

therevills

(Posted 2013) [#19]

<Alan Partridge>Stop Getting Platdude Wrong!!</Alan Partridge>

You know its a "thing" now dont you, Jay! We all must now draw Platdude wrong ;)

Please mention anything, that I might be doing wrong, that way I can learn.

For your Rockfall Evolution project I see that every time you call New on a gold object you will be reloading the image... this "okay" if you only every have one object, but if you are going to have multiple you will keep loading the image again and again.

Your code:

Method New()
   Picture = LoadImage("gold.png", 32, 32, 1)
End

Suggested:

Method CreateGold:Void()
   Local img:Image = LoadImage("gold.png", 32, 32, 1)
   For Local i:Int = 0 To 10
      New Gold(img)
   Next
End
...
Class Gold Extends Entity
  Method New(image:Image)
    Picture = image
  End
End

DeltaWolf7

(Posted 2013) [#20]

You make a very good point. Thank you for pointing this out.

ziggy

(Posted 2013) [#21]

Have you considered translating the transformation matrix as it was a camera? That could do it too