Tile Scrolling with Maps Made with my Map Editor

May 8, 2018 Markus

Little tutorial on scrolling a map/world made with my Map Editor.

First, the source code in full:

Import mojo2
Import brl

Function Main()
	New MyApp
End

Class MyApp Extends App

	Field canvas:Canvas
	Field gfxShapes:Image
	Field touchX,touchY:Float
	Field prevTX,prevTY:Float
	Field scaleX,scaleY:Float
	Field scrollX,scrollY:Float
	Field touchXD,touchYD:Float
	Field scroll:Bool
	Field map:Int[]
	Field worldHeight:Int, worldWidth:Int	
	
	Field mapX:Int
	Field mapY:Int
	
	Method OnCreate()
		canvas = New Canvas()
		

		gfxShapes = Image.Load("shapes.png")

		SetDeviceWindow(640,480,0)
		scaleX = DeviceWidth() / 640.0
		scaleY = DeviceHeight() / 480.0
		
		Local mapFile:=FileStream.Open("cerberus://data/map.dat","r")

		worldWidth = mapFile.ReadInt()
		worldHeight = mapFile.ReadInt()
		
		map = map.Resize(worldWidth * worldHeight)
		
		For Local i:Int = 0 To worldWidth * worldHeight - 1
			map[i] = mapFile.ReadInt()
		Next
			
		mapFile.Close()
		
		mapX = 0
		mapY = 0
		
	End
	
	Method OnUpdate()

		touchX = TouchX()
		touchY = TouchY()
										
		If TouchDown(0) > 0 Then
			
			scrollX = (touchX - prevTX)
			scrollY = (touchY - prevTY)
 			
			If Abs(scrollX) > Abs(scrollY) Then
				If scrollX < 0 Then mapX = mapX - 1 Else mapX = mapX + 1
			Else
				If scrollY < 0 Then mapY = mapY - 1 Else mapY = mapY + 1
			Endif
			
			If mapX < 0 Then mapX = 0
			If mapX > worldWidth - 40 - 1 Then mapX = worldWidth - 40 - 1
			If mapY < 0 Then mapY = 0
			If mapY > worldHeight - 30 - 1 Then mapY = worldHeight - 30 - 1

		Endif

		prevTX = touchX
		prevTY = touchY	

	End

	Method OnRender()
		canvas.PushMatrix()
		canvas.Scale(scaleX,scaleY)
		
		For Local y:Int = 0 To 30 - 1
			For Local x:Int = 0 To 40 - 1
				canvas.DrawRect(x * 16, y * 16, gfxShapes, 0, map[mapX + x + (mapY + y) * worldWidth] * 16, 16, 16)
			Next
		Next

		canvas.Flush()
		canvas.PopMatrix()
	End
	
End Class

Import mojo2

Import brl

Function Main()

New MyApp

End

Class MyApp Extends App

Field canvas:Canvas

Field gfxShapes:Image

Field touchX,touchY:Float

Field prevTX,prevTY:Float

Field scaleX,scaleY:Float

Field scrollX,scrollY:Float

Field touchXD,touchYD:Float

Field scroll:Bool

Field map:Int[]

Field worldHeight:Int, worldWidth:Int

Field mapX:Int

Field mapY:Int

Method OnCreate()

canvas = New Canvas()

gfxShapes = Image.Load("shapes.png")

SetDeviceWindow(640,480,0)

scaleX = DeviceWidth() / 640.0

scaleY = DeviceHeight() / 480.0

Local mapFile:=FileStream.Open("cerberus://data/map.dat","r")

worldWidth = mapFile.ReadInt()

worldHeight = mapFile.ReadInt()

map = map.Resize(worldWidth * worldHeight)

For Local i:Int = 0 To worldWidth * worldHeight - 1

map[i] = mapFile.ReadInt()

mapFile.Close()

mapX = 0

mapY = 0

End

Method OnUpdate()

touchX = TouchX()

touchY = TouchY()

If TouchDown(0) > 0 Then

scrollX = (touchX - prevTX)

scrollY = (touchY - prevTY)

If Abs(scrollX) > Abs(scrollY) Then

If scrollX < 0 Then mapX = mapX - 1 Else mapX = mapX + 1

Else

If scrollY < 0 Then mapY = mapY - 1 Else mapY = mapY + 1

Endif

If mapX < 0 Then mapX = 0

If mapX > worldWidth - 40 - 1 Then mapX = worldWidth - 40 - 1

If mapY < 0 Then mapY = 0

