It seems, that someone had deleted the UFO graphics file from my online game Defense II. Now the UFOs are back. Instead of UFOs, there were only filled circles flying in the playing area.
My firewall plugin has recently blocked some IPs. I guess some people “have too much time”, that is: they have the time to do bad things to others.
Perhaps you should go to see this game and defend the neighborhood from UFOs. 🙂
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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 |
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.
I published yesterday Order the Chaos as online game. The online version is some kind of lite version of the original BlitzMax game.
The game has a bit simpler ending because of the limitations of HTML5.
The resolution of the game is 648 x 720 pixels.
Order the Chaos II — more polished version and with large (the playing area is scrolled) Mandelbrot mountains is of course available on itch.io.
The online version of Order the Chaos works with mobile devices, too.
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:
|
1 2 3 4 5 6 7 8 |
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:
|
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:
|
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:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
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!
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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 |
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.
Below is the source code in full:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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 Field scaleX:Float, scaleY:Float Field x:Float[STARS],y:Float[STARS],z:Float[STARS] Field canvas:Canvas Method OnCreate() scaleX = DeviceWidth() / BG_WIDTH scaleY = DeviceHeight() / 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() 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 320 + x[i] / z[i] * 200, 240 + y[i] / z[i] * 200,3,3 Next canvas.Flush() canvas.PopMatrix() End End Class |
Feel free to use this code.
The 3D stars are again embedded in this blog post and source code with old mojo is simplified.
The code is written in Monkey X Pro, which is nowadays available on itch.io.
Here’s the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
Import mojo Function Main:Int() New MyApp Return 0 End Class MyApp Extends App Const STARS:Int = 200 Field devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float Field x:Float[STARS],y:Float[STARS],z:Float[STARS] Method OnCreate() scaleX = DeviceWidth() / 640 scaleY = DeviceHeight() / 480 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() End Method OnRender() Local shade:Float PushMatrix() Scale(scaleX,scaleY) Cls For Local i:Int = 0 To STARS - 1 z[i] = z[i] - 1 If z[i] < 10 Then z[i] = Rnd(50,200) shade = 255 - (z[i] / 200) * 255 SetColor shade,shade,shade ' Projection from 3D space to 2D screen DrawOval(x[i] / z[i] * 200 + 320,y[i] / z[i] * 200 + 240,2,2) Next PopMatrix() End End Class |
Do use my code as you wish.
