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!

3D Stars with Mojo2

December 13, 2015May 2, 2016 Markus

As an example of using Mojo2 module in Monkey X, I wrote the 3D stars using Mojo2 module in Monkey X.

In earlier post the stars were made with the old Mojo. Mojo2 has lots of nice features to experiment with.

The code is compiled to HTML5 and result can be viewed here.

Below is the source code in full:

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 = 180
	
	Global devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	
	Global x:Float[STARS],y:Float[STARS],z:Float[STARS],sx:Int[STARS],sy:Int[STARS]

	Field canvas:Canvas
	
	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()
		
		SetUpdateRate(60)
	End

	Method OnUpdate()
		
		' Projection from 3D space to 2D screen
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
			sx[i] = BG_WIDTH / 2 + x[i] / z[i] * 200
			sy[i] = BG_HEIGHT / 2 + y[i] / z[i] * 200
		Next
			
	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
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval sx[i],sy[i],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 = 180

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

Global x:Float[STARS],y:Float[STARS],z:Float[STARS],sx:Int[STARS],sy:Int[STARS]

Field canvas:Canvas

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

SetUpdateRate(60)

End

Method OnUpdate()

' Projection from 3D space to 2D screen

For Local i:Int = 0 To STARS - 1

z[i] = z[i] - 1

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

sx[i] = BG_WIDTH / 2 + x[i] / z[i] * 200

sy[i] = BG_HEIGHT / 2 + y[i] / z[i] * 200

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

' shade is 0..1

shade = 1 - z[i] / 200

canvas.SetColor shade,shade,shade

canvas.DrawOval sx[i],sy[i],3,3

canvas.Flush()

canvas.PopMatrix()

End

End Class

Feel free to use this code.

HTML5 3D Stars

April 10, 2015February 3, 2016 Markus

The 3D stars used to be embedded in this blog post, but that caused this post to pop up as top most post, when clicking Blog from the menu. Now the stars are embedded here.

The code is written in Monkey X Pro, but you can use the same code directly in free Monkey X, that compiles to desktop or HTML5. With Monkey X Pro you could compile the same code also to Android among other platforms it supports.

Here’s the code:

Import mojo

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 = 180

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

  Global x:Float[STARS],y:Float[STARS],z:Float[STARS],sx:Int[STARS],sy:int[STARS]

  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

    SetUpdateRate(60)
  End

  Method OnUpdate()

    For Local i:Int = 0 To STARS - 1
      ' Decrease z
      z[i] = z[i] - 1
      If z[i] < 10 Then z[i] = Rnd(50,200)

      ' Projection from 3D space to 2D screen
      sx[i] = 320 + x[i] / z[i] * 200
      sy[i] = 240 + y[i] / z[i] * 200
    Next

  End

  Method OnRender()

    Local shade:Int

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

    SetColor 0,0,0
    DrawRect 0,0,BG_WIDTH,BG_HEIGHT

    For Local i:Int = 0 To STARS - 1
      shade = 255 - z[i] / 200 * 255
      SetColor shade,shade,shade
      DrawOval sx[i],sy[i],4,4
    Next

    PopMatrix()
  
  End

End Class

Import mojo

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 = 180

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

Global x:Float[STARS],y:Float[STARS],z:Float[STARS],sx:Int[STARS],sy:int[STARS]

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)

SetUpdateRate(60)

End

Method OnUpdate()

For Local i:Int = 0 To STARS - 1

' Decrease z

z[i] = z[i] - 1

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

' Projection from 3D space to 2D screen

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

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

End

Method OnRender()

Local shade:Int

' Scale the graphics

PushMatrix()

Scale (scaleX,scaleY)

SetColor 0,0,0

DrawRect 0,0,BG_WIDTH,BG_HEIGHT

For Local i:Int = 0 To STARS - 1

shade = 255 - z[i] / 200 * 255

SetColor shade,shade,shade

DrawOval sx[i],sy[i],4,4

PopMatrix()

End

End Class

Do use my code as you wish.