On Easy Math Challenge development

October 30, 2018 Markus

I’d like to tell, why and what kind of bugs there were in my Android game Easy Math Challenge in its early versions.

The smallest bug was that there was “difficulty level 0”. If the user tapped somewhere else than the difficulty level buttons, the game gave “puzzles” like “3 = 3”. Well, those “puzzles” were always correct. This was fixed later.

The more annoying bug was, that in early versions the puzzles sometimes might be impossible.

The reason for that was, that I’ve used numbers also for the operations of puzzles. If for example + (plus) was 45, while calculating the result, the result got wrong so that 45 was part of the calculation numbers, not an operation. This was fixed later.

Video of the version 1.7.2 (no known bugs):

I wrote the program from scratch without any planning and often the usual mistake of mine: Work was done too at too late of hours.

If you still find some bugs, please let me know.

Recently published to Android: Calculus

August 3, 2018August 3, 2018 Markus

I published recently initial version 1.0 of a calculus program called Calculus to Android. I have plans to publish PC version too, when the program is developed further.

The program differentiates and integrates user given polynomial and simplifies all the fractions. The coefficients can be 4 digits long. I haven’t given a limit to amount of terms in the polynomial, the available memory is the only limit.

The coefficients can be fractional too — and of course negative or positive. Next version will be out soon, which will improve some features of the program and add some features too. I’m not aware of any actual bugs in the program at the moment.

See below a demonstration video of the program (in the video Calculus is compiled to PC and used with the mouse):

Calculus is free educational program.

Notice that when integrating the polynomial, Calculus doesn’t give the integral constant.

Memorable Melodies v1.3 available

June 28, 2018July 11, 2018 Markus

Memorable Melodies v1.3 is written in Monkey2 programming language. Now it is tested to be working properly on newer Android devices!

Remember there is a cheat in the game: Tap at the upper right corner of the screen and all the mistakes are cleared.

In the code now MusicState() isn’t tested at all, instead the duration of the played music.

Do try it! 🙂 It’s free witout adds.

My First Android Game Published on Google Play

February 14, 2018March 8, 2018 Markus

This game project started in the year 2015. A long time passed I’m doing nothing for the game, but finally its ready and published!

The project started with Monkey X, but I finished it with Cerberus X and compiled it to Android. I have not — at least not yet — plans for a free PC version.

Before publishing I ran the tests that Google offers for the app. My app passed with zero crashes. 🙂

You might want to take a look at the game played with PC in the video above.

Like I wrote in “Shorty about computer playing history” post, if I’m ever to create a game, it would always have an ending and so does this game have.

The game is free (no ads) you might want to try it with your Android device, search for “Memorable Melodies” on Google Play. Or get here:

I hope you like it!

I Haven’t Followed the Time

September 1, 2017March 8, 2018 Markus

I’m living in the past too much, such speaking. This reminds me what Yoda said to Luke Skywalker in episode V: ”Always he has looked into the horizon, never where he was, what he was doing!”. Or something like that.

I started 2015 an Android game project, I haven’t touched for a long time. Much have changed since I started that project. The pro version of Monkey X saw many updated versions with mojo2-module while I was using old mojo-module in my project.

Later I updated the code for mojo2, but how fast the time flies: Monkey X has gone completely open source and I don’t even know when that happened… Today I installed latest open source version of Monkey X from Blitz Research.

But since I seem to live in the past, I’m going to find time to finish my Android game with old Monkey X (with mojo2).

What’s well.. ”special” in this game is, that all the musics will be composed by me. Though, I haven’t been making so called tracker music ”seriously” (if ever) for a long time… Though, for testing this game project I will be working again, I already have made four short tracker music compositions last year – and one short piece of music made with PC’s ProTrekkr.

Though, to pity for the potential players of this game, I probably must compose new tunes… 🙂

When finished, the game will be free.

Bouncing of the ball when it touches the Bat (80s Krakout style)

March 17, 2017March 12, 2018 Markus

It’s night when I’m writing this. I came up with a little Monkey X tutorial on how to program the bouncing of the ball, when it touches the bat in the “old school way” — like in the popular C64 game Krakout in the 80s.

In the video for the tutorial you can see, that as the ball touches the bat for the first time, delta y doesn’t change. This is because both the ball and the bat are uneven as height in pixels; now both the ball and the bat have a middle point.

This is just a short piece of code, that doesn’t handle the case, when the ball is at the horizontal top or bottom of the bat. There’s some extra work for anyone who wants to make an 80s style Krakout game. 🙂

The delta y for the ball is calculated simply how the ball’s y-position is related to the middle point to the bat. The “scale” variable is used to adjust the max y-speed of the ball.

Source code below:

Import mojo

Function Main()
	New MyApp
End

