How to get timestamp in Monkey 2 with libc and in C

October 26, 2018 Markus

This morning I got implemented a little code, that can be used to get timestamp based on ANSI C code using Monkey 2 programming language’s libc.

Let’s take first look at the Monkey 2 code:

Namespace myapp

#Import "<std>"
#Import "<libc>"

Using std..
Using libc..

Function Main()

		Local seconds:time_t
		Local p:tm_t Ptr
		Local date:String
		
		libc.time(Varptr seconds)
	
		p = localtime(Varptr seconds)
		
		date = String(p->tm_sec) + "-" + String(p->tm_min) + "-" + String(p->tm_hour) + "-" + String(p->tm_mday) + "-" + String((p->tm_mon)+1) + "-" + String(1900 + p->tm_year)
		
		Print date
	
End

Namespace myapp

#Import "<std>"

#Import "<libc>"

Using std..

Using libc..

Function Main()

Local seconds:time_t

Local p:tm_t Ptr

Local date:String

libc.time(Varptr seconds)

p = localtime(Varptr seconds)

date = String(p->tm_sec) + "-" + String(p->tm_min) + "-" + String(p->tm_hour) + "-" + String(p->tm_mday) + "-" + String((p->tm_mon)+1) + "-" + String(1900 + p->tm_year)

Print date

End

At the moment the output of the program is as follows: 40-31-8-26-10-2018

Year 2018, month 10, day 26, hour 8, min 31, sec 40.

Reversed order might be more useful in practice…

Let’s take a look at the C version:

#include <stdio.h>
#include <time.h>

void Date (char date[10+1]);

void main (void) {

	char datum[10+1];
	
	Date(datum);
	printf("%s",datum);

}


void Date (char date[10+1]) {
	time_t seconds;
	struct tm *p;
	
	time (&seconds);
	p = localtime(&seconds);
	
	sprintf(date, "%02i.%02i.%02i",
		p->tm_mday,
		p->tm_mon + 1,
		p->tm_year+1900);
}

#include <stdio.h>

#include <time.h>

void Date (char date[10+1]);

void main (void) {

char datum[10+1];

Date(datum);

printf("%s",datum);

}

void Date (char date[10+1]) {

time_t seconds;

struct tm *p;

time (&seconds);

p = localtime(&seconds);

sprintf(date, "%02i.%02i.%02i",

p->tm_mday,

p->tm_mon + 1,

p->tm_year+1900);

}

To the year is again added 1900. This gives following output: 26.10.2018

The tm_mon is between 0..11, tm_year between 1900 + 0..n.

That’s it for now, lots of things to do…

On Signing a Windows App

October 7, 2018 Markus

First I would like to tell you, that I have purchased an OV code signing certificate for one year. I found out from a blog, that K Software has at the moment the cheapest OV code signing certificate, $84 for one year.

As MicroSoft says in their documents, you must have a certificate, if you want to distribute or sell Windows apps.

There are three main categories of certificates on Windows platform: Open Source code signing, OV code signing and EV code signing.

The first is the cheapest — in the best case free — the last is the most expensive.

Open source code signing suits you if you do open source projects. You can check the definition of open source development here.

In the other cases the other two mentioned certificates are for you.

The OV certificate doesn’t prevent at first the smart screen to appear. In time, when you get enough downloads the smart screen won’t appear anymore. The EV certificate that is the most expensive, gives you immediate trust and no more smart screen to your apps.

The main benefit of OV certificate is, that none of the AV software programs considers your precious application a harmful file.

Once you have the certificate, signing the exe is as easy as follows:

signtool sign /a /f yourCertificate.pfx /p yourPassword yourApp.exe

1	signtool sign /a /f yourCertificate.pfx /p yourPassword yourApp.exe

The signtool.exe can be found at c:\program files (x86)\Windows Kits\… The appropriate path should be added to your system’s %path% environment variable. If you don’t have …\Windows Kits\ search the internet for Windows SDK version 8.1 or 10.

I have today signed most of my Windows apps. Smart screen will at first still warn you, but the file is no more considered a harmful file.

Unlimited Objects Source Code

September 26, 2018 Markus

