Phina-pixi NPM

phina-pixi

Tomaxi

phina.jsの描画にpixi.js を使用するためのプラグインモジュール
Plugin module for phina.js to use pixi.js as rendering engine.

Example

Sample

In browser

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>phina-pixi sample</title>
</head>
<body>

<!-- load libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/phina-pixi@latest/dist/phina-pixi.min.js'></script>

<script>

// phina.globalize();

phina.define('MainScene', {
  superClass: 'phina.display.DisplayScene',

  init: function(options) {
    this.superInit(options);

    // Layer
    this.pixiLayer = phina.pixi.PixiLayer(options)
    // this.pixiLayer = PixiLayer(options) // when phina.globalize()
    .addChildTo(this)
    
    // Sprite
    phina.pixi.PixiSprite("logo")
    // PixiSprite('logo') // when phina.globalize()
    .setPosition(this.width*0.5, this.height*0.5)
    .addChildTo(this.pixiLayer);
  },
});

phina.main(function() {
  var app = phina.game.GameApp({
    startLabel: 'main',
    assets: {
      // Use dedicated loader
      pixi: {
        logo: 'https://cdn.jsdelivr.net/npm/phina.js@0.2.2/logo.png',
      }
    }
  });

  app.run();
});
</script>
</body>
</html>

As module

Install

npm install pixi.js phina.js

npm install phina-pixi

Usage

import * as phina from 'phina.js';
import {PixiLayer, PixiSprite} from 'phina-pixi';

phina.define('MainScene', {
  superClass: 'phina.display.DisplayScene',

  init: function(options) {
    this.superInit(options);

    // Layer
    this.pixiLayer = PixiLayer(options)
    .addChildTo(this)
    
    // Sprite
    PixiSprite("logo")
    .setPosition(this.width*0.5, this.height*0.5)
    .addChildTo(this.pixiLayer);
  },
});

phina.main(function() {
  var app = phina.game.GameApp({
    startLabel: 'main',
    assets: {
      // Use dedicated loader
      pixi: {
        logo: 'https://cdn.jsdelivr.net/npm/phina.js@0.2.2/logo.png',
      }
    }
  });

  app.run();
});