- Version: 1.0.0-alpha2
- GitHub: https://github.com/triniwiz/nativescript-phaser-ce
- NPM: https://www.npmjs.com/package/nativescript-phaser-ce
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
nativescript-phaser-ce
Tools for using Phaser-ce to build native 2D games in NativeScript 👾
Installation
npm i nativescript-phaser-ce
Usage
Import the library into your JavaScript file:
import TNSPhaser from "nativescript-phaser-ce";
Functions
TNSPhaser.game({ canvas, renderer: Phaser.WEBGL || Phaser.CANVAS, ...extras })
Given a canvas
from a
TNSCanvas
, return a
Phaser.Game
that draws into it.
Props
Property | Type | Description | Default Value |
---|---|---|---|
canvas | TNSCanvas | Required: canvas that the Phaser.Game will render to |
null |
renderer | number? | Optional: choose the renderer type e.g Phaser.CANVAS (1) , Phaser.WEBGL(2) | 1 |
width | number? | Optional: height of the Phaser.Game |
canvas height |
height | number? | Optional: width of the Phaser.Game |
canvas width |
title | string? | Optional: title of the Phaser.Game |
"tns-phaser-game" |
preventLoop | boolean? | Optional: Prevents the app from calling canvas.nativeView.flush() every frame |
false |
Returns
Property | Type | Description |
---|---|---|
game | Phaser.Game |
The Phaser-ce game used for rendering game logic |
Example
const game = TNSPhaser.game({ canvas });
What does it do?
Under the hood, TNSPhaser is maintaining global instances of a few libraries.
window.PIXI = require("phaser-ce/build/custom/pixi");
window.p2 = require("phaser-ce/build/custom/p2");
window.Phaser = require("phaser-ce/build/phaser");
Other libs can be included but are not required. For instance you can import the custom Creature lib the same way.
We also override the PIXI.WebGLRenderer.updateTexture
to make it compatible with NativeScript.
Finally when a new instance of TNSPhaser.Game
is created, we set the document.readyState
to 'complete'
and save the global instance of context
global.__context = context;
global.document.readyState = "complete";
Then we create a standard render loop and call canvas.nativeView.flush()
to flush the frame queue and render our context.
const render = () => {
requestAnimationFrame(render);
canvas.nativeView.flush();
};
License
Apache License Version 2.0, January 2004