If mapY > worldHeight - 30 - 1 Then mapY = worldHeight - 30 - 1

Endif

prevTX = touchX

prevTY = touchY

End

Method OnRender()

canvas.PushMatrix()

canvas.Scale(scaleX,scaleY)

For Local y:Int = 0 To 30 - 1

For Local x:Int = 0 To 40 - 1

canvas.DrawRect(x * 16, y * 16, gfxShapes, 0, map[mapX + x + (mapY + y) * worldWidth] * 16, 16, 16)

canvas.Flush()

canvas.PopMatrix()

End

End Class

Quite straight forward, but some words about the code.

In the Map Editor dat-file, the first 4 byte integer declares the width of the map, the second the height of the map in tiles. The size of the map is read first, then the map itself.

The scrolling is made with touch screen in mind.

The meaning of the Abs(…)-sentence is, that in which direction in the touch screen the finger is being moved most and then the map is scrolled into that direction.

The 256 color shapes of the world are from an Ultima IV remake and are free to be used. The original project is “xu4”, if my memory servers me right.

The source above is places to public domain as license for it.

Please, if you make a game (in any programming language) utilizing my code, show me, what you have achieved. I’m big fan of games of this kind of genre.

For the end a video regarding this post. At the beginning of the video there’s some scrolling:

Embedding HTML5 output of Cerberus X to WordPress pages

April 13, 2018April 13, 2018 Markus

The first thing you need is Code Embed plugin.

If your HTML5 output code loads files, something must be changed in the JavaScript-code. Find the following piece of code:

BBHtml5Game.prototype.PathToUrl=function( path ){
	if( path.indexOf( "cerberus:" )!=0 ){
		return path;
	}else if( path.indexOf( "cerberus://data/" )==0 ) {
		return "data/"+path.slice( 16 );
	}
	return "";
}

BBHtml5Game.prototype.PathToUrl=function( path ){

if( path.indexOf( "cerberus:" )!=0 ){

return path;

}else if( path.indexOf( "cerberus://data/" )==0 ) {

return "data/"+path.slice( 16 );

}

return "";

}

The URL of the data drawer must be changed. If you have the data drawer at the root of your www (public_html) drawer, change the “path.slice” line like this:

return "/data/"+path.slice( 16 );

1	return "/data/"+path.slice( 16 );

If you’re working offline with some server program and have a testsite to experiment with, the path can be found as follows:

return "http://localhost/testsite/data/"+path.slice( 16 );

1	return "http://localhost/testsite/data/"+path.slice( 16 );

The y-coordinate of the mouse need also some adjustment, if the page has scrollbar: The y-start depends on the position of the scrollbar.