In my old blog post I gave some idea how to implement “unlimited objects” program. In the original video I used 16 canvases with 16 images + the actual visible canvas. Two canvases only is sufficient.

In the source (Cerberus X) below, no external graphics files are needed:

Import mojo2

Function Main()
	New MyApp
End

Class MyApp Extends App
	
	Field gfxCopy:Image[16]
	Field ccanvas:Canvas
	Field counter:Int
	Field angle:Float	
	Field canvas:Canvas
	
	Field scaleX:Float, scaleY:Float
		
	Field x:Float, y:Float
	Field r:Float
	
	Method OnCreate()
			
		canvas = New Canvas()
		counter = 0
		
		For Local i:Int = 0 To 15
			gfxCopy[i] = New Image(640,480,.0,.0)
		Next
		
		ccanvas = New Canvas(gfxCopy[0])
		
		scaleX = DeviceWidth / 640
		scaleY = DeviceHeight / 480
		
		r = 100
		SetUpdateRate(60)
	End
	
	Method OnUpdate()

	End
	
	Method OnRender()
		
		angle = angle + 2

		x = Cos(angle) * r + 640 / 2
		y = Sin(angle) * r + 480 / 2
		
		r = r + 0.1

		counter = counter + 1
		If counter = 16 Then counter = 0
				
		ccanvas.SetRenderTarget(gfxCopy[counter])
		ccanvas.SetColor(1,1,0)
		ccanvas.DrawCircle(x,y,32)
		ccanvas.SetColor(1,0,1)
		ccanvas.DrawCircle(x,y,30)
		
		ccanvas.Flush()
		
		canvas.PushMatrix()
		canvas.Scale(scaleX,scaleY)
		
		canvas.Clear	

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

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

Import mojo2

Function Main()

New MyApp

End

Class MyApp Extends App

Field gfxCopy:Image[16]

Field ccanvas:Canvas

Field counter:Int

Field angle:Float

Field canvas:Canvas

Field scaleX:Float, scaleY:Float

Field x:Float, y:Float

Field r:Float

Method OnCreate()

canvas = New Canvas()

counter = 0

For Local i:Int = 0 To 15

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

ccanvas = New Canvas(gfxCopy[0])

scaleX = DeviceWidth / 640

scaleY = DeviceHeight / 480

r = 100

SetUpdateRate(60)

End

Method OnUpdate()

End

Method OnRender()

angle = angle + 2

x = Cos(angle) * r + 640 / 2

y = Sin(angle) * r + 480 / 2

r = r + 0.1

counter = counter + 1

If counter = 16 Then counter = 0

ccanvas.SetRenderTarget(gfxCopy[counter])

ccanvas.SetColor(1,1,0)

ccanvas.DrawCircle(x,y,32)

ccanvas.SetColor(1,0,1)

ccanvas.DrawCircle(x,y,30)

ccanvas.Flush()

canvas.PushMatrix()

canvas.Scale(scaleX,scaleY)

canvas.Clear

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

canvas.Flush()

canvas.PopMatrix()

End

End Class

The program gives different output, if the calculations are in OnUpdate() on HTML5 target.

Below is the old video I’ve made previously:

Source code license: MIT.

3D Stars As Lines

August 27, 2018August 28, 2018 Markus

I must have been really tired when I coded & posted the old 3D stars codes… Anyway, here’s code for 3D stars as lines.

Below the video:

To get the stars drawn as lines is really simple. In the 2D world to draw a line we need x1, y1, x2 and y2. In the projection from 3D space, we simple add for example 4 to the z-coordinate of a point so that, the other point is further away and we get two points to the 2D world.

Below is the main part of the Monkey X source code:

		' Projection from 3D space to 2D screen
		For Local i:Int = 0 To STARS - 1
			Local x1,x2,y1,y2:Float
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
						
			sx = x[i] / z[i] * 200 + 320
			sy = y[i] / z[i] * 200 + 240
			
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			
			x1 = x[i] / z[i] * 200 + 320
			x2 = x[i] / (z[i] + 4) * 200 + 320
			y1 = y[i] / z[i] * 200 + 240
			y2 = y[i] / (z[i] + 4) * 200 + 240
			
			canvas.DrawLine(x1,y1,x2,y2)
			
		Next