Class MyApp Extends App

	Field gfxBG:Image, gfxBat:Image, gfxBall:Image
	Field scaleX:Float, scaleY:Float
	Field touchX:Float, touchY:Float
	Field prevTX:Float, prevTY:Float
	Field batY:Float
	Field ballX:Float, ballY:Float
	Field ballDX:Float, ballDY:Float
	Field scale:Float
	
	Method OnCreate()
		' Load graphics
		gfxBG = LoadImage("bg2.png")
		gfxBat = LoadImage("bat3.png")
		gfxBall = LoadImage("ball4.png")

		SetDeviceWindow(640,480,0)
		scaleX = DeviceWidth() / 640.0
		scaleY = DeviceHeight() / 480.0
		
		ballX = 42
		batY = 230
		ballY = 230 + 36 - 8

		ballDX = 2
		ballDY = 0
		
		prevTY = 0
		touchY = 0
		touchX = 0
		touchY = 0
		
		scale = 16
	End
	
	Method OnUpdate()

		' The if-sentence prevents the bat to appear at bottom of the screen at the start..
		If prevTY <> 0 Then batY = batY - (prevTY - touchY)

		prevTY = touchY
		
		touchY = TouchY()
		
		touchY = touchY / scaleY
		
		' Keep the bat in the borders of the screen
		If batY < 0 Then batY = 0
		If batY > 479 - 72 Then batY = 479 - 72
		
		' Move the ball
		ballX = ballX + ballDX
		ballY = ballY + ballDY

		' Keep the ball in the borders of the screen
		If ballY < Abs(ballDY) Then ballDY = -ballDY
		If ballY > 479 - 17 Then ballDY = -ballDY
		If ballX < -Abs(ballDX) Then ballDX = -ballDX
		If ballX > 639 - Abs(ballDX) - 16 Then ballDX = -ballDX
		
		' Calculate the deltaY value for the ball in the "old school way"...
		If ballX >= 601 - 16 And ballY + 16 > batY And ballY < batY + 72 Then
			ballDY = -((batY + 36) - (ballY + 8)) / scale		
			ballDX = -ballDX
		Endif
			
	End

	Method OnRender()
		PushMatrix()
		Scale(scaleX,scaleY)
		
		DrawImage gfxBG,0,0

		DrawImage gfxBall, ballX, ballY
		DrawImage gfxBat, 601, batY
		
		PopMatrix()
	End
	
End Class

Import mojo

Function Main()

New MyApp

End

Class MyApp Extends App

Field gfxBG:Image, gfxBat:Image, gfxBall:Image

Field scaleX:Float, scaleY:Float

Field touchX:Float, touchY:Float

Field prevTX:Float, prevTY:Float

Field batY:Float

Field ballX:Float, ballY:Float

Field ballDX:Float, ballDY:Float

Field scale:Float

Method OnCreate()

' Load graphics

gfxBG = LoadImage("bg2.png")

gfxBat = LoadImage("bat3.png")

gfxBall = LoadImage("ball4.png")

SetDeviceWindow(640,480,0)

scaleX = DeviceWidth() / 640.0

scaleY = DeviceHeight() / 480.0

ballX = 42

batY = 230

ballY = 230 + 36 - 8

ballDX = 2

ballDY = 0

prevTY = 0

touchY = 0

touchX = 0

touchY = 0

scale = 16

End

Method OnUpdate()

' The if-sentence prevents the bat to appear at bottom of the screen at the start..

If prevTY <> 0 Then batY = batY - (prevTY - touchY)

prevTY = touchY

touchY = TouchY()

touchY = touchY / scaleY

' Keep the bat in the borders of the screen

If batY < 0 Then batY = 0

If batY > 479 - 72 Then batY = 479 - 72

' Move the ball

ballX = ballX + ballDX

ballY = ballY + ballDY

' Keep the ball in the borders of the screen

If ballY < Abs(ballDY) Then ballDY = -ballDY

If ballY > 479 - 17 Then ballDY = -ballDY

If ballX < -Abs(ballDX) Then ballDX = -ballDX

If ballX > 639 - Abs(ballDX) - 16 Then ballDX = -ballDX

' Calculate the deltaY value for the ball in the "old school way"...

If ballX >= 601 - 16 And ballY + 16 > batY And ballY < batY + 72 Then

ballDY = -((batY + 36) - (ballY + 8)) / scale

ballDX = -ballDX

Endif

End

Method OnRender()

PushMatrix()

Scale(scaleX,scaleY)

DrawImage gfxBG,0,0

DrawImage gfxBall, ballX, ballY

DrawImage gfxBat, 601, batY

PopMatrix()

End

End Class

Feel free to use and improve the source above in your own projects.

Here’s the graphics to download (license: public domain), except the background picture (right click and save as…):

The bat is 32 x 73 pixels as size, the ball is 16 x 17 pixels.

For comparing to the C64’s popular Krakout, see the video below:

Link: Monkey X (from itch.io), it’s free.

Many years ago I started to program Krakout style game in the spirit of the good old Commodore 64, but as usual, something went wrong. Three months work with multiple levels and a level editor programmed in Blitz3D were lost because I hadn’t taken backups of the files, when I, well, “fixed” the Windows installation I had at the time…

Scrolling a Picture Larger Than Visible Area in Monkey X

October 12, 2016March 8, 2018 Markus

A little tutorial on scrolling a picture that is larger than the visible area of the screen in Monkey X.

In this example we will be using a picture of 1280 x 960 pixels in “native” resolution of 640 x 480 pixels. The source is primarily meant to Android target but works for example to desktop target too.

The picture is scrolled by moving a finger on the Android device. In order to avoid the picture to “jump” after not scrolling the picture, variables related to scrolling speed must be set to zero.

Lets have a look at the source code:

Import mojo

Function Main()
	New MyApp
End

