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.

Unique Random Integers part II

November 13, 2017November 14, 2017 Markus

Last year I wrote about my clumsy implementation of unique random integers system, I’ve used in my Memorable Ladies games. In those the speed isn’t a critical factor. It’s sufficient that the idea works. 🙂

In this post the idea behind unique random integers is the same, but implemented in a faster way.

In the implementation I have used an array that consists of all desired integers and each is drawn in a way that the same integer doesn’t get drawn again. Let’s take a look at the code (I have used Monkey2 programming language in the example):

Namespace myapp

#Import "<std>"

Using std..

Function Main()

	Local index:Int
	Local amountNumbers:Int
	Local randomNumber:Int
	Local numbers:=New Int[](1,3,5,7,9,11,13,15,17,19,21,23)

	While (numbers.Length <> 0)
		
		amountNumbers = numbers.Length	
		index = Int(amountNumbers * Rnd(0,1)) Mod amountNumbers
		randomNumber = numbers[index]
		
		For Local i:Int = index To amountNumbers - 2
			numbers[i] = numbers[i+1]
		Next
		
		amountNumbers = amountNumbers - 1
		numbers = numbers.Resize(amountNumbers)	
				
		Print "Random number:" + randomNumber

	End While
	
End

Namespace myapp

#Import "<std>"

Using std..

Function Main()

Local index:Int

Local amountNumbers:Int

Local randomNumber:Int

Local numbers:=New Int[](1,3,5,7,9,11,13,15,17,19,21,23)

While (numbers.Length <> 0)

amountNumbers = numbers.Length

index = Int(amountNumbers * Rnd(0,1)) Mod amountNumbers

randomNumber = numbers[index]

For Local i:Int = index To amountNumbers - 2

numbers[i] = numbers[i+1]

amountNumbers = amountNumbers - 1

numbers = numbers.Resize(amountNumbers)

Print "Random number:" + randomNumber

End While

End

Image courtesy of nonicknamephoto at FreeDigitalPhotos.net

First an array is initialized with desired integers. Then an random integer from the array is fetched using random index inside the array. After that the numbers after the drawn number are moved to “left”. For the end the amount of integers is decreased by 1 and the array is resized by the new amount of integers. That’s it.

This way one gets always different random integer from the set of desired integers.

Furthermore, if one would like to get, for example, number four (4) to be drawn three times, one could just include 4 three times in the array.

Depending on what one is doing, one could keep a copy of the original array for future usage.

Although I have used Monkey2 as example programming language, it should be easy to implement similar implementation to many other programming languages quite straight forwardly.

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!

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.

Scaling ttf-font in Monkey2

October 9, 2017March 8, 2018 Markus

In Monkey2 programming language it is possible to load ttf (and otf & fon) font directly and use the DrawText method of canvas to draw the text. But how to scale the font? In this example I made today it is done in a clumsy way, but may give you some ideas…

The source code:

Namespace myapp

#Import "IMG_0648.JPG"
#Import "transparent.png"

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

Using std..
Using mojo..


Class MyWindow Extends Window
	
	Const RAD:Double = Pi / 180	' 1 degreen in radians
	
	Field gfxBG:Image
	Field gfxTransparent:Image	' Just an transparent image where the text is drawn
	Field fontCanvas:Canvas		' Canvas for transparent image
	Field scaleVar:Float
	Field scale:Float			' Text scale (scales the "gfxTransparent")

	Method New( title:String="Scaling font in Monkey2",width:Int=800,height:Int=600,flags:WindowFlags=Null )
		Super.New( title,width,height,flags )
		
		gfxBG = Image.Load("asset::IMG_0648.JPG")

		' Load a 100 x 48 transparent image
		gfxTransparent = Image.Load("asset::transparent.png")		
		gfxTransparent.Handle = New Vec2f(0, 0)

		' Make a canvas from the transparent image to render the text to...
		fontCanvas = New Canvas(gfxTransparent)
		fontCanvas.Font = Font.Load("asset::SpeedballNo2NF.ttf", 21)
		fontCanvas.Color = Color.Yellow
		fontCanvas.DrawText("Sample Text",(100 - fontCanvas.Font.TextWidth("Sample Text")) / 2, 1)
		fontCanvas.Flush()		

		scale = 1
		scaleVar = 0
	End

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

		canvas.DrawImage(gfxBG, 0, 0)
		
		scaleVar = scaleVar + RAD * 2
		scale = 4 - Sin(scaleVar) * 1.5	' This the scale (if scale = 1, no scaling)
				
		' The text is scaled and centered
		canvas.DrawImage(gfxTransparent, (800 - 100.0 * scale) / 2, (600 - 48.0 * scale) / 2, 0, scale, scale)

		canvas.Flush()
		
	End