' Projection from 3D space to 2D screen

For Local i:Int = 0 To STARS - 1

Local x1,x2,y1,y2:Float

z[i] = z[i] - 1

If z[i] < 10 Then z[i] = Rnd(50,200)

sx = x[i] / z[i] * 200 + 320

sy = y[i] / z[i] * 200 + 240

shade = 1 - z[i] / 200

canvas.SetColor shade,shade,shade

x1 = x[i] / z[i] * 200 + 320

x2 = x[i] / (z[i] + 4) * 200 + 320

y1 = y[i] / z[i] * 200 + 240

y2 = y[i] / (z[i] + 4) * 200 + 240

canvas.DrawLine(x1,y1,x2,y2)

For the end the source code in full:

Import mojo2

Function Main:Int()
	New MyApp
	Return 0
End

Class MyApp Extends App

	Const STARS:Int = 280
		
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]
	
	Field canvas:Canvas
	Field sx:Float, sy:Float
	
	Method OnCreate()

		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
		
		SetUpdateRate(60)
	End

	Method OnUpdate()
						
	End
	

	Method OnRender()
		
		Local shade:Float
		
		canvas.PushMatrix()

		canvas.Clear()

		' Projection from 3D space to 2D screen
		For Local i:Int = 0 To STARS - 1
			Local x1,x2,y1,y2:Float
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
						
			sx = x[i] / z[i] * 200 + 320
			sy = y[i] / z[i] * 200 + 240
			
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			
			x1 = x[i] / z[i] * 200 + 320
			x2 = x[i] / (z[i] + 4) * 200 + 320
			y1 = y[i] / z[i] * 200 + 240
			y2 = y[i] / (z[i] + 4) * 200 + 240
			
			canvas.DrawLine(x1,y1,x2,y2)
			
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End

End Class

Import mojo2

Function Main:Int()

New MyApp

Return 0

End

Class MyApp Extends App

Const STARS:Int = 280

Field x:Float[STARS],y:Float[STARS],z:Float[STARS]

Field canvas:Canvas

Field sx:Float, sy:Float

Method OnCreate()

For Local i:Int = 0 To STARS - 1

x[i] = Rnd(-50,50)

y[i] = Rnd(-50,50)

z[i] = Rnd(50,200)

canvas = New Canvas()

SetUpdateRate(60)

End

Method OnUpdate()

End

Method OnRender()

Local shade:Float

canvas.PushMatrix()

canvas.Clear()

' Projection from 3D space to 2D screen

For Local i:Int = 0 To STARS - 1

Local x1,x2,y1,y2:Float

z[i] = z[i] - 1

If z[i] < 10 Then z[i] = Rnd(50,200)

sx = x[i] / z[i] * 200 + 320

sy = y[i] / z[i] * 200 + 240

shade = 1 - z[i] / 200

canvas.SetColor shade,shade,shade

x1 = x[i] / z[i] * 200 + 320

x2 = x[i] / (z[i] + 4) * 200 + 320

y1 = y[i] / z[i] * 200 + 240

y2 = y[i] / (z[i] + 4) * 200 + 240

canvas.DrawLine(x1,y1,x2,y2)

canvas.Flush()

canvas.PopMatrix()

End

End Class

Feel free to use this code.

Sine Wave Scroller in Monkey2

August 14, 2018September 23, 2018 Markus

Today’s little code, sine scroller in Monkey2. In the previous post you can download the code and data files for plain scroller. In this project same data files are used. Let’s take a look at the video:

The scrolling isn’t very smooth in the video, but try the code:

Namespace myapp

#Import "<std>"
#Import "<mojo>"


#Import "gfx/bg.jpg"
#Import "fonts/DoctorJekyllNF.ttf"

Using std..
Using mojo..


Class MyWindow Extends Window

Const SCROLLTEXT:String = "                              Sine scroller programmed in Monkey2 programming language...  One of the traditional sine scrollers seen in Amiga demos...                   "