Class MyApp Extends App

	Field bg:Image
	Global touchX,touchY:Float
	Global prevTX,prevTY:Float
	Global scaleX,scaleY:Float
	Global scrollX,scrollY:Float
	Global touchXD,touchYD:Float
	Global scroll:Bool
	
	Method OnCreate()
		' Change this to picture, you want to use
		bg = LoadImage("bg1280x960.png")

		SetDeviceWindow(640,480,0)
		scaleX = DeviceWidth() / 640.0
		scaleY = DeviceHeight() / 480.0
		
	End
	
	Method OnUpdate()

		touchX = TouchX()
		touchY = TouchY()
		
		touchX = touchX / scaleX
		touchY = touchY / scaleY
										
		If TouchDown(0) > 0 Then
			If scroll = True Then
		
				' touchXD & touchYD variables prevent the picture
				' to "jump", if scrolling is stopped and user then
				' touches somewhere on the screen

				touchXD = touchX
				touchYD = touchY
			Else
				' if not scrolling, values below are set to zero,
				' because when the scrolling starts again, otherwise
				' scrollX & scrollY could change too much because of
				' values of previous scrolling
				
				touchXD = 0
				touchYD = 0
				prevTX = 0
				prevTY = 0
			Endif
			
			scroll = True
			
			scrollX = scrollX - (touchXD - prevTX)
			scrollY = scrollY - (touchYD - prevTY)
		
			prevTX = touchX
			prevTY = touchY
		Else
			scroll = False
		Endif

	End

	Method OnRender()
		PushMatrix()
		Scale(scaleX,scaleY)
				
		If scrollX > 0 Then scrollX = 0
		If scrollX < -(1280 - 640) + 1 Then scrollX = -(1280 - 640) + 1
		If scrollY > 0 Then scrollY = 0
		If scrollY < -(960 - 480) + 1 Then scrollY = -(960 - 480) + 1
		
		DrawImage bg,scrollX,scrollY
		PopMatrix()
	End
	
End Class

Import mojo

Function Main()

New MyApp

End

Class MyApp Extends App

Field bg:Image

Global touchX,touchY:Float

Global prevTX,prevTY:Float

Global scaleX,scaleY:Float

Global scrollX,scrollY:Float

Global touchXD,touchYD:Float

Global scroll:Bool

Method OnCreate()

' Change this to picture, you want to use

bg = LoadImage("bg1280x960.png")

SetDeviceWindow(640,480,0)

scaleX = DeviceWidth() / 640.0

scaleY = DeviceHeight() / 480.0

End

Method OnUpdate()

touchX = TouchX()

touchY = TouchY()

touchX = touchX / scaleX

touchY = touchY / scaleY

If TouchDown(0) > 0 Then

If scroll = True Then

' touchXD & touchYD variables prevent the picture

' to "jump", if scrolling is stopped and user then

' touches somewhere on the screen

touchXD = touchX

touchYD = touchY

Else

' if not scrolling, values below are set to zero,

' because when the scrolling starts again, otherwise

' scrollX & scrollY could change too much because of

' values of previous scrolling

touchXD = 0

touchYD = 0

prevTX = 0

prevTY = 0

Endif

scroll = True

scrollX = scrollX - (touchXD - prevTX)

scrollY = scrollY - (touchYD - prevTY)

prevTX = touchX

prevTY = touchY

Else

scroll = False

Endif

End

Method OnRender()

PushMatrix()

Scale(scaleX,scaleY)

If scrollX > 0 Then scrollX = 0

If scrollX < -(1280 - 640) + 1 Then scrollX = -(1280 - 640) + 1

If scrollY > 0 Then scrollY = 0

If scrollY < -(960 - 480) + 1 Then scrollY = -(960 - 480) + 1

DrawImage bg,scrollX,scrollY

PopMatrix()

End

End Class

Examine the source code and learn. Source code license: Public Domain.

Below is a video related to this post:

Missile Attack in Monkey X

June 12, 2016April 16, 2018 Markus

Again, some nostalgia. In older blog post I presented a shortened version of my old implementation of Amiga’s “Missile Attack”. This night I made the game in Monkey X and the source can be directly compiled to Android target.

The game is quite simple one: Just shoot the missiles before they get to the bottom of the screen.

If a missile goes to the left or right side of the screen, you see the colors of the background changing — and also when you fire a shot. This gives the game more life. 🙂

Below is the source code:

Import mojo2

Function Main()
	New MyApp
End

Class Missile
	Field x:Float		' x-coordinate of a missile
	Field y:Float		' y-coordinate of a missile
	Field startx:Float
	Field addx:Float
	' the color of the missile
	Field red:Float
	Field green:Float
	Field blue:Float
End Class