End

Function Main()
	New AppInstance
	New MyWindow
	App.Run()
End

Namespace myapp

#Import "IMG_0648.JPG"

#Import "transparent.png"

#Import "<std>"

#Import "<mojo>"

Using std..

Using mojo..

Class MyWindow Extends Window

Const RAD:Double = Pi / 180 ' 1 degreen in radians

Field gfxBG:Image

Field gfxTransparent:Image ' Just an transparent image where the text is drawn

Field fontCanvas:Canvas ' Canvas for transparent image

Field scaleVar:Float

Field scale:Float ' Text scale (scales the "gfxTransparent")

Method New( title:String="Scaling font in Monkey2",width:Int=800,height:Int=600,flags:WindowFlags=Null )

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

gfxBG = Image.Load("asset::IMG_0648.JPG")

' Load a 100 x 48 transparent image

gfxTransparent = Image.Load("asset::transparent.png")

gfxTransparent.Handle = New Vec2f(0, 0)

' Make a canvas from the transparent image to render the text to...

fontCanvas = New Canvas(gfxTransparent)

fontCanvas.Font = Font.Load("asset::SpeedballNo2NF.ttf", 21)

fontCanvas.Color = Color.Yellow

fontCanvas.DrawText("Sample Text",(100 - fontCanvas.Font.TextWidth("Sample Text")) / 2, 1)

fontCanvas.Flush()

scale = 1

scaleVar = 0

End

Method OnRender(canvas:Canvas) Override

App.RequestRender()

canvas.DrawImage(gfxBG, 0, 0)

scaleVar = scaleVar + RAD * 2

scale = 4 - Sin(scaleVar) * 1.5 ' This the scale (if scale = 1, no scaling)

' The text is scaled and centered

canvas.DrawImage(gfxTransparent, (800 - 100.0 * scale) / 2, (600 - 48.0 * scale) / 2, 0, scale, scale)

canvas.Flush()

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Below is the video related to this post:

Feel free to use my code!

Scrolling of Picture Larger Than Visible Area in Monkey2

October 5, 2017March 8, 2018 Markus

I finally today made my first Monkey2 app. I think it was someday in September I finally noticed that Monkey X has evolved into hugely more advanced programming language: Monkey2.

As I wrote in previous post I have an unfinished game project in Monkey X Pro. I think think I’ll finish it someday in Monkey2… I have one other little project in my mind to be done in Monkey2.

This is why I decided to try to make my first Monkey2 program today. In my older post I wrote a short tutorial on scrolling a picture larger than visible area in Monkey X Pro keeping Android target in mind. In this post the same thing is written in Monkey2 to desktop.

The picture is scrolled with mouse, to change the code to touch screen, just change the mouse related code to touch related code.

Source code below:

' Scrolling of pre-loaded picture that is larger than the visible area in Monkey2
'

Namespace myapp

#Import "bg1280x960.png"
#Import "<std>"
#Import "<mojo>"

Using std..
Using mojo..

Class MyWindow Extends Window

	Field gfxBG:Image
	Field scrollX:Float
	Field scrollY:Float
	Field touchX:Float
	Field touchY:Float
	Field touchXD:Float
	Field touchYD:Float
	Field prevTX:Float
	Field prevTY:Float
	Field scroll:Bool
	
	Method New( title:String="Scrolling...",width:Int=800,height:Int=600,flags:WindowFlags=Null )
		Super.New(title,width,height,flags )
		gfxBG = Image.Load("asset::bg1280x960.png")
	End
	
	Method OnRender( canvas:Canvas ) Override
	
		App.RequestRender()

		If scrollX > 0 Then scrollX = 0
		If scrollX < -(1280 - 800) + 1 Then scrollX = -(1280 - 800) + 1
		If scrollY > 0 Then scrollY = 0
		If scrollY < -(960 - 600) + 1 Then scrollY = -(960 - 600) + 1
		
		canvas.DrawImage(gfxBG,scrollX, scrollY)
		
	End
	
	Method OnMouseEvent( event:MouseEvent ) Override
	
		touchX = Mouse.X
		touchY = Mouse.Y
					
		If Mouse.ButtonDown(MouseButton.Left) 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
		