Field bg:Image
Field scrollString:String
Field scrollX:Int
Field scrollY:Int
Field chrStartOffset:Int
Field firstChrWidth:Int
Field chrEndOffset:Int
Field font:Font

Field angl:Float

	Method New( title:String="Simple sine scroller",width:Int=640,height:Int=480,flags:WindowFlags=Null )

		Super.New( title,width,height,flags )

		bg = Image.Load("asset::bg.jpg")
		font = Font.Load("asset::DoctorJekyllNF.ttf",80)
		
		
		chrStartOffset = 0
		firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(0,1))
		scrollX = 0
		
	End

	Method OnRender( canvas:Canvas ) Override
	
		App.RequestRender()

		canvas.DrawImage(bg,0,0)
		canvas.Font = font
		canvas.Color = Color.Orange
		
					
		If scrollX < -firstChrWidth Then
			
			chrStartOffset = chrStartOffset + 1

			If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0
			
			firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(chrStartOffset,1))
			chrEndOffset = getTextEndOffset()
			
			If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0
			
			scrollX = 0
		Endif
				
		
		
				
		Local s:String
		Local position:Int = 0

		For Local c:Int = 0 To scrollString.Length - 1
			s = scrollString.Mid(c,1)
		
			Local angle:Float = ((640.0 / scrollString.Length) / 360.0 * 2) * (Pi / 180) + 8 * (chrStartOffset + c) * (Pi / 180) + angl
			
			scrollY = 200 + Sin(angle) * 80
			canvas.DrawText(s,scrollX+position,scrollY)
			
			position = position + font.TextWidth(scrollString.Mid(c,1))
		Next
		
		scrollX = scrollX - 2
		angl = angl - (Pi / 180) * 4
	End

	
	Method getTextEndOffset:Int()
		Local c:Int = chrStartOffset
		Local textWidth:Int = 0
		
		scrollString = ""
		
		' Find the end offset for a character to build a string
		' that's width in pixels is at least 640 + first character's width
		While textWidth < 640 + firstChrWidth
			
			scrollString = scrollString + SCROLLTEXT.Mid(c,1)
			c = c + 1
						
			If c > SCROLLTEXT.Length - 1 Then c = 0
			
			textWidth = font.TextWidth(scrollString)
		Wend
		
		Return c
		
	End	
		
End

Function Main()

	New AppInstance
	
	New MyWindow
	
	App.Run()
End

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

Namespace myapp

#Import "<std>"

#Import "<mojo>"

#Import "gfx/bg.jpg"

#Import "fonts/DoctorJekyllNF.ttf"

Using std..

Using mojo..

Class MyWindow Extends Window

Const SCROLLTEXT:String = " Sine scroller programmed in Monkey2 programming language... One of the traditional sine scrollers seen in Amiga demos... "

Field bg:Image

Field scrollString:String

Field scrollX:Int

Field scrollY:Int

Field chrStartOffset:Int

Field firstChrWidth:Int

Field chrEndOffset:Int

Field font:Font

Field angl:Float

Method New( title:String="Simple sine scroller",width:Int=640,height:Int=480,flags:WindowFlags=Null )

Super.New( title,width,height,flags )

bg = Image.Load("asset::bg.jpg")

font = Font.Load("asset::DoctorJekyllNF.ttf",80)

chrStartOffset = 0

firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(0,1))

scrollX = 0

End

Method OnRender( canvas:Canvas ) Override

App.RequestRender()

canvas.DrawImage(bg,0,0)

canvas.Font = font

canvas.Color = Color.Orange

If scrollX < -firstChrWidth Then

chrStartOffset = chrStartOffset + 1

If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0

firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(chrStartOffset,1))

chrEndOffset = getTextEndOffset()

If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0

scrollX = 0

Endif

Local s:String

Local position:Int = 0

For Local c:Int = 0 To scrollString.Length - 1

s = scrollString.Mid(c,1)

Local angle:Float = ((640.0 / scrollString.Length) / 360.0 * 2) * (Pi / 180) + 8 * (chrStartOffset + c) * (Pi / 180) + angl

scrollY = 200 + Sin(angle) * 80

canvas.DrawText(s,scrollX+position,scrollY)

