nativescript-phaser
by Osei Fortune | v1.0.0-alpha2
Build awesome 2D games with Phaser.js and NativeScript
npm i --save nativescript-phaser

nativescript-phaser

Tools for using Phaser3 to build native 2D games in NativeScript 👾👾

Installation

npm i nativescript-phaser

Usage

Import the library into your JavaScript file:

import TNSPhaser from "nativescript-phaser";

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 Phaser3 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.Phaser = require("phaser");

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