Find the following function:

	function mouseY( e ){
		var y=e.clientY+document.body.scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

function mouseY( e ){

var y=e.clientY+document.body.scrollTop;

var c=canvas;

while( c ){

y-=c.offsetTop;

c=c.offsetParent;

}

return y*yscale;

}

The y-coordinate is correct with following change:

function mouseY( e ){
		var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		var y=e.clientY+document.body.scrollTop + scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

function mouseY( e ){

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

var y=e.clientY+document.body.scrollTop + scrollTop;

var c=canvas;

while( c ){

y-=c.offsetTop;

c=c.offsetParent;

}

return y*yscale;

}

With the touch screen no additional changes need to be done.

While working with WordPress, the “tool/status” bar of WordPress changes the y-coordinate too, but the visitor on your page doesn’t have that page with the “tool/status” bar of WordPress. 🙂

You’ll probably want to remove the console from the page, too. Just remove all the references to splitter and console from the CerberusGame.html.

I almost forgot, in CerberusGame.html use absolute path to find the JavaScript-file. For example src=”https://yoursite.com/drawer/program.js”. Perhaps at first is good practice to try with all the contents of the default CerberusGame.html, so that you see that everything is working.

This should help.

As an example in practice, you might want check my online games corner.

Good luck!

Old School XII – Unlimited Objects

March 3, 2018March 8, 2018 Markus

The idea to Old School XII comes from Amiga demos from the early 90’s. First there was lots of competition in the Amiga demo scene on who makes a demo with most amount of bobs (blitter objects) in one 50Hz frame. Eventually we saw bob demos with unlimited amount of bobs!

The amount of bobs is basically unlimited; only the visible area of the screen limits the amount of moving bobs. This is achieved with actually only one bob!

I made today this effect in Monkey X.

The implementation in Monkey X is done by using multiple canvases with images. One canvas is used to draw into screen, the rest of of the canvases are used to achieve the unlimited objects effect.

Below is the video of the Monkey X implementation:

I haven’t yet tested if less amount of canvases is sufficient, but in the beginning of the code I wrote the following:

		For Local i:Int = 0 To 15
			gfxCopy[i] = New Image(640,480,.0,.0)
			ccanvas[i] = New Canvas(gfxCopy[i])
		Next

For Local i:Int = 0 To 15

gfxCopy[i] = New Image(640,480,.0,.0)

ccanvas[i] = New Canvas(gfxCopy[i])

The only object is drawn subsequently to each of created canvases. The following line does the magic of unlimited objects:

canvas.DrawImage(gfxCopy[counter],0,0)

1	canvas.DrawImage(gfxCopy[counter],0,0)

For the end below is one Amiga demo with unlimited bobs:

I made HD (or HQ) version of the video later today:

That’s all for now!

Touching an Image in Cerberus X

January 21, 2018March 8, 2018 Markus

This post is the 3rd in the series of touching an image pixel accurately. The second one is too complicated, now I have kept it clear and simple.

The image to be touch is middle handled (this makes scaling easier) and the image both moves and is scaled real time.

Here’s the source code:

Import mojo2
Import opengl.gles20

Function Main()
	New MyApp
End


Class MyApp Extends App
	
	Const WIDTH:Float = 80
	Const HEIGHT:Float = 80

	Field canvas:Canvas
	
	Field gfxBG:Image
	Field gfxBall:Image
	Field BallData:DataBuffer
	
	Field scaleX:Float, scaleY:Float
	Field scale:Float
	Field touchX:Float, touchY:Float
	Field angle:Float
	Field x:Int, y:Int
	Field hit:Bool = False
	
	Method OnCreate()
		
		SetDeviceWindow(800,600,0)
		
		canvas = New Canvas
		
		scaleX = DeviceWidth() / 800.0
		scaleY = DeviceHeight() / 600.0

		gfxBG = Image.Load("bg.jpg",0,0)
	    gfxBall = Image.Load("ball.png")	' By default this image is middle handled ("ball.png",.5,.5)

		' Information of "ball.png" image is loaded here
	    BallData = LoadImageData("cerberus://data/ball.png") ' If you're using Monkey X, change cerberus to monkey
		
		SetUpdateRate(30)
		
	End
	
	Method OnUpdate()

		Local coordX:Float, coordY:Float
	
		
		scale = 3 - Cos(angle * 4)	' calculate scaling factor to the image
		angle = angle + 2

		x = 800 / 2 + Cos(angle) * 150
		y = 600 / 2 + Sin(angle) * 150

		If TouchDown(0) > 0 Then
			hit = False
		
			touchX = TouchX()
			touchY = TouchY()
				
			' The image is middle handled
			' Here we find the "virtual" (=scaled) top left corner
		
			coordX = x - (WIDTH / 2) * scale
			coordY = y - (HEIGHT / 2) * scale

			' Is the object touched at its rectangle?
			If touchX - coordX < WIDTH * scale And touchX - coordX > 0 And touchY - coordY < HEIGHT * scale And touchY - coordY > 0 Then
		
				Local pointX:Int
				Local pointY:Int
				Local data:Int
			
				' In the actual touch test we check the original image;
				' that is why following "scaling" must be done for the touch point
				pointX = Int((touchX - coordX) / scale)
				pointY = Int((touchY - coordY) / scale)

				data = BallData.PeekInt(pointX * 4 + pointY * WIDTH * 4) & $FF000000
			
				' If alpha <> 0 there are pixels
				If data <> 0 Then hit = True Else hit = False
			Endif
		Endif
	End

	Method OnRender()

		canvas.PushMatrix()
		canvas.Scale(scaleX,scaleY)
		canvas.SetBlendMode(BlendMode.Alpha)
		canvas.DrawImage gfxBG,0,0
		
		If hit = True Then canvas.SetBlendMode(BlendMode.Additive) Else canvas.SetBlendMode(BlendMode.Alpha)

		canvas.DrawImage(gfxBall, x, y, 0, scale, scale)
		
		canvas.Flush
		canvas.PopMatrix
		
	End

End Class

100

101

102

103

104

105

Import mojo2

Import opengl.gles20

Function Main()

New MyApp

End

Class MyApp Extends App

Const WIDTH:Float = 80

Const HEIGHT:Float = 80

Field canvas:Canvas

Field gfxBG:Image

Field gfxBall:Image

Field BallData:DataBuffer

Field scaleX:Float, scaleY:Float

Field scale:Float

Field touchX:Float, touchY:Float

Field angle:Float

Field x:Int, y:Int

Field hit:Bool = False

Method OnCreate()

SetDeviceWindow(800,600,0)

canvas = New Canvas

scaleX = DeviceWidth() / 800.0

scaleY = DeviceHeight() / 600.0

gfxBG = Image.Load("bg.jpg",0,0)

gfxBall = Image.Load("ball.png") ' By default this image is middle handled ("ball.png",.5,.5)

' Information of "ball.png" image is loaded here

BallData = LoadImageData("cerberus://data/ball.png") ' If you're using Monkey X, change cerberus to monkey

SetUpdateRate(30)

End

Method OnUpdate()

Local coordX:Float, coordY:Float

scale = 3 - Cos(angle * 4) ' calculate scaling factor to the image

angle = angle + 2

x = 800 / 2 + Cos(angle) * 150

y = 600 / 2 + Sin(angle) * 150

If TouchDown(0) > 0 Then

hit = False

touchX = TouchX()

touchY = TouchY()

' The image is middle handled

' Here we find the "virtual" (=scaled) top left corner

coordX = x - (WIDTH / 2) * scale

coordY = y - (HEIGHT / 2) * scale

' Is the object touched at its rectangle?

If touchX - coordX < WIDTH * scale And touchX - coordX > 0 And touchY - coordY < HEIGHT * scale And touchY - coordY > 0 Then

Local pointX:Int

Local pointY:Int

Local data:Int

' In the actual touch test we check the original image;

' that is why following "scaling" must be done for the touch point

pointX = Int((touchX - coordX) / scale)

pointY = Int((touchY - coordY) / scale)

data = BallData.PeekInt(pointX * 4 + pointY * WIDTH * 4) & $FF000000

' If alpha <> 0 there are pixels

If data <> 0 Then hit = True Else hit = False

Endif

End

Method OnRender()

canvas.PushMatrix()

canvas.Scale(scaleX,scaleY)

canvas.SetBlendMode(BlendMode.Alpha)

canvas.DrawImage gfxBG,0,0

If hit = True Then canvas.SetBlendMode(BlendMode.Additive) Else canvas.SetBlendMode(BlendMode.Alpha)

canvas.DrawImage(gfxBall, x, y, 0, scale, scale)

canvas.Flush

canvas.PopMatrix

End

End Class

The actual test is made for the original image data, that is left intact. Because the image is middle handled in order to get the top left corner of the image, one must decrease half of the width and height of the image from the x, y of the image. But as the image is scaled the actual graphical top left corner is x – (width / 2) * scale and y – (height / 2) * scale.

When then top left corner of the rectangle is calculated, to this is added the scaled size: width * scale and height * scale. This is taken care of in the if-sentence, when checking if in the rectangle is touched.

When one has the touching point, the point in the image must be “scaled” by the scale factor, see the commented part of the code for this.

In the actual test is tested is the picture’s alpha value in the calculated point <> 0; if it is, the image that has transparent pixels, must have been touched.

Clear and simple. 🙂

Below is a video of regarding this post:

If you want to compile this in Monkey X, just change in the LoadImageData-part “cerberus” to “monkey”.

Update:

In my Memorable Melodies game is used slightly different code to touch the images, because the images to be touched don’t have “holes”.

Snowing Effect in Monkey X

November 22, 2017March 8, 2018 Markus

Since Christmas is coming soon, I decided to share my snowing effect code I wrote last year. The original code was written in BlitzMax. This year I have already made new Christmas intro in Monkey X. You may want to take look at the snowing effect of the Christmas video of the last year.

Import mojo2

Function Main()
	New MyApp
End

Class snowFlake
	Field x:Float, y:Float
	Field dx:Float
	Field r:Int
	Field yspeed:Float
	Field flakeAngle:Float
End Class

Class MyApp Extends App

	Field gfxBG:Image
	Field canvas:Canvas
	
	Global flakeList := New List<snowFlake>
	
	Method OnCreate()

		SetDeviceWindow(640,480,0)		
		canvas = New Canvas
		
		gfxBG = Image.Load("bg.jpg",.0,.0)
			
		For Local i = 0 To 149
			Local flake:snowFlake = New snowFlake
			flake.x = Rnd(50,640-50)
			flake.r = Rnd(2,8)
			flake.y = -flake.r * 2
			flake.yspeed = Rnd(0.7,3)
			flake.flakeAngle = Rnd(0,359)
			flakeList.AddLast(flake)
		Next
		
		SetUpdateRate(30)
		
	End
	
	Method OnUpdate()
		
	End
	
	Method OnRender()
		
		canvas.PushMatrix()
		canvas.Scale(DeviceWidth() / 640.0, DeviceHeight() / 480.0)
		canvas.SetAlpha 1
		canvas.SetBlendMode(BlendMode.Opaque)
		canvas.DrawImage(gfxBG,0,0)
		
		For Local flake:snowFlake = Eachin flakeList
		
			flake.x = flake.x + flake.dx
			flake.y = flake.y + flake.yspeed
			
			canvas.DrawCircle flake.x, flake.y, flake.r
			flake.dx = Cos(flake.flakeAngle) * 4 * Rnd(0.2,1)

			If flake.y >= 480 + flake.r * 2 Then
				flake.r = Rnd(2,8)
				flake.y = -flake.r * 2
			Endif

			flake.flakeAngle = flake.flakeAngle + 1
		
		Next
		
		canvas.PopMatrix()
		canvas.Flush()

		
	End
	
End Class

Import mojo2

Function Main()

New MyApp

End

Class snowFlake

Field x:Float, y:Float

Field dx:Float

Field r:Int

Field yspeed:Float

Field flakeAngle:Float

End Class

Class MyApp Extends App

Field gfxBG:Image

Field canvas:Canvas

Global flakeList := New List<snowFlake>

Method OnCreate()

SetDeviceWindow(640,480,0)

canvas = New Canvas

gfxBG = Image.Load("bg.jpg",.0,.0)

For Local i = 0 To 149

Local flake:snowFlake = New snowFlake

flake.x = Rnd(50,640-50)

flake.r = Rnd(2,8)

flake.y = -flake.r * 2

flake.yspeed = Rnd(0.7,3)

flake.flakeAngle = Rnd(0,359)

flakeList.AddLast(flake)

SetUpdateRate(30)

End

Method OnUpdate()

End

Method OnRender()

canvas.PushMatrix()

canvas.Scale(DeviceWidth() / 640.0, DeviceHeight() / 480.0)

canvas.SetAlpha 1

canvas.SetBlendMode(BlendMode.Opaque)

canvas.DrawImage(gfxBG,0,0)

For Local flake:snowFlake = Eachin flakeList

flake.x = flake.x + flake.dx

flake.y = flake.y + flake.yspeed

canvas.DrawCircle flake.x, flake.y, flake.r

flake.dx = Cos(flake.flakeAngle) * 4 * Rnd(0.2,1)

If flake.y >= 480 + flake.r * 2 Then

flake.r = Rnd(2,8)

flake.y = -flake.r * 2

Endif

flake.flakeAngle = flake.flakeAngle + 1

canvas.PopMatrix()

canvas.Flush()

End

End Class

Examine the code and you’ll get the idea quickly. Implementation in other programming languages should be quit straight forward. Just use background picture of your own.

Feel free to use the code.

Screenshot of the program:

I will soon publish my new Merry Christmas 2017 and Happy New Year 2018 video. And… It’s also written in Monkey X.

Example of Own Font Class in Monkey X part 2

October 29, 2017 Markus

I decided to implement in an alternative way own font class to Monkey X to use with fonts converted with my Font 2 PNG, just to for passing time.

Check the previous post or the homepage of Font 2 PNG for format of the dat-file.

Screenshot of the program:

All you really have to understand is the simple format of the dat-file of a font to understand the source code below — and of course basic understanding of Monkey X.

Import mojo
Import brl.databuffer

Function Main()
	New MyApp
End

Class MyFont
	Field maxHeight:Int
	Field fontDat:DataBuffer
	Field gfxFont:Image
	Field scale:Float
End

Class MyApp Extends App
	
	Field gfxBG:Image
	Global font1:MyFont
	Global font2:MyFont

	Method OnCreate()
		
		' -------
		' Font 1
		' -------
		font1 = New MyFont
		font1.gfxFont = LoadImage("font1.png")
		font1.fontDat = New DataBuffer(95*4*2) ' 95 characters, for each character two 4 byte integers
		font1.scale = 1
		font1.maxHeight = 71
		font1.fontDat = DataBuffer.Load("monkey://data/font1.dat")

		' -------	
		' Font 2
		'--------
		font2 = New MyFont
		font2.gfxFont = LoadImage("font2.png")
		font2.fontDat = New DataBuffer(95*4*2) ' 95 characters, for each character two 4 byte integers
		font2.scale = 1.8
		font2.maxHeight = 43
		font2.fontDat = DataBuffer.Load("monkey://data/font2.dat")
		
		gfxBG = LoadImage("bg.jpg")
		
		SetDeviceWindow(640,480,0)
		
		SetUpdateRate(30)
	End
	
	Method OnRender()
		SetBlend AlphaBlend
		SetAlpha 1
		DrawImage gfxBG,0,0

		drawString(font1, "Testing font 1", 10, 10)
		drawString(font2, "Testing font 2", (640 - stringWidth(font2, "Testing font 2") * font2.scale) / 2, (480 - (font2.maxHeight * font2.scale)) / 2)
	End
	
	Function drawString(font:MyFont, text:String, x:Float, y:Float)
		Local len = text.Length()
		
		Local chrs:Int[]
		chrs = text.ToChars()
		
		For Local i = 0 To len - 1
			'                                 pos. in font.png                          width in pixels in font.png
			DrawImageRect font.gfxFont, x, y, font.fontDat.PeekInt((chrs[i]-32)*4*2), 0, font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4), font.maxHeight,0,font.scale, font.scale,0
			x = x + font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4) * font.scale
		Next

	End
	
	Function stringWidth:Int(font:MyFont,text:String)
		Local len:Int = text.Length()
		Local chrs:Int[]
		Local length:Int = 0
		
		chrs = text.ToChars()
		
		For Local i:Int = 0 To len - 1
			length = length + font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4)
		Next
		
		Return length
	End