position = position + font.TextWidth(scrollString.Mid(c,1))

scrollX = scrollX - 2

angl = angl - (Pi / 180) * 4

End

Method getTextEndOffset:Int()

Local c:Int = chrStartOffset

Local textWidth:Int = 0

scrollString = ""

' Find the end offset for a character to build a string

' that's width in pixels is at least 640 + first character's width

While textWidth < 640 + firstChrWidth

scrollString = scrollString + SCROLLTEXT.Mid(c,1)

c = c + 1

If c > SCROLLTEXT.Length - 1 Then c = 0

textWidth = font.TextWidth(scrollString)

Wend

Return c

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

The idea is to build a string (“scrollString”) which characters are drawn one by one to the screen in order to achieve the sine wave effect.

Feel free to use this code.

Simple text scrollers in Monkey X and Monkey2

August 13, 2018August 13, 2018 Markus

I coded today simple text scrollers in Monkey X and Monkey2. When the old school bug had bitten me I coded among other things the following:

This night it’s time to just simple text scrollers code.

Let’s take a look at the result of the Monkey X code:

The source code:

Import mojo2
Import brl.databuffer
Import mojo.audio

Function Main()
	New MyApp
End
 
Class MyApp Extends App
	
	Const FONT_HEIGHT:Int = 153
	Const SCROLLTEXT:String = "                      Testing plain text scrolling code... Coded in good old Monkey X Pro...  The picture is from my home, when I was living in Turku, Finland...                       "
 
	field canvas:Canvas
	field fontDat:DataBuffer
	field gfxFont:Image
	field gfxBG:Image
	field chrStartOffset:Int
	field firstChrWidth:Int
	field chrEndOffset:Int
	field x:Float

	
	Method OnCreate()
				
		canvas = New Canvas
		
		gfxBG = Image.Load("bg.jpg",.0,.0)
		gfxFont = Image.Load("font.png")
		fontDat = New DataBuffer(95*4*2) ' 95 characters, for each character two 4 byte integers
		fontDat = DataBuffer.Load("monkey://data/font.dat")
 				
		x = 0
		chrStartOffset = 0
		firstChrWidth = charWidth(0)
		
		SetUpdateRate(15)
	End
	
	Method OnUpdate()
 
		' Scroll the amount of width of the character in the font
		If x < -firstChrWidth Then
			chrStartOffset = chrStartOffset + 1
			
			If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0
			
			firstChrWidth = charWidth(chrStartOffset)
			chrEndOffset = getTextEndOffset()
			
			If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0
			
			x = 0
		Endif
 
		x = x - 2	' scrolling speed
			
	End
	
	Method OnRender()
		canvas.PushMatrix()
'		canvas.Scale(DeviceWidth()/640.0,DeviceHeight()/480.0)
 
 		canvas.SetBlendMode(BlendMode.Alpha)
		canvas.DrawImage(gfxBG,0,0)
 
		canvas.SetBlendMode(BlendMode.Additive)
		
		' draw string to position x
		drawString(x)
		
		canvas.Flush()
		canvas.PopMatrix()	
 
	End
	
	' This function draws text from indexes
	' chrStartOffset to chrEndOffset of the scrolltext string
	Method drawString(x:Int)
		Local xx:float
		Local angle:Int
		Local index:Int
		Local len = SCROLLTEXT.Length()
		Local chrs:Int[]
		chrs = SCROLLTEXT.ToChars()
		Local prevChrWidth:Int
		
		For Local i:Int = chrStartOffset To chrEndOffset
			canvas.DrawRect(x+prevChrWidth, (480 - FONT_HEIGHT) / 2, fontDat.PeekInt((chrs[i]-32)*4*2 + 4), FONT_HEIGHT, gfxFont, fontDat.PeekInt((chrs[i]-32)*4*2), 0, fontDat.PeekInt((chrs[i]-32)*4*2 + 4), FONT_HEIGHT)
			prevChrWidth = prevChrWidth + fontDat.PeekInt((chrs[i]-32)*4*2 + 4)
		Next		

	End
 
	' get character's width in pixels
	Method charWidth:Int(offset:Int)
		Local chrs:Int[]
		chrs = SCROLLTEXT.ToChars()
		Return fontDat.PeekInt((chrs[offset]-32)*4*2 + 4)
	End
	
	Method getTextEndOffset:Int()
		Local chrs:Int[]
		Local c:Int = chrStartOffset
		Local textWidth:Int = 0
		
		chrs = SCROLLTEXT.ToChars()
		
		' Find the endoffset for a character to build a string
		' that's width in pixels is at least 640 + first character's width
		While textWidth < 640 + firstChrWidth
			textWidth = textWidth + charWidth(c)
			c = c + 1

			If c > SCROLLTEXT.Length - 1 Then c = 0
			
		Wend
		
		Return c
		
	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

