This post shows how to simulate a scratch off lotto number generator using the Construct 3's Drawing Canvas.
First off lets see the objects used.
Feel free to use the Mouse object instead, but Touch works on most all systems with it set to simulate the mouse controls.
I'll be using two layers to make this easier to work on.
You could just use one if you like.
As you can maybe tell the Sprite image is actually generated from A.I.
I did a bit of editing to make a black bar in my image editor. It's on Layer 0.
The text is also on that layer as we want to mask it with the Drawing Canvas which is on Layer 1.
I used a mesh on the Text to give it some perspective. I'll explain that later.
To mask the text I used the polygon in the drawing canvas. To figure out the coordinates you can use the corners of the deformed text mesh since they are displayed in the editor.
After you add the four points you then use the fill polygon action set to grey.
Now to make the canvas erasable we can set the drawing blend of DC to Destination out.
This means that any new texture added to the canvas will turn that area transparent.
Back in the editor I set the mesh with 2 by 2 points. Unfortunately doing anything other than a billboard distortion is super trickey with text due to its texture, and the fact we are using tri's.
Setting the mesh is done point by point as there is no way to do an automatic perspective transform... yet?
For our eraser we can simply fill an ellipse on the Drawing Canvas while the the user touches anywhere. Note you will want to set the canvas antialiasing in preferences all the way up. Also fixed mode would be a good idea.
If you would like to reset the mask and number without refreshing the game you can clear the canvas and refill the polygon since its still in memory, however you need to reset the drawing mode first. Then change it to erase after the fill.
Comments
Post a Comment