End Class

Import mojo

Import brl.databuffer

Function Main()

New MyApp

End

Class MyFont

Field maxHeight:Int

Field fontDat:DataBuffer

Field gfxFont:Image

Field scale:Float

End

Class MyApp Extends App

Field gfxBG:Image

Global font1:MyFont

Global font2:MyFont

Method OnCreate()

' -------

' Font 1

' -------

font1 = New MyFont

font1.gfxFont = LoadImage("font1.png")

font1.fontDat = New DataBuffer(95*4*2) ' 95 characters, for each character two 4 byte integers

font1.scale = 1

font1.maxHeight = 71

font1.fontDat = DataBuffer.Load("monkey://data/font1.dat")

' -------

' Font 2

'--------

font2 = New MyFont

font2.gfxFont = LoadImage("font2.png")

font2.fontDat = New DataBuffer(95*4*2) ' 95 characters, for each character two 4 byte integers

font2.scale = 1.8

font2.maxHeight = 43

font2.fontDat = DataBuffer.Load("monkey://data/font2.dat")

gfxBG = LoadImage("bg.jpg")

SetDeviceWindow(640,480,0)

SetUpdateRate(30)

End

Method OnRender()

SetBlend AlphaBlend

SetAlpha 1

DrawImage gfxBG,0,0