End

Function Main()

	New AppInstance	
	New MyWindow
	
	App.Run()
End

' Scrolling of pre-loaded picture that is larger than the visible area in Monkey2

Namespace myapp

#Import "bg1280x960.png"

#Import "<std>"

#Import "<mojo>"

Using std..

Using mojo..

Class MyWindow Extends Window

Field gfxBG:Image

Field scrollX:Float

Field scrollY:Float

Field touchX:Float

Field touchY:Float

Field touchXD:Float

Field touchYD:Float

Field prevTX:Float

Field prevTY:Float

Field scroll:Bool

Method New( title:String="Scrolling...",width:Int=800,height:Int=600,flags:WindowFlags=Null )

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

gfxBG = Image.Load("asset::bg1280x960.png")

End

Method OnRender( canvas:Canvas ) Override

App.RequestRender()

If scrollX > 0 Then scrollX = 0

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

If scrollY > 0 Then scrollY = 0

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

canvas.DrawImage(gfxBG,scrollX, scrollY)

End

Method OnMouseEvent( event:MouseEvent ) Override

touchX = Mouse.X

touchY = Mouse.Y

If Mouse.ButtonDown(MouseButton.Left) 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

Function Main()

New AppInstance

New MyWindow

App.Run()

End

Video below demos the source (the text in the video is in video only, though):

https://youtu.be/U9DLogNGeoo

Below is a video from the mentioned older blog post written in Monkey X Pro to Android:

Feel free to use my code as you wish.

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…

3D Stars With Controlled Center Point

February 7, 2017September 26, 2018 Markus

Just little changes to old post on 3D stars with Mojo2… Now on the projection from 3D space to 2D space (screen), the center point can be controlled, just touch the screen or keep the left mouse button pushed down to control the stars… The code should compile as such to any target on Monkey X Pro.

Import mojo2
 
Function Main:Int()
	New MyApp
	Return 0
End
 
Class MyApp Extends App
 
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480
	Const STARS:Int = 280
	
	Global devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	
	Global x:Float[STARS],y:Float[STARS],z:Float[STARS]
 
	Field canvas:Canvas
	Field tx:Float, ty:Float
	
	Method OnCreate()
 
		devWidth = DeviceWidth()
		devHeight = DeviceHeight()
		
		scaleX = devWidth / BG_WIDTH
		scaleY = devHeight / BG_HEIGHT
 
		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()
 
		tx = BG_WIDTH / 2
		ty = BG_HEIGHT / 2
		
		SetUpdateRate(60)
	End
 
	Method OnUpdate()
		
		If TouchDown(0) > 0 Then
			tx = TouchX() / scaleX
			ty = TouchY() / scaleY
		Endif
			
	End
	
 
	Method OnRender()
		
		Local shade:Float
		
		' Scale the graphics
		canvas.PushMatrix()
		canvas.Scale (scaleX,scaleY)
 
		canvas.Clear()
				
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
			
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval x[i] / z[i] * 200 + tx, y[i] / z[i] * 200 + ty,3,3
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End
 
End Class

Import mojo2

Function Main:Int()

New MyApp

Return 0

End

Class MyApp Extends App

Const BG_WIDTH:Int = 640

Const BG_HEIGHT:Int = 480

Const STARS:Int = 280

Global devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float

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

Field canvas:Canvas

Field tx:Float, ty:Float

Method OnCreate()

devWidth = DeviceWidth()

devHeight = DeviceHeight()

scaleX = devWidth / BG_WIDTH

scaleY = devHeight / BG_HEIGHT

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()

tx = BG_WIDTH / 2

ty = BG_HEIGHT / 2

SetUpdateRate(60)

End

Method OnUpdate()

If TouchDown(0) > 0 Then

tx = TouchX() / scaleX

ty = TouchY() / scaleY

Endif

End

Method OnRender()

Local shade:Float

' Scale the graphics

canvas.PushMatrix()

canvas.Scale (scaleX,scaleY)

canvas.Clear()

For Local i:Int = 0 To STARS - 1

z[i] = z[i] - 1

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

' shade is 0..1

shade = 1 - z[i] / 200

canvas.SetColor shade,shade,shade

canvas.DrawOval x[i] / z[i] * 200 + tx, y[i] / z[i] * 200 + ty,3,3

canvas.Flush()

canvas.PopMatrix()

End

End Class

Source code license: Public Domain.

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: