by triniwiz | v1.0.0-alpha2
Tools for using Phaser-ce to build native 2D games in NativeScript 👾
npm i --save nativescript-phaser-ce


Tools for using Phaser-ce to build native 2D games in NativeScript 👾


npm i nativescript-phaser-ce


Import the library into your JavaScript file:

import TNSPhaser from "nativescript-phaser-ce";

Functions{ canvas, renderer: Phaser.WEBGL || Phaser.CANVAS, ...extras })

Given a canvas from a TNSCanvas, return a Phaser.Game that draws into it.


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


Property Type Description
game Phaser.Game The Phaser-ce game used for rendering game logic


const 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 = () => {


Apache License Version 2.0, January 2004