Canvas for HTML5 Opus Pub

Stephen · **Posted:** September 16th, 2017, 1:15 pm

Found a match 3 game example, using canvas and pure JavaScript, on Github: https://github.com/ypinskiy/CanvasExamples. Can be run, as is, by changing the paths in the match.html to the correct folder location of the JS and CSS.

So far, have gotten it into Opus HTML5, and working. But can't figure out enough of the JS in match.js to (1) center the game in the Opus window while keeping the game working and (2) to rotate the canvas + or - 90 or 180 degrees, etc. (make the game more interesting/challenging), whenever there's a match. Re: (1), there are ways to center the canvas but the "context" that is drawn into the canvas, like buttons on first screen and game circles (gems) on the second screen stop working.

Maybe a container for the canvas? Then the container, and all in it including the canvas, could be centered in the window, rotated, etc.?

Any suggestions for centering, rotating, while maintaining button and game circles, appreciated.

Best Wishes,

mackavi · **Posted:** September 19th, 2017, 10:29 am

How did you display it in Opus?

</mack>

Stephen · **Posted:** September 19th, 2017, 1:45 pm

HTML5Pub>Publish Settings>Advanced tab>HTML <head>Additions:

Code:

<html>
    <head>
        <link rel="stylesheet" href="match.css" type="text/css" />
        <title>Match 3 Canvas</title>
    </head>
    <body>
        <div id="container">
            <canvas id="foreground"></canvas>
        </div>
        <script type="text/javascript" src="lib.js"></script>
        <script type="text/javascript" src="match.js"></script>
    </body>
</html>

From Github repository: https://github.com/ypinskiy/CanvasExamples (clone or download)

match.css
lib.js
match.js

in published folder.

mackavi · **Posted:** September 19th, 2017, 3:49 pm

This is a path fraught with potential problems ... but here we go anyway ...

1. The canvas element is not on the Opus page element but is directly on the body element so it'll appear on top of your publication.

2. Because of above, you'll need to alter the position using the match.css file or inline code in the HEAD section of Opus.. or placing the element on the page might work..

3. The game uses hard-coded fixed mouse events. You'll need to edit all of these in the match.js - look at the mouseClickHandler function however you handle the above.

I think the rotation might be possible, but not as simple as simply rotating an element. At least on my version, the mouse co-ordinates are not translated - something else to think about.

</mack>

Stephen · **Posted:** September 19th, 2017, 4:31 pm

Hi Mack,

Thank you for these suggestions. Some previously tried without success.

-had previously unchecked "Align to Top of Page"
-had previously center-placed an HTML object in page and put code in it instead of publish settings.

Some progress re: centering, if I change the CSS:

Code:

canvas {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
} 
//etc.

The first screen (menu where you choose number of rows and columns), is centered but button selection is off. If you guess at the offset (to the left of each button approximately a few hundred pixels) and click there, a button for row and another for column can, by trial and error, be selected. Continue button then can be similarly selected by guessing at its left-side offset and, when this spot is located by trial and error and clicked, takes you to the second screen (game board). Game board is centered and works OK without any need for offset clicking.

Not sure, in light of this, what to try next or how to create a work-around?

One idea would be to hard-code a single row and column option, for example 7 X 7, and leave out the first screen's menu altogether: game would simply start on game board screen already populated with 7 rows and 7 columns. Not sure how to code this? But would be a solution.

Hmm...

mackavi · **Posted:** September 20th, 2017, 8:41 am

That's easy.

In the game object (line 11) properties change the state to start and the userSelectRows & columns to desired values.

Then after the first IF (line 25) of the draw function add the following:

Code:

game.grid = new Grid(300, 50, game.userSelectedColumns * 100, game.userSelectedRows * 100, game.userSelectedRows, game.userSelectedColumns, 0);

This line was taken from the mouse event function at the bottom of the script - it's triggered when the continue button is pressed. You should read this bit as you'll understand better why the menu doesn't work.

</mack>

Stephen · **Posted:** September 20th, 2017, 1:10 pm

Hi Mack,

Thank you.

Yes, that gets the game started. I'll play around with this.

(Yes, looks like the event handler uses canvas position offsets. So without getting these dynamically and including them, the menu buttons would be in the wrong position. Fixable?)

Probably the best option, if I can figure it out, is to use the Opus screen (add a new page before the game screen) to let the user set the rows and columns numbers.

Easier said than done. I've just tried this, but no easy way to add the user input before the HTML loads, displays the game. If I move the HTML to a second page HTML object instead of in Publish Settings where it loads instantly, then the second page gameboard oddly is off center again (offset even though the CSS centering was supposed to correct for this). Almost as though Opus loads the second page HTML offset to the right. Can't figure it out.

So, will keep trying to create a work-around to see if I can give the user ability to input rows and columns. If, not, looks like a hard-coded one size game, for now.

Rotation, over the horizon...

mackavi · **Posted:** September 20th, 2017, 4:12 pm

Easy that one...

1. Stick all the code in the match.js file into a function:

Code:

function runGame(){
//ALL THE CODE FROM THE MATCH.JS GOES HERE
}

2. In the game object, instead of hardcoding the row / column use _DWPub.rows & _DWPub.columns respectively.