Import mojo2

Import brl.databuffer

Import mojo.audio

Function Main()

New MyApp

End

Class MyApp Extends App

Const FONT_HEIGHT:Int = 153

Const SCROLLTEXT:String = " Testing plain text scrolling code... Coded in good old Monkey X Pro... The picture is from my home, when I was living in Turku, Finland... "

field canvas:Canvas

field fontDat:DataBuffer

field gfxFont:Image

field gfxBG:Image

field chrStartOffset:Int

field firstChrWidth:Int

field chrEndOffset:Int

field x:Float

Method OnCreate()

canvas = New Canvas

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

gfxFont = Image.Load("font.png")

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

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

x = 0

chrStartOffset = 0

firstChrWidth = charWidth(0)

SetUpdateRate(15)

End

Method OnUpdate()

' Scroll the amount of width of the character in the font

If x < -firstChrWidth Then

chrStartOffset = chrStartOffset + 1

If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0

firstChrWidth = charWidth(chrStartOffset)

chrEndOffset = getTextEndOffset()

If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0

x = 0

Endif

x = x - 2 ' scrolling speed

End

Method OnRender()

canvas.PushMatrix()

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

canvas.SetBlendMode(BlendMode.Alpha)

canvas.DrawImage(gfxBG,0,0)

canvas.SetBlendMode(BlendMode.Additive)

' draw string to position x

drawString(x)

canvas.Flush()

canvas.PopMatrix()

End

' This function draws text from indexes

' chrStartOffset to chrEndOffset of the scrolltext string

Method drawString(x:Int)

Local xx:float

Local angle:Int

Local index:Int

Local len = SCROLLTEXT.Length()

Local chrs:Int[]

chrs = SCROLLTEXT.ToChars()

Local prevChrWidth:Int

For Local i:Int = chrStartOffset To chrEndOffset

canvas.DrawRect(x+prevChrWidth, (480 - FONT_HEIGHT) / 2, fontDat.PeekInt((chrs[i]-32)*4*2 + 4), FONT_HEIGHT, gfxFont, fontDat.PeekInt((chrs[i]-32)*4*2), 0, fontDat.PeekInt((chrs[i]-32)*4*2 + 4), FONT_HEIGHT)

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

End

' get character's width in pixels

Method charWidth:Int(offset:Int)

Local chrs:Int[]

chrs = SCROLLTEXT.ToChars()

Return fontDat.PeekInt((chrs[offset]-32)*4*2 + 4)

End

Method getTextEndOffset:Int()

Local chrs:Int[]

Local c:Int = chrStartOffset

Local textWidth:Int = 0

chrs = SCROLLTEXT.ToChars()

' Find the endoffset for a character to build a string

' that's width in pixels is at least 640 + first character's width

While textWidth < 640 + firstChrWidth

textWidth = textWidth + charWidth(c)

c = c + 1

If c > SCROLLTEXT.Length - 1 Then c = 0

Wend

Return c

End

End Class

For the font I’ve used my Font 2 PNG and its data file. Notice, that the update rate is only 15, change that to 60.

For the first time I made a text scroller in Monkey2 too. The result is in video below:

As you can see, the code is a little different:

Namespace myapp

#Import "<std>"
#Import "<mojo>"

#Import "gfx/bg.jpg"
#Import "fonts/DoctorJekyllNF.ttf"

Using std..
Using mojo..

Class MyWindow Extends Window