drawString(font1, "Testing font 1", 10, 10)

drawString(font2, "Testing font 2", (640 - stringWidth(font2, "Testing font 2") * font2.scale) / 2, (480 - (font2.maxHeight * font2.scale)) / 2)

End

Function drawString(font:MyFont, text:String, x:Float, y:Float)

Local len = text.Length()

Local chrs:Int[]

chrs = text.ToChars()

For Local i = 0 To len - 1

' pos. in font.png width in pixels in font.png

DrawImageRect font.gfxFont, x, y, font.fontDat.PeekInt((chrs[i]-32)*4*2), 0, font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4), font.maxHeight,0,font.scale, font.scale,0

x = x + font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4) * font.scale

End

Function stringWidth:Int(font:MyFont,text:String)

Local len:Int = text.Length()

Local chrs:Int[]

Local length:Int = 0

chrs = text.ToChars()

For Local i:Int = 0 To len - 1

length = length + font.fontDat.PeekInt((chrs[i]-32)*4*2 + 4)

Return length

End

End Class

Feel free to use the code above.

Example of Own Font Class in Monkey X

October 27, 2017March 8, 2018 Markus

I seem to live in the past… Monkey X programming language has evolved into Monkey2, but I’m still sometimes using Monkey X.

I made an example class to use in Monkey X with bitmap fonts converted with my Font 2 PNG. The example uses old Mojo-module, but old examples on scaling bitmap font made with Font 2 PNG will give you an idea of an alternative way to implementing this.

Next, let’s take a look at a screenshot:

Next to the code:

Import mojo
Import brl.stream
Import brl.filestream

Function Main()
	New MyApp
End

Class MyFont
	Field maxHeight:Int
	Field fontDat:Int[][]
	Field gfxFont:Image
	Field scale:Float
End

Class MyApp Extends App
	
	Field gfxBG:Image
	Global font1:MyFont
	Global font2:MyFont

	Method OnCreate()

		Local file:FileStream
		
		' -------
		' Font 1
		' -------
		font1 = New MyFont
		font1.gfxFont = LoadImage("font1.png")
		font1.fontDat = allocateArray(95,2)
		font1.scale = 1
		font1.maxHeight = 71

		file = FileStream.Open("monkey://data/font1.dat","r")
		
		For Local i:Int = 0 To 95 - 1
			font1.fontDat[i][0] = file.ReadInt()
			font1.fontDat[i][1] = file.ReadInt()
		Next				
		
		file.Close()

		' -------	
		' Font 2
		'--------
		font2 = New MyFont
		font2.gfxFont = LoadImage("font2.png")
		font2.fontDat = allocateArray(95,2)
		font2.scale = 1
		font2.maxHeight = 43

		file = FileStream.Open("monkey://data/font2.dat","r")
	
		For Local i:Int = 0 To 95 - 1
			font2.fontDat[i][0] = file.ReadInt()
			font2.fontDat[i][1] = file.ReadInt()
		Next				
		
		file.Close()
		
		gfxBG = LoadImage("bg.jpg")
		
		SetDeviceWindow(640,480,0)
		
		SetUpdateRate(30)
	End
	
	Method OnRender()
		SetBlend AlphaBlend
		SetAlpha 1
		DrawImage gfxBG,0,0

		drawString(font1, "Testing font 1", 10, 10)
		drawString(font2, "Testing font 2", (640 - (stringWidth(font2, "Testing font 2") * font2.scale)) / 2, (480 - (font2.maxHeight * font2.scale)) / 2)
	End
	
	Function drawString(font:MyFont, text:String, x:Float, y:Float)
		Local len = text.Length()
		
		Local chrs:Int[]
		chrs = text.ToChars()
		
		For Local i = 0 To len - 1
			'                               pos. in font.png          width in pixels in font.png
			DrawImageRect font.gfxFont, x, y, font.fontDat[chrs[i]-32][0], 0, font.fontDat[chrs[i]-32][1], font.maxHeight, 0 , font.scale, font.scale,0
			x = x + font.fontDat[chrs[i]-32][1] * font.scale
		Next

	End
	
	Function stringWidth:Int(font:MyFont, text:String)
		Local len:Int = text.Length()
		Local chrs:Int[]
		Local length:Int = 0
		
		chrs = text.ToChars()
		
		For Local i:Int = 0 To len - 1
			length = length + font.fontDat[chrs[i]-32][1]
		Next
		
		Return length
	End
	
	Function allocateArray:Int[][](i:Int, j:Int)
    	Local arr:Int[][] = New Int[i][]
    	
    	For Local index = 0 Until i
    	    arr[index] = New Int[j]
    	Next
    	
    	Return arr		
	End

