Create Scratch like game on CANVAS

Phaser 3
1

good afternoon. In the examples, there is such a mini-game, scratch.:
https://phaser.io/examples/v3/view/game-objects/render-texture/scratch

Here, type: Phaser.Webgl is set in config. Is it possible to make the same game, but on Canvas?

2

1 Like
3

Thank you

4

I have an additional question: how can I determine that the top layer is completely erased (scratched) (or a certain part of it: 50%, 70%, 90%)? How do I detect that the player has erased the top layer and show it a picture or perform another action?

5

The codePen example does this:

handlePercentage(getFilledInPixels(32));

It basically checks every pixel, so for performance reasons it ‘strides’.

1 Like
6

I need some help as there are issues with both options at the moment. In the first case, if I use RenderTexture, the browser breaks: the screen is black, there is nothing in the console (and no errors), no button works, you can’t refresh the page (only restarting the browser helps). At the same time, the example on the first link works correctly in the browser.

What about the second example (links): do I understand correctly that Phaser supports all the tools that are available in the standard canvas as well? That is, you can integrate the code from the second link into the classes using the Phaser methods?

7

The first example doesn’t use a RenderTexture.
Both examples use a standard Canvas, so yes, Phaser supports exactly the same.
You can basically use the codePen example as is.

Maybe put your breaking code online somewhere.

8

I’m sorry, I made a mistake with the first link - I meant it:
https://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/erase%20part%20of%20render%20texture%20canvas.js&v=3.54.0#

9

Works for me.
To count pixels on a RenderTexture you would have to draw it on a CanvasTexture, so I think you’re better of just using a CanvasTexture.

10

First of all, I want to thank you again for your help.
If you don’t mind, let’s start from the beginning and in order. I need to create the following mini-game using Phaser 3. Starting data:

  • background image (not interactive)
  • character on Scene (this two images: the character itself and the black shadow on top (it is as if it is closed by it)). I attach an image for an example

The gameplay is as follows: when the player draws on the shadow of the character, the real image of the hero appears in this place, which is under the shadow (the player seems to erase the image).
New Project
When the shadow is completely erased (or most of it), a greeting pops up

How should I start? Thank you very much for any help

Upd. If I want to integrate the code from the example at the 2nd link (codepen), then I should use this - Phaser 3 API Documentation - Class: CanvasTexture. Am I right?

11

Yes. The first link (from the solution) already does this. You can just use that example.
Add the background to the scene.
Add your character to the scene.
Now create a CanvasTexture.
Draw your shadow on the canvas.
Add the canvas to the scene.
Now if you draw with the brush, the shadow will disappear.

1 Like
12

this.background = this.add.image(0, 0, ‘background’);
this.womanOwl = this.add.image(0, 0, ‘heroowl’);
const canvasText = this.textures.createCanvas(‘canvastexture’, 800, 600);

I started with this on my Scene. But an error appeared in the console: “Texture key already in use: canvastexture”. I didn’t use “canvastexture” anywhere else in the code

13

That doesn’t make sense :smile:
Create a CodePen, and login on Discord, then I can guide you through.

14

I have solved the problem with creating a canvas Texture, however this is just the beginning of my problems)) I created a codepen example on phaser 3 (copied the basis of another project):

I added a canvas Texture, created an image from base64 (as in the example on codepen) and am trying to draw this image. But nothing is displayed. I suppose the problem is exactly how I add the image, right?

15

Fork this example:

1 Like
16

It works! That is, I only needed to add the created canvas texture to the scene as an image (this.add.image)? Thank you very much!

UPD. And what it is necessary for this:

this. add. image(0, 0, ‘canvastexture’). setOrigin(0)

I know how setOrigin works, but here for some reason it has a different logic than the one I’m used to

17

If you don’t mind, we’ll continue. Now I need to make the image interactive. I can’t hang the addEventListener (addListener) on the canvas Texture that the block is drawn with, right? So I need to add interactivity to the block image itself? So that I can erase it and develop the image underneath it (which will be added later), right?

18

A forum doesn’t lend itself for quick back and forth.
Please continue on https://discord.gg/phaser