Const SCROLLTEXT:String = "                              Testing simple text scrolling code written in Monkey2...  Later it's time again for old school sine scrollers...                     "

Field bg:Image
Field scrollString:String
Field scrollX:Int
Field chrStartOffset:Int
Field firstChrWidth:Int
Field chrEndOffset:Int
Field font:Font
	
	Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )

		Super.New( title,width,height,flags )

		bg = Image.Load("asset::bg.jpg")
		font = Font.Load("asset::DoctorJekyllNF.ttf",80)
		
		scrollX = 0
		chrStartOffset = 0
		firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(0,1))

	End

	Method OnRender( canvas:Canvas ) Override
	
		App.RequestRender()

		canvas.DrawImage(bg,0,0)
		canvas.Font = font
		canvas.Color = Color.Orange
				
		If scrollX < -firstChrWidth Then
			chrStartOffset = chrStartOffset + 1
			
			If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0
			
			firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(chrStartOffset,1))
			chrEndOffset = getTextEndOffset()
			
			If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0
			
			scrollX = 0
		Endif
				
		canvas.DrawText(scrollString,scrollX,200)

		scrollX = scrollX - 2
		
	End

	
	Method getTextEndOffset:Int()
		Local c:Int = chrStartOffset
		Local textWidth:Int = 0
		
		scrollString = ""
		
		' Find the end offset for a character to build a string
		' that's width in pixels is at least 640 + first character's width
		While textWidth < 640 + firstChrWidth
			
			scrollString = scrollString + SCROLLTEXT.Mid(c,1)
			textWidth = textWidth + font.TextWidth(SCROLLTEXT.Mid(c,1))
			c = c + 1
						
			If c > SCROLLTEXT.Length - 1 Then c = 0
			
		Wend
		
		Return c
		
	End	
		
End

Function Main()

	New AppInstance
	
	New MyWindow
	
	App.Run()
End

Namespace myapp

#Import "<std>"

#Import "<mojo>"

#Import "gfx/bg.jpg"

#Import "fonts/DoctorJekyllNF.ttf"

Using std..

Using mojo..

Class MyWindow Extends Window

Const SCROLLTEXT:String = " Testing simple text scrolling code written in Monkey2... Later it's time again for old school sine scrollers... "

Field bg:Image

Field scrollString:String

Field scrollX:Int

Field chrStartOffset:Int

Field firstChrWidth:Int

Field chrEndOffset:Int

Field font:Font

Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )

Super.New( title,width,height,flags )

bg = Image.Load("asset::bg.jpg")

font = Font.Load("asset::DoctorJekyllNF.ttf",80)

scrollX = 0

chrStartOffset = 0

firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(0,1))

End

Method OnRender( canvas:Canvas ) Override

App.RequestRender()

canvas.DrawImage(bg,0,0)

canvas.Font = font

canvas.Color = Color.Orange

If scrollX < -firstChrWidth Then

chrStartOffset = chrStartOffset + 1

If chrStartOffset > SCROLLTEXT.Length - 1 Then chrStartOffset = 0

firstChrWidth = font.TextWidth(SCROLLTEXT.Mid(chrStartOffset,1))

chrEndOffset = getTextEndOffset()

If chrEndOffset > SCROLLTEXT.Length - 1 Then chrEndOffset = 0

scrollX = 0

Endif

canvas.DrawText(scrollString,scrollX,200)

scrollX = scrollX - 2

End

Method getTextEndOffset:Int()

Local c:Int = chrStartOffset

Local textWidth:Int = 0

scrollString = ""

' Find the end offset for a character to build a string

' that's width in pixels is at least 640 + first character's width

While textWidth < 640 + firstChrWidth

scrollString = scrollString + SCROLLTEXT.Mid(c,1)

textWidth = textWidth + font.TextWidth(SCROLLTEXT.Mid(c,1))

c = c + 1

If c > SCROLLTEXT.Length - 1 Then c = 0

Wend

Return c

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

In order the get coding going, you may download both the projects with all the data files. Password to download: scroller

Monkey programming language scrolling source codes 243.78 KB

Enter Correct Password to Download

Later it’s time to again for sine wave scrollers… 🙂

Have fun!

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”.