End Class

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

Import mojo

Import brl.stream

Import brl.filestream

Function Main()

New MyApp

End

Class MyFont

Field maxHeight:Int

Field fontDat:Int[][]

Field gfxFont:Image

Field scale:Float

End

Class MyApp Extends App

Field gfxBG:Image

Global font1:MyFont

Global font2:MyFont

Method OnCreate()

Local file:FileStream

' -------

' Font 1

' -------

font1 = New MyFont

font1.gfxFont = LoadImage("font1.png")

font1.fontDat = allocateArray(95,2)

font1.scale = 1

font1.maxHeight = 71

file = FileStream.Open("monkey://data/font1.dat","r")

For Local i:Int = 0 To 95 - 1

font1.fontDat[i][0] = file.ReadInt()

font1.fontDat[i][1] = file.ReadInt()

file.Close()

' -------

' Font 2

'--------

font2 = New MyFont

font2.gfxFont = LoadImage("font2.png")

font2.fontDat = allocateArray(95,2)

font2.scale = 1

font2.maxHeight = 43

file = FileStream.Open("monkey://data/font2.dat","r")

For Local i:Int = 0 To 95 - 1

font2.fontDat[i][0] = file.ReadInt()

font2.fontDat[i][1] = file.ReadInt()

file.Close()

gfxBG = LoadImage("bg.jpg")

SetDeviceWindow(640,480,0)

SetUpdateRate(30)

End

Method OnRender()

SetBlend AlphaBlend