Class MyApp Extends App

	Field bg:Image
	Global canvas:Canvas
	Global nrOfMissiles:Int
	Global mx:Float, my:Float
	Global shot:Bool
	Global gameOver:Bool = False	
	Global px:Float, py:Float, pr:Float
	Global scalex:Float, scaley:Float
	
	Global missileList := New List<Missile>	' build a missile list
	
	Method OnCreate()
		SetDeviceWindow(640,480,0)
		canvas = New Canvas
		shot = False
		nrOfMissiles = 0
		bg = Image.Load("bg.png",0,0)
		scalex = DeviceWidth() / 640.0
		scaley = DeviceHeight() / 480.0
		SetUpdateRate(60)
	End
	
	Method OnUpdate()

		If gameOver = False Then
			
			If nrOfMissiles < 8 Then
			
				Local mssl:Missile = New Missile
				mssl.x = Rnd(100,539)
				mssl.startx = mssl.x
				mssl.y = 0
				mssl.addx = Rnd(-2,2)
				mssl.red = Rnd(0.2,1)
				mssl.green = Rnd(0.2,1)
				mssl.blue = Rnd(0.2,1)
				missileList.AddLast(mssl)
			
				nrOfMissiles = nrOfMissiles + 1
			Endif

			If TouchHit(0) > 0 Then
				mx = TouchX() / scalex
				my = TouchY() / scaley
				pr = 4
				px = mx
				py = my
				shot = True
			Endif
		
		Endif
		
	End

	Method OnRender()

		canvas.PushMatrix()
		canvas.Scale(scalex, scaley)
		
		canvas.DrawImage bg,0,0
		
		If gameOver = False Then
			
			If nrOfMissiles > 0 Then
								
				For Local mssl:Missile = Eachin missileList
				
					If mssl <> Null Then
						canvas.SetColor mssl.red,mssl.green,mssl.blue	
						canvas.DrawLine(mssl.startx,0,mssl.x,mssl.y)
						mssl.y = mssl.y + 1
				
						If mssl.y >= 479 Then gameOver = True
						
						mssl.x = mssl.x + mssl.addx
					
						If mssl.x < 0 Or mssl.x > 639 Then
							missileList.Remove(mssl)
							nrOfMissiles = nrOfMissiles - 1
						Endif
					
					Endif
				Next
			Endif
		
			If shot = True Then
				canvas.SetColor 0,0,1
				canvas.DrawCircle(px,py,pr)
			Endif

			If shot = True And pr < 50 Then pr = pr + 1 Else shot = False
			
			For Local mssl:Missile = Eachin missileList
				Local removeMissile:Bool = False
				
				If mssl <> Null And shot = True Then
				
					' Mathematical way to determine if player's shot has hit the missile...
					For Local angle:Int = 0 To 360
						If Abs((px + Cos(angle) * pr) - mssl.x) <= 1 And Abs((py + Sin(angle) * pr) - mssl.y) <= 1 Then
							removeMissile = True
							score = score + 1
							Exit
						Endif
					Next
					
					If removeMissile = True Then
						missileList.Remove(mssl)
						nrOfMissiles = nrOfMissiles - 1
					Endif
					
				Endif

			Next

		Else
			canvas.SetColor 1,1,1
			canvas.DrawText "Game Over",(640 - 9 * 8) / 2, (480 - 8) / 2
		Endif
		
		canvas.Flush()
		canvas.PopMatrix()	
	End
	
End Class

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

Import mojo2

Function Main()

New MyApp

End

Class Missile

Field x:Float ' x-coordinate of a missile

Field y:Float ' y-coordinate of a missile

Field startx:Float

Field addx:Float

' the color of the missile

Field red:Float

Field green:Float

Field blue:Float

End Class

Class MyApp Extends App

Field bg:Image

Global canvas:Canvas

Global nrOfMissiles:Int

Global mx:Float, my:Float

Global shot:Bool

Global gameOver:Bool = False

Global px:Float, py:Float, pr:Float

Global scalex:Float, scaley:Float

Global missileList := New List<Missile> ' build a missile list

Method OnCreate()

SetDeviceWindow(640,480,0)

canvas = New Canvas

shot = False

nrOfMissiles = 0

bg = Image.Load("bg.png",0,0)

scalex = DeviceWidth() / 640.0

scaley = DeviceHeight() / 480.0

SetUpdateRate(60)

End

Method OnUpdate()

If gameOver = False Then

If nrOfMissiles < 8 Then

Local mssl:Missile = New Missile

mssl.x = Rnd(100,539)

mssl.startx = mssl.x

mssl.y = 0

mssl.addx = Rnd(-2,2)

mssl.red = Rnd(0.2,1)

mssl.green = Rnd(0.2,1)

mssl.blue = Rnd(0.2,1)

missileList.AddLast(mssl)

nrOfMissiles = nrOfMissiles + 1

Endif

If TouchHit(0) > 0 Then

mx = TouchX() / scalex

my = TouchY() / scaley

pr = 4

px = mx

py = my

shot = True

Endif

End

Method OnRender()

canvas.PushMatrix()

canvas.Scale(scalex, scaley)

canvas.DrawImage bg,0,0

If gameOver = False Then

If nrOfMissiles > 0 Then

For Local mssl:Missile = Eachin missileList

If mssl <> Null Then

canvas.SetColor mssl.red,mssl.green,mssl.blue

canvas.DrawLine(mssl.startx,0,mssl.x,mssl.y)

mssl.y = mssl.y + 1

If mssl.y >= 479 Then gameOver = True

mssl.x = mssl.x + mssl.addx

If mssl.x < 0 Or mssl.x > 639 Then

missileList.Remove(mssl)

nrOfMissiles = nrOfMissiles - 1

Endif

If shot = True Then

canvas.SetColor 0,0,1

canvas.DrawCircle(px,py,pr)

Endif

If shot = True And pr < 50 Then pr = pr + 1 Else shot = False

For Local mssl:Missile = Eachin missileList

Local removeMissile:Bool = False

If mssl <> Null And shot = True Then

' Mathematical way to determine if player's shot has hit the missile...

For Local angle:Int = 0 To 360

If Abs((px + Cos(angle) * pr) - mssl.x) <= 1 And Abs((py + Sin(angle) * pr) - mssl.y) <= 1 Then

removeMissile = True

score = score + 1

Exit

Endif

If removeMissile = True Then

missileList.Remove(mssl)

nrOfMissiles = nrOfMissiles - 1

Endif

Else

canvas.SetColor 1,1,1

canvas.DrawText "Game Over",(640 - 9 * 8) / 2, (480 - 8) / 2

Endif

canvas.Flush()

canvas.PopMatrix()

End

End Class

Source code license: GNU General Public License 3.0.

Below is the video of the game on Android tablet and on computer screen:

I may make a better version of the game later on this summer…

How to Make a Worm Game Part 2

April 27, 2016March 8, 2018 Markus

(Updated 03/05/2017 with improved source code and new video)

