Canvas for HTML5 Opus Pub

mackavi · **Posted:** September 22nd, 2017, 9:19 pm

No. The Canvas element is a singularity. All the circles, grids, etc drawn on to it are part of the canvas. It's not like the elements in HTML. It's like a real life painter's canvas - once you add the paint - the picture exists as the picture not the distinct parts. Rotating the parent element causes the picture (canvas) to rotate - I tried it by placing the HTML object in a standard Opus frame and using Opus' own rotate action.

Can you post a live link to what you have so far?

As for the rotate in the code, that's what I've done with my version. It turns out that once you rotate the canvas the first time subsequent draws are based on the rotated canvas. IE 90 degrees clockwise moves top left to top right. The code is:

Code:

    context.translate(canvas.width / 2, canvas.width / 2);
    context.rotate(Math.PI / 2);
    context.translate(-canvas.width / 2, -canvas.width / 2);

Basically, move rotation origin to centre, rotate 90 degrees and move origin back again.

</mack>

Stephen · **Posted:** September 23rd, 2017, 12:26 am

Hi Mack,

Can't successfully get rotation inside Opus (canvas as an HTML object) nor using the external JS plus keep the objects correctly selecting. As you will see in the linked IMP, off center if inside, no rotation in either inside or external, scoring, when matches occur, seems off (maybe too high). Ugh!

If I add the rotate code to the match.js as a function, not sure where to call it to cause a single 90 degree rotation following a match? The goal, to add some challenge/interest for the player, is to rotate the board (+ or -) after a match.

What I've noticed by experimenting by placing the function's location in a variety (of probably incorrect) places in the match.js is endlessly spinning rotation. Or, a single rotation that also has rotated the point score text as well. If I recall with getting a single rotation, another critical factor doesn't work: circle/gem selection by mouse is offset--clicking on an object selects another object that is in a different location on the board. If rotation can be solved, the game also needs to remain playable in that the correct object clicked needs to be selected correctly. Also score text box preferably would not also rotate. Seems impossible.

If the canvas inside the Opus HTML object were instead able to rotate after each match, and the object selection correctly working, maybe could move the score text display onto the Opus page so that it didn't rotate when the canvas rotated. Not sure if this is all possible, either?

Latest test IMP is at: https://elearningprojects.com/gametest.zip

mackavi · **Posted:** September 23rd, 2017, 6:37 am

The IMP doesn't load the game at all. There doesn't seem to be any code to link the scripts?

</mack>

Stephen · **Posted:** September 23rd, 2017, 12:56 pm

To load, add contents of match.html to

Publish Settings>Advanced>HTML<head>Additions

Files referenced then would need to be in published folder.

mackavi · **Posted:** September 23rd, 2017, 2:41 pm

That explains why the rotate doesn't work. That code includes another copy of the canvas tag which means the game is loaded into that element not the Opus HTML element. It may well be rotating - it's just empty.

Have looked again at the code and tried a few things, but I don't think that this version will bear much fruit without significant rewrites which at only 300 lines to start seems pointless. I don't want the amount of learning & work that has gone into trying to solve this to be wasted, so when it's finished you can use my prototype version for your project. It's a first attempt at canvas - so bear with me, but it does seem to work better than the other example.

You can have a play with the current beta:

http://sandbox.interaktiv.co.uk/canvas/match-three/

This version works with png images rather than simple draw commands. Each set contains eight different icons and the difficultly level is based on the number of icons you can use from each set. The larger the pool the less likely you are to find matches. Each set is in a sub-folder and you can have an unlimited number of sets. Each set also has it's own select icon (highlighting the first pick) and match icon used for showing runs. Two issue here:

1. The images need preloading.
2. Swapping options can sometimes display the previous pool for a fraction of a second.

The grid is in an Opus HTML object but all other on screen elements are Opus based. The grid should centre within the Opus HTML object when you select different sizes. One feature not yet looked at is handling the scaling of the grid within the HTML object and scaling in-line with the page if Opus uses resizing options. This means that at the moment, the game doesn't fit on smaller screens.

The game rotates using the code I posted early. This happens once the matches have been found and tiles replaced. This causes various issues / side effects:

1. Most noticeable is that the mouse co-ordinates are out - so the rotation must be tracked and the coordinates adjusted accordingly. Done.
2. Anything drawn on screen is rotated (Duh), but when you see the picture icons all upside down - it looked odd. Therefore, random icons in each set where already rotated to give a better appearance. This is optional.
3. At zero degrees, the default design of the game is that the icons are replaced top down. When rotation is applied, the replacement icons automatically appear from that direction. It's the same replacement as would happen at zero degrees.

Not yet implemented is anyway of checking if the game is playable / ended by calculating the number of potential matches available.

It's been tested on IE11, Edge, Chrome and Firefox under W10 and all seem happy. It also runs fine on an Android phone but the screen is too small.

</mack>

Stephen · **Posted:** September 23rd, 2017, 3:06 pm

Quite impressive! Let me know how I can help.

mackavi · **Posted:** September 25th, 2017, 5:53 pm

It just needs playing to spot any issues especially on different platforms and especially on Safari as I don't use iPad.

</mack>

Stephen · **Posted:** September 25th, 2017, 7:05 pm

Hi Mack,

Just tested on Android 10" tablet and 6" smartphone. Both worked well! 10" didn't really need any resizing; phone using pinch resized nicely and was fully playable.

Safari/iPad not available.

If possible, please send me (or post) JS, plus how to add to an Opus HTML5 pub. I'll first test further, spot/update about any issues, then, with your permission, adapt/use in my eLearning projects.

Thank you very much. Brilliant!

Kind Regards,

mackavi · **Posted:** September 27th, 2017, 7:34 am

Cheers,

It's still in beta. List of things to finish:

1. Potential runs. Started.
2. Issue with non square array.
3. Disabling of canvas update when Opus page not active.
4. Code comments.

</mack>

Stephen · **Posted:** September 27th, 2017, 1:36 pm

Hi Mack,

Re:

Quote:

3. Disabling of canvas update when Opus page not active.

Curious as to why canvas update needs to be disabled when page not active? In another pub some time ago had a screen flickering problem, but don't think I was able to stop this. Are you getting screen flickering in your testing? (I didn't get flickering in my Android FF or Chrome testing for your Beta.) Maybe another reason? In any event, is there a way to script stopping canvas updating, for example by using requestAnimationFrame?

BTW, commented, this new app would be a great introduction for the forum on using Opus, HTML5 canvas and JS to create a game. Plus applicable to building other similar pubs.

Best Wishes,

mackavi · **Posted:** October 4th, 2017, 2:25 pm

Disabling it, is applicable to any project not just an Opus one. Disabling it is simply ensuring that any loop that is used in the Canvas code does not continue to run when the canvas is not visible - IE you've changed pages.

There may be no loop, it might all be response to user input that runs the code. I actually think this match three game could be changed to work that way but I started on a resquestAnimationFrame bases which apparently is the preferred method for looping over timeout or interval but as there is very little refreshing required in this game - it could be called manually I think. But for now, the loop is fine.

I've updated the link example above. http://sandbox.interaktiv.co.uk/canvas/match-three/

1. Fixed the reason why irregular matrix didn't work so you can now create rows != columns.

2. This throws up another issue, that an irregular matrix does not work with rotation. This is a design implication, not a bug. For future reference, rotating translates the image on the canvas rather than the canvas. Thus an image of a rectangle the size of a rectangular canvas will be truncated if rotated.

3. Added notes to code.

</mack>

Stephen · **Posted:** October 4th, 2017, 4:00 pm

Thanks, Mack for the explanation.

It's working well.

Maybe, since rotation doesn't work when rows != columns, to eliminate those 'uneven' options? I'm guessing that this is something easily modified (also would need interface change).

I'm also guessing that the timing can also be tweaked to make checking, rotating faster.

Very nice! Impressive what you can do with Opus HTML5!

mackavi · **Posted:** October 4th, 2017, 5:05 pm

If you don't want the ability to have columns != rows, then you can simply pass the same value for both entries in the script configuration section so it'll always be square.

Yes, on timings. They are also changeable in the script configuration section. They are set at 2000ms, so can be speed up to almost instant.

I think Opus just make it really easy to step into HTML5. But I think it is really powerful when you understand how it fits into a modern work-flow.

</mack>

Stephen · **Posted:** October 4th, 2017, 5:36 pm

When it's ready, if possible, would like to play with the IMP and JS.

mackavi · **Posted:** October 5th, 2017, 9:05 am

Match Three - Opus & Canvas Mashup - Open Source version licensed under MIT.

download from: http://www.live.interaktiv.co.uk/?section=files

use code (copy & paste): match-three-v1.6@interaktiv.co.uk

</mack>

Digital Workshop

Canvas for HTML5 Opus Pub

Who is online