SetAlpha 1

DrawImage gfxBG,0,0

drawString(font1, "Testing font 1", 10, 10)

drawString(font2, "Testing font 2", (640 - (stringWidth(font2, "Testing font 2") * font2.scale)) / 2, (480 - (font2.maxHeight * font2.scale)) / 2)

End

Function drawString(font:MyFont, text:String, x:Float, y:Float)

Local len = text.Length()

Local chrs:Int[]

chrs = text.ToChars()

For Local i = 0 To len - 1

' pos. in font.png width in pixels in font.png

DrawImageRect font.gfxFont, x, y, font.fontDat[chrs[i]-32][0], 0, font.fontDat[chrs[i]-32][1], font.maxHeight, 0 , font.scale, font.scale,0

x = x + font.fontDat[chrs[i]-32][1] * font.scale

End

Function stringWidth:Int(font:MyFont, text:String)

Local len:Int = text.Length()

Local chrs:Int[]

Local length:Int = 0

chrs = text.ToChars()

For Local i:Int = 0 To len - 1

length = length + font.fontDat[chrs[i]-32][1]

Return length

End

Function allocateArray:Int[][](i:Int, j:Int)

Local arr:Int[][] = New Int[i][]

For Local index = 0 Until i

arr[index] = New Int[j]

Return arr

End

End Class

Font 2 PNG prints the max height of the font after converting. The value is in practice just the height of the png-file.

As a reminder: Font 2 PNG produces two files, font.png and font.dat for one font. The font.dat-file holds the information for each character with two 4 byte integers, first tells the position in pixels in font, the second the width of the chatacter in pixels.

I hope this example gives you some ideas on how to use different fonts converted with Font 2 PNG.

Feel free to use the code above.

PS. I also made new version of part 1 of my Old School series demonstration in Monkey X. Video below:

From the source code in the video you’ll get an idea, how this font class could be used with Mojo2-module.

That’s it from my “hobby corner” tonight!

Old School IX

October 26, 2017March 8, 2018 Markus

This morning I made new Old School demonstration in Monkey X. This is now 9th in the series.

Not much is changed in the code from the previous Old School demonstration. What actually required some work, was the font. As in all my Old School demonstrations, I used my Font 2 PNG program. With Mojo2-module one can use for one picture the following: “pic.png”, “pic_n.png” and “pic_s.png”. The programmer doesn’t need to worry about “_n” and “_s” versions of an image, Mojo2 takes care of them. I’ve written all I know from those extra pictures in the first old school post. I may make a better version of it in code-wise and perhaps add some extra too…

Anyway in this 9th version there are 3 versions of each character that are individual png-files.

See the magic: 🙂

I may share the Monkey X source code for these later Old School demonstrations later.

Rolling and Rotating scrolltext (Old School VIII)

October 17, 2017March 8, 2018 Markus

I made today a little Monkey X Pro demonstration: Rolling and rotating scrolltext (Old School VIII). Now it works perfectly. Like in Old School VII, the letters fade in and out at the bottom of the circle of letters. I have used my Font 2 PNG program to grab individual characters of a ttf-font to png-images for the program. Perhaps I will later share the source code of the demonstration…

Enjoy the nostalgia! 🙂

The idea behind the code of the rolling and rotating scrolltext:

At every update frame 30 characters (png-images) from the scrolltext are drawn in a form of a circle, each character with 12 degrees step (12 *30 = 360), let angle related to this angle be angle1
When drawing the character images, the angle that increases in 12 steps is added to each character in addition to this angle is added other angle variable, let this be angle2, that is decreased (the direction of rolling and rotating) by 1 degrees at every update frame
Because of my (probably clumsy but working 🙂 )implementation:

If angle2 Mod 12 = 0 Then
  angle2 = angle2 + 12
  scrollTextOffset = scrollTextOffset + 1
Endif

If angle2 Mod 12 = 0 Then

angle2 = angle2 + 12

scrollTextOffset = scrollTextOffset + 1

Endif

in DrawImage method rotation angle is angle1 + angle2 + constant that adjusts the letters to the right place on the circle

As to he fade out and fade in for the letter images, you may adjust the letters with alpha values as you best you see it is sensible, probably somewhere at the bottom of the circle.

That’s it! Do try to make make your own version with programming language of your choice. I recommend my Font 2 PNG program for the font.

Good luck!

The first time I saw this kind of effect created was some time in the late 80s on Amiga in following demo:

Ah! Those good old Amiga demos. Kind of magic at their time.

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…