phina-dev-indicator

phina.js plugin which displays indicators to help development.

Features

Display scene grid!

Display gridX and gridY as lines.

Display hitarea!

Display specified properties!

Install

browser

<script src="path/to/phina.js"></script>
<script src="path/to/phina-dev-indicator.js"></script>

commonJS / ESM

npm install phina.js phina-dev-indicator

import * as phina from "phina.js"
import "phina-dev-indicator"

How to Use

The grid/hitarea display features are enabled by default! But if you want to disable them,

phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
    showGrid: false, // hide grid
    showChildHitArea: false, // hide hitarea
  });

  app.run();
});

or, just remove this plugin!

To display property, set the properties you want to display as string array to indicatedProperties

var logo = this.logo = Sprite("logo")
  .setPosition(this.width/2, this.height/2)
  .addChildTo(this);

logo.indicatedProperties = ["position", "scale", "origin", "width", "height"]