Recognizer

Installation

Preload an image in your scene preload for the brush with a key of recognizer-brush.

Create instance in a scene and pass the scene instance along with the required properties.

import { Recognizer } from '@phaserquick/recognizer';
import colorModel from '../data/color.model.json';
import dataModel from '../data/data.model.json';

export class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene');
  }

  preload() {
    this.load.image('recognizer-brush', 'assets/brush.png');
  }

  create() {
    const { width, height } = this.game.scale;

    const text = this.add.text(0, 0, 'Final Result', { fontSize: '500%' });

    const AllSymbols = [
      'h-line',
      'v-line',
      'zig-zag'
    ] as const;

    type Symbols = (typeof AllSymbols)[number];

    const recognizer = new Recognizer<Symbols>({
      scene: this,
      width,
      height,
      pointClouds: dataModel,
      colors: colorModel,
      brushSize: 20,
      multistroke: false,
      recognitionThreshold: {
        'h-line': 70,
        'v-line': 70,
        'zig-zag': 23
      },
      debug: true
    });

    recognizer.onDrawComplete((result) => {
      if (!result) {
        console.error(
          'Failed to recognize - enable debug and see console for more info.'
        );

        return;
      }

      const { name, score, time } = result;

      text.setText(
        `Final Result\n${name || 'no match'}\n${(score * 100).toFixed(
          0
        )}%\nTime:${time}ms`
      );
    });
  }
}