A little update to older post. As the title of the post says we’re making a worm game (in Monkey X). In this version the worm is controlled by touching the screen keeping in mind that the game is really aimed to Android.

I’ll explain here how the worm is controlled.

If you move your finger ”up” from the worm’s head, the worm goes to that direction and respectively to other directions.

See the video below:

The direction is determined by comparing two subsequent update rounds’ TouchX() and TouchY() coordinates.

The test can’t be straightforward TouchX() or TouchY() test, because the player probably won’t move his/her finger absolutely to one of the four directions the worm is to be controlled.

This is why there is another test in controlling the worm: The absolute values of difference of the two subsequent update round’s TouchX() and TouchY() coordinates. If the player wants to control the worm ”up”, the player probably has moved his/her finger more vertically than horizontally.

See the source code:

Import mojo

Function Main:Int()
	New MyApp
	Return 0
End

Class MyApp Extends App

	Const STARTSCREEN = 0
	Const PLAY = 1

	Field gfxBG:Image
	
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480

	Field devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	Global wormLength:Int = 8
	Global wormX:Int[wormLength * 17], wormY:Int[wormLength * 17]
	Field dx, dy:Int
	Field foodX:Int, foodY:Int
	Field drawFood:Bool
	Field gameState:Int
	Field touchX:Float, touchY:Float
	Field prevTX:Float, prevTY:Float
	Field prevHorChange:Float, prevVerChange:Float

	Method OnCreate()
	
		gfxBG = LoadImage("bg.png")

		devWidth = DeviceWidth()
		devHeight = DeviceHeight()
		
		scaleX = devWidth / BG_WIDTH
		scaleY = devHeight / BG_HEIGHT

		' Init worm
		For Local w:Int = 0 To 7 * 17
			wormX[w] = 200-w
			wormY[w] = 10*17
		Next
		
		dx = 1
		dy = 0
		
		drawFood = True
		SetUpdateRate(60)
	End

	Method OnUpdate()
		
		If TouchHit(0) > 0 Then gameState = PLAY
		
		If gameState = STARTSCREEN Then Return
		
		
		If TouchDown() > 0 Then
			touchX = TouchX() / scaleX
			touchY = TouchY() / scaleY

			' Calculate the differences between current and previous update rounds' touch values		
			If prevTX < touchX Then prevHorChange = Abs(prevTX - touchX) Else prevHorChange = Abs(touchX - prevTX)
			If prevTY < touchY Then prevVerChange = Abs(prevTY - touchY) Else prevVerChange = Abs(touchY - prevTY)
			
			' Up
			If touchY - prevTY < 0 And Abs(touchY - prevTY) > prevHorChange Then
				dx = 0
				dy = -1
			Endif
		
			' Down
			If touchY - prevTY > 0 And Abs(prevTY - touchY) > prevHorChange Then
				dx = 0
				dy = 1
			Endif
			
			' Left
			If touchX - prevTX < 0 And Abs(touchX - prevTX) > prevVerChange Then
				dx = -1
				dy = 0
			Endif
		
			' Right
			If touchX - prevTX > 0 And Abs(prevTX - touchX) > prevVerChange Then
				dx = 1
				dy = 0
			Endif

			prevTX = touchX
			prevTY = touchY
			
		Endif
		
		If drawFood = True Then
			foodX = Rnd()*(639-17)
			foodY = Rnd()*(479-17)
			drawFood = False
		Endif

		If Abs(wormX[0] - foodX) < 17 And Abs(wormY[0] - foodY) < 17 Then
			wormLength = wormLength + 1
			' Dynamically resize the arrays
			wormX = wormX.Resize(wormLength * 17)
			wormY = wormY.Resize(wormLength * 17)

			wormX[(wormLength-1)*17] = wormX[(wormLength-2)*17]
			wormY[(wormLength-1)*17] = wormY[(wormLength-2)*17]

			drawFood = True
		Endif
		
		For Local w:Int = (wormLength - 1) * 17 To 1 Step -1
			wormX[w] = wormX[w-1]
			wormY[w] = wormY[w-1]
		Next	

		wormX[0] = wormX[0] + dx
		wormY[0] = wormY[0] + dy
	End
	

	Method OnRender()
				
		' Scale the graphics
		PushMatrix()
		Scale (scaleX,scaleY)

		DrawImage gfxBG,0,0

		Select gameState
			Case STARTSCREEN
				SetColor 180,120,180
				SetBlend AdditiveBlend
				
				DrawText "Simple worm game",(640 - TextWidth("Simple worm game")) / 2,10
				DrawText "Move your finger on the screen to control the worm",(640 - TextWidth("Move your finger on the screen to control the worm")) / 2,40
				DrawText "Touch anywhere to start",(640 - TextWidth("Touch anywhere to start")) / 2,70
	
			Case PLAY
				SetColor 180,120,180
				SetBlend AdditiveBlend
				DrawText "Worm Length: " + wormLength,0,0
				SetColor 0,255,0
				
				SetBlend AlphaBlend
				SetAlpha 1
				SetColor 0,255,0

				For Local w:Int = 0 To wormLength - 1
					DrawOval wormX[w * 17],wormY[w * 17],17,17
				Next
				
				SetColor 255,0,0
	
				DrawOval wormX[0],wormY[0],17,17

				SetColor 255,255,0
				DrawOval foodX,foodY,17,17
		End Select
		
		PopMatrix()
	End

End Class

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

Import mojo

Function Main:Int()

New MyApp

Return 0

End

Class MyApp Extends App

Const STARTSCREEN = 0

Const PLAY = 1

Field gfxBG:Image

Const BG_WIDTH:Int = 640

Const BG_HEIGHT:Int = 480

Field devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float

Global wormLength:Int = 8

Global wormX:Int[wormLength * 17], wormY:Int[wormLength * 17]

Field dx, dy:Int

Field foodX:Int, foodY:Int

Field drawFood:Bool

Field gameState:Int

Field touchX:Float, touchY:Float

Field prevTX:Float, prevTY:Float

Field prevHorChange:Float, prevVerChange:Float

Method OnCreate()

gfxBG = LoadImage("bg.png")

devWidth = DeviceWidth()

devHeight = DeviceHeight()

scaleX = devWidth / BG_WIDTH

scaleY = devHeight / BG_HEIGHT

' Init worm

For Local w:Int = 0 To 7 * 17

wormX[w] = 200-w

wormY[w] = 10*17

dx = 1

dy = 0

drawFood = True

SetUpdateRate(60)

End

Method OnUpdate()

If TouchHit(0) > 0 Then gameState = PLAY

If gameState = STARTSCREEN Then Return

If TouchDown() > 0 Then

touchX = TouchX() / scaleX

touchY = TouchY() / scaleY

' Calculate the differences between current and previous update rounds' touch values

If prevTX < touchX Then prevHorChange = Abs(prevTX - touchX) Else prevHorChange = Abs(touchX - prevTX)

If prevTY < touchY Then prevVerChange = Abs(prevTY - touchY) Else prevVerChange = Abs(touchY - prevTY)

' Up

If touchY - prevTY < 0 And Abs(touchY - prevTY) > prevHorChange Then

dx = 0

dy = -1

Endif

' Down

If touchY - prevTY > 0 And Abs(prevTY - touchY) > prevHorChange Then

dx = 0

dy = 1

Endif

' Left

If touchX - prevTX < 0 And Abs(touchX - prevTX) > prevVerChange Then

dx = -1

dy = 0

Endif

' Right

If touchX - prevTX > 0 And Abs(prevTX - touchX) > prevVerChange Then

dx = 1

dy = 0

Endif

prevTX = touchX

prevTY = touchY

Endif

If drawFood = True Then

foodX = Rnd()*(639-17)

foodY = Rnd()*(479-17)

drawFood = False

Endif

If Abs(wormX[0] - foodX) < 17 And Abs(wormY[0] - foodY) < 17 Then

wormLength = wormLength + 1

' Dynamically resize the arrays

wormX = wormX.Resize(wormLength * 17)

wormY = wormY.Resize(wormLength * 17)

wormX[(wormLength-1)*17] = wormX[(wormLength-2)*17]

wormY[(wormLength-1)*17] = wormY[(wormLength-2)*17]

drawFood = True

Endif

For Local w:Int = (wormLength - 1) * 17 To 1 Step -1

wormX[w] = wormX[w-1]

wormY[w] = wormY[w-1]

wormX[0] = wormX[0] + dx

wormY[0] = wormY[0] + dy

End

Method OnRender()

' Scale the graphics

PushMatrix()

Scale (scaleX,scaleY)

DrawImage gfxBG,0,0

Select gameState

Case STARTSCREEN

SetColor 180,120,180

SetBlend AdditiveBlend

DrawText "Simple worm game",(640 - TextWidth("Simple worm game")) / 2,10

DrawText "Move your finger on the screen to control the worm",(640 - TextWidth("Move your finger on the screen to control the worm")) / 2,40

DrawText "Touch anywhere to start",(640 - TextWidth("Touch anywhere to start")) / 2,70

Case PLAY

SetColor 180,120,180

SetBlend AdditiveBlend

DrawText "Worm Length: " + wormLength,0,0

SetColor 0,255,0

SetBlend AlphaBlend

SetAlpha 1

SetColor 0,255,0

For Local w:Int = 0 To wormLength - 1

DrawOval wormX[w * 17],wormY[w * 17],17,17

SetColor 255,0,0

DrawOval wormX[0],wormY[0],17,17

SetColor 255,255,0

DrawOval foodX,foodY,17,17

End Select

PopMatrix()

End

End Class

Source code license: Public domain.

Notice, that in this code one part of the worm’s “body” is 17 x 17 pixels, but the worm moves with step of one pixel and can be controlled with accuracy of one pixel. The example code above is simple implementation of this kind of worm game. The down side of the code is, that the sizes of the arrays for x– and y-coordinates depend of the length of the worm in pixels.

I may come back later with some implementation with different concept of moving the worm of which “body” is built with “blocks” of different size than one pixel, but the worm is controlled with accuracy of one pixel, without using arrays of which lengths depend on the size of the worm in pixels.

Touching an object in Monkey X

July 20, 2015March 8, 2016 Markus

I’ll share here something that is related to a project I’m working on.

How to test if the user/player has touched an object on the screen. In our example program the object is the following (you may download the object):

My little code tests if object is touched while it moves around the screen. The test is pixel accurate.

The idea is to use a databuffer where the image’s pixel data is stored as integers, which is done by using the LoadImageData command. Each pixel takes 4 bytes of space in the buffer.

The alpha component is set to zero; the remaining bits represent the RGB values. Each integer is stored in variable data. If data <> 0 then the player has touched the object. Only the pixel of the image that has been touched, will be tested.

The code below clarifies this:

Import brl.databuffer
Import opengl.gles11
Import mojo

Function Main()
	New MyApp
End