3. In Opus, create two new number publication variables called rows & columns

4. Add button with script object and add the following code:

Code:

rows=4;
columns=4;
window.runGame()

And Voila!

</mack>

Stephen · **Posted:** September 20th, 2017, 4:51 pm

Very nice! Thank you.

Trying to figure out rotation after each match. Proving to be quite challenging. No joy so far. For example, have tried, without success, canvas rotation via JS canvas/context save/translate/transform/rotate/restore, etc.

One solution, but may not be possible, would be to get the gameboard canvas directly into Opus (create an Opus frame with the gameboard canvas in it), which could then possibly be rotated?

A bridge too far... :?:

Any suggestions welcome.

mackavi · **Posted:** September 21st, 2017, 5:19 pm

Stephen wrote:

One solution, but may not be possible, would be to get the gameboard canvas directly into Opus (create an Opus frame with the gameboard canvas in it), which could then possibly be rotated?

Was the original premise for using canvas :-)

Assuming your canvas application plays nicely, you would simply use the Opus HTML object and add a canvas tag with a corresponding ID to the getElementByID in the JavaScript file.

</mack>

Stephen · **Posted:** September 21st, 2017, 8:37 pm

OK, succeeded in putting the code into a page level HTML object (<canvas id="foreground"></canvas>), following your suggestions above. Game works OK.

But...So far, I've been unable to get the HTML object to rotate. Checking in Firebug, the object's name is HTML_3D.

If I insert a test button with script object, click the button, no rotation.

Tried a few scripts without success:

Code:

 HTML_3D.Rotate(90)

 _DWPub.HTML_3D.Rotate(90)

window.HTML_3D.Rotate(90)
//and same as above minus the D in 3D

Also tried using JavaScript object, different scripts. Also, no joy.
Not sure how to get the HTML object to rotate?

mackavi · **Posted:** September 22nd, 2017, 9:00 am

Nearly.

To access any of the Opus objects you put onto the page you first access the main object which is a child of the window object. As you rightly tried, this is _DWPub. Everything you need is a child of this somewhere.

One of the most important after _DWPub is the m_currentPage object which gives you access to objects, variables and your script functions on the active page. So we now have:

Code:

_DWPub.m_currentPage

Next you need the object on the page HTML_3D. So we now have:

Code:

_DWPub.m_currentPage.HTML_3D

Lastly, we need to access the method (function) we wish to perform on that object. In this case Rotate(90). So we have:

Code:

_DWPub.m_currentPage.HTML_3D.Rotate(90)

HINT: most browser debuggers also allow you to test code directly - look for the >> box. If you enter any part of the strings above followed by the period (.), you should see a list of available child objects and methods (functions) for the current (to the left of the period) object. This can help you check what's available.

</mack>

Stephen · **Posted:** September 22nd, 2017, 3:27 pm

Tried a test button with _DWPub.m_currentPage.HTML_3D.Rotate(90), but no rotation.

When I check in Firebug, there is Page_1>HTML_3 (with an element ID of HTML_3D) and there is also _DWPub>m_currentPage>HTML_3 (also with an element ID of HTML_3D).

Two separate mentions of the same object. (Maybe, I am loading the object twice?)

Tried the rotate script with all of these, but no rotation.

I must still be doing something wrong. :oops:

mackavi · **Posted:** September 22nd, 2017, 5:05 pm

Here's a very simple example of that line in action on a HTML object:

http://sandbox.interaktiv.co.uk/forum/rotate.zip

realised as I was building it, that the HTML_3D in the previous post is likely the name of the element and it should probably read:

Code:

_DWPub.m_currentPage.HTML_3.Rotate(90)

</mack>

Stephen · **Posted:** September 22nd, 2017, 5:29 pm

Thank you for the example. I was using an Opus script object not a JavaScript object.

Unfortunately, still wouldn't work in the more complex game screen, even using a JavaScript object and _DWPub.m_currentPage.HTML_3.Rotate(90). (Neither HTML_3 nor HTML_3D work.)

My suspicion is that, unlike the basic "rotate.imp" example, the game has multiple elements on the page, drawn into the canvas (grid, circle objects, etc.). So, once the game with its grid and circle objects is loaded into the canvas, the Opus HTML object holding it can no longer rotate. Not sure why, but seems so.

I thought it would be easier if the game was contained in an Opus HTML object as a canvas and the HTML object could be rotated. But, so far, can't rotate that HTML object once loaded with its game canvas. (Of course, there's always the possibility of a minor tweak making it run OK. For example, the TV static/TV noise animation of a couple of years ago in a canvas can be rotated successfully using the same strategy. The difference is that its canvas CSS is in the Opus HTML object and not in a separate CSS file. Not sure how to try this with the current game.)

The other option (or non-option) was to try to write a rotate function into the match.js, called each time there is a match. But, from what I've read, rotating a canvas can only be done before anything is drawn into it. Technically, not impossible, since there may be a redrawing after each match. But, would need to add the rotate function call between the match and the next clear rect and redraw. Nothing that I can figure out how to accomplish or script. So, would have been easier if only the Opus HTML object could be rotated after each match.

Whew!

Digital Workshop

Canvas for HTML5 Opus Pub

Who is online