Class MyApp Extends App

	Global BallData:DataBuffer
	Field gfxBall:Image
	
	Global hit:Bool
	
	Global info:Int[2]
	Global touchX:Float
	Global touchY:Float
	
	Global angle:Float

	Method OnCreate()

		SetDeviceWindow(800,600,0)

		gfxBall = LoadImage("ball.png")
		
		BallData = LoadImageData("monkey://data/ball.png",info)
		
		SetUpdateRate(60)
		
	End

	Method OnUpdate()
	
		Local data:Int
		Local coordX:Int
		Local coordY:Int
		Local pointX:Int
		Local pointY:Int
		
		touchX = TouchX()
		touchY = TouchY()
		
		angle = angle + 0.7
		
		hit = False
		
		coordX = (800 - 72) / 2 + Cos(angle)*200
		coordY = (600 - 72) / 2 + Sin(angle)*200
		
		If touchX - coordX < 72.0 And touchX - coordX >= 0 And touchY - coordY < 72.0 And touchY - coordY >= 0 Then
			
			pointX = touchX - coordX
			pointY = touchY - coordY
			
			data = BallData.PeekInt(pointX*4 + pointY*72*4)
			data = data & $00ffffff

			If data <> 0 Then hit = True

		Endif
		
		
	End
	
	Method OnRender()
		
		Cls
		SetBlend AdditiveBlend
		
		DrawImage gfxBall,(800 - 72) / 2 + Cos(angle)*200, (600 - 72) / 2 + Sin(angle)*200	
		
		If hit = True Then DrawText "HIT!",(800 - TextWidth("HIT!")) / 2, (600 - 8) / 2
		
	End
	
End Class

Import brl.databuffer

Import opengl.gles11

Import mojo

Function Main()

New MyApp

End

Class MyApp Extends App

Global BallData:DataBuffer

Field gfxBall:Image

Global hit:Bool

Global info:Int[2]

Global touchX:Float

Global touchY:Float

Global angle:Float

Method OnCreate()

SetDeviceWindow(800,600,0)

gfxBall = LoadImage("ball.png")

BallData = LoadImageData("monkey://data/ball.png",info)

SetUpdateRate(60)

End

Method OnUpdate()

Local data:Int

Local coordX:Int

Local coordY:Int

Local pointX:Int

Local pointY:Int

touchX = TouchX()

touchY = TouchY()

angle = angle + 0.7

hit = False

coordX = (800 - 72) / 2 + Cos(angle)*200

coordY = (600 - 72) / 2 + Sin(angle)*200

If touchX - coordX < 72.0 And touchX - coordX >= 0 And touchY - coordY < 72.0 And touchY - coordY >= 0 Then

pointX = touchX - coordX

pointY = touchY - coordY

data = BallData.PeekInt(pointX*4 + pointY*72*4)

data = data & $00ffffff

If data <> 0 Then hit = True

Endif

End

Method OnRender()

Cls

SetBlend AdditiveBlend

DrawImage gfxBall,(800 - 72) / 2 + Cos(angle)*200, (600 - 72) / 2 + Sin(angle)*200

If hit = True Then DrawText "HIT!",(800 - TextWidth("HIT!")) / 2, (600 - 8) / 2

End

End Class

This code can’t be compiled to HTML5 target, so you’ll have to try this code in Monkey yourself to see how it works. In free Monkey X this can be compiled to desktop, in Monkey X Pro the code can have also Android target.

Feel free to use this code!

Updated 3/8/2016

Below is a bit more advanced code, where you can use an image where the background color isn’t transparent.

You may download the ball2.png file used in the code (the image has white background color):

The code masks the image with given mask color in function MaskImage, in the example mask color is 255,255,255.

Updated to handle scaled graphics.

Import brl.databuffer
Import opengl.gles11
Import mojo

Function Main()
	New MyApp
End

Class MyApp Extends App

	Field gfxBall:Image
	Field gfxBG:Image

	Global BallData:DataBuffer
	
	Global imWidth:Int, imHeight:Int
	
	Global hit:Bool
	Global touchX:Float
	Global touchY:Float

	Global scaleX:Float
	Global scaleY:Float

	Global maskR:Int, maskG:Int, maskB:Int
			
	Global angle:Float

	Method OnCreate()

		scaleX = DeviceWidth() / 800.0
		scaleY = DeviceHeight() / 600.0
		
		gfxBall = LoadImage("ball2.png")
		gfxBG = LoadImage("bg.png")
		
		' BallData holds the color information of the image	
		BallData = LoadImageData("monkey://data/ball2.png")
		
		imWidth = gfxBall.Width
		imHeight = gfxBall.Height
		
		maskR = 255
		maskG = 255
		maskB = 255
		
		' gfxBall will be replaced with new image with mask color as transparent color
		gfxBall = MaskImage(gfxBall,BallData)
		
		SetUpdateRate(60)
		
	End

	Method OnUpdate()
	
		Local data:Int
		Local coordX:Float
		Local coordY:Float
		Local pointX:Float
		Local pointY:Float

		touchX = TouchX() / scaleX
		touchY = TouchY() / scaleY
		
		angle = angle + 0.4
		
		hit = False
		
		coordX = ((800 - imWidth) / 2 + Cos(angle)*200)
		coordY = ((600 - imHeight) / 2 + Sin(angle)*200)
		
		' If touched in the image rectangle, test if pixel was touched
		If touchX - coordX < imWidth And touchX - coordX >= 0 And touchY - coordY < imHeight And touchY - coordY >= 0 Then

			pointX = Int(touchX - coordX) ' pointX gets values 0..image width - 1
			pointY = Int(touchY - coordY) ' pointY gets values 0..image height - 1
			
			' BallData holds the original color information of the image
			data = BallData.PeekInt(pointX * 4 + pointY * imWidth*4)
			data = data & $00ffffff
			
			' Is mask color touched?
			If data <> ((maskR Shl 16) | (maskG Shl 8) | maskB) Then hit = True

		Endif	
	End
	
	' Draw image
	Method OnRender()
		
		PushMatrix()
		Scale(scaleX,scaleY)
		
		DrawImage gfxBG,0,0

		DrawImage gfxBall,(800 - imWidth) / 2 + Cos(angle)*200, (600 - imHeight) / 2 + Sin(angle)*200
		
		If hit = True Then
			SetBlend AdditiveBlend
			SetColor 255,0,0
			DrawRect 0,0,800,600
		Endif
		
		PopMatrix()
		
	End
	
	Function MaskImage:Image(gfxImage:Image, databuffer:DataBuffer)

		Local pixels:Int[imWidth * imHeight]		' pixel array
		Local color:Int

		For Local j = 0 To imHeight - 1
			For Local i = 0 To imWidth - 1
				
				Local r:Int
				Local g:Int
				Local b:Int
				Local a:Int
				
				' databuffer holds the original color information of the image
				color = databuffer.PeekInt(i*4+j*4*imWidth)	' each integer is 4 bytes

				' Alpha, Red, Green, Blue
				a = (color & $ff000000) Shr 24				
				r = (color & $00ff0000) Shr 16
				g = (color & $0000ff00) Shr 8
				b = color & $000000ff
				
				' if mask color is found, make it transparent
				If r = maskR And g = maskG And b = maskB Then 
					pixels[i+j*imWidth] = color & $00ffffff
				Else
					' Alpha, Blue, Green, Red
					pixels[i+j*imWidth] = (a Shl 24) | r | (g Shl 8) | (b Shl 16)
				Endif
			Next
		Next

		gfxImage.WritePixels(pixels,0,0,imWidth,imHeight) ' Replace original image
		Return gfxImage
	End

End Class

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

Import brl.databuffer

Import opengl.gles11

Import mojo

Function Main()

New MyApp

End

Class MyApp Extends App

Field gfxBall:Image

Field gfxBG:Image

Global BallData:DataBuffer

Global imWidth:Int, imHeight:Int

Global hit:Bool

Global touchX:Float

Global touchY:Float

Global scaleX:Float

Global scaleY:Float

Global maskR:Int, maskG:Int, maskB:Int

Global angle:Float

Method OnCreate()

scaleX = DeviceWidth() / 800.0

scaleY = DeviceHeight() / 600.0

gfxBall = LoadImage("ball2.png")

gfxBG = LoadImage("bg.png")

' BallData holds the color information of the image

BallData = LoadImageData("monkey://data/ball2.png")

imWidth = gfxBall.Width

imHeight = gfxBall.Height

maskR = 255

maskG = 255

maskB = 255

' gfxBall will be replaced with new image with mask color as transparent color

gfxBall = MaskImage(gfxBall,BallData)

SetUpdateRate(60)

End

Method OnUpdate()

Local data:Int

Local coordX:Float

Local coordY:Float

Local pointX:Float

Local pointY:Float

touchX = TouchX() / scaleX

touchY = TouchY() / scaleY

angle = angle + 0.4

hit = False

coordX = ((800 - imWidth) / 2 + Cos(angle)*200)

coordY = ((600 - imHeight) / 2 + Sin(angle)*200)

' If touched in the image rectangle, test if pixel was touched

If touchX - coordX < imWidth And touchX - coordX >= 0 And touchY - coordY < imHeight And touchY - coordY >= 0 Then

pointX = Int(touchX - coordX) ' pointX gets values 0..image width - 1

pointY = Int(touchY - coordY) ' pointY gets values 0..image height - 1

' BallData holds the original color information of the image

data = BallData.PeekInt(pointX * 4 + pointY * imWidth*4)

data = data & $00ffffff

' Is mask color touched?

If data <> ((maskR Shl 16) | (maskG Shl 8) | maskB) Then hit = True

Endif

End

' Draw image

Method OnRender()

PushMatrix()

Scale(scaleX,scaleY)

DrawImage gfxBG,0,0

DrawImage gfxBall,(800 - imWidth) / 2 + Cos(angle)*200, (600 - imHeight) / 2 + Sin(angle)*200

If hit = True Then

SetBlend AdditiveBlend

SetColor 255,0,0

DrawRect 0,0,800,600

Endif

PopMatrix()

End

Function MaskImage:Image(gfxImage:Image, databuffer:DataBuffer)

Local pixels:Int[imWidth * imHeight] ' pixel array

Local color:Int

For Local j = 0 To imHeight - 1

For Local i = 0 To imWidth - 1

Local r:Int

Local g:Int

Local b:Int

Local a:Int

' databuffer holds the original color information of the image

color = databuffer.PeekInt(i*4+j*4*imWidth) ' each integer is 4 bytes

' Alpha, Red, Green, Blue

a = (color & $ff000000) Shr 24

r = (color & $00ff0000) Shr 16

g = (color & $0000ff00) Shr 8

b = color & $000000ff

' if mask color is found, make it transparent

If r = maskR And g = maskG And b = maskB Then

pixels[i+j*imWidth] = color & $00ffffff

Else

' Alpha, Blue, Green, Red

pixels[i+j*imWidth] = (a Shl 24) | r | (g Shl 8) | (b Shl 16)

Endif

gfxImage.WritePixels(pixels,0,0,imWidth,imHeight) ' Replace original image

Return gfxImage

End

End Class

Feel free to improve and use the codes above!

Below is a video demonstration of the code above: