Giter Club home page Giter Club logo

nativescript-pixi's Introduction

nativescript-pixi

The source is now managed at https://github.com/NativeScript/canvas

npm npm Build Status

Installation

npm i three nativescript-pixi

Usage

<GridLayout width="100%" height="100%">
         <canvas:TNSCanvas width="100%" height="100%" id="canvas" ready="onReady"/>
</GridLayout>
import * as PIXI from "pixi.js";
import { TNSPIXIApplication } from "nativescript-pixi";
// Create the Application by passing the canvas view object to it
 function onReady(args) {
   const canvas = args.object;
   const app = new TNSPIXIApplication({
           canvas,
           backgroundColor: 0x1099bb,
       });
       app.loader.add("bg_grass", "~/assets/images/bg_grass.jpg").load(build);
   
       function build() {
           // Create a new texture
           const texture = app.loader.resources.bg_grass.texture;
   
           // Create the simple plane
           const verticesX = 10;
           const verticesY = 10;
           const plane = new PIXI.SimplePlane(texture, verticesX, verticesY);
   
           plane.x = 100;
           plane.y = 100;
   
           app.stage.addChild(plane);
   
           // Get the buffer for vertice positions.
           const buffer = plane.geometry.getBuffer("aVertexPosition") as any;
   
           // Listen for animate update
           app.ticker.add((delta) => {
               // Randomize the vertice positions a bit to create movement.
               for (let i = 0; i < buffer.data.length; i++) {
                   buffer.data[i] += Math.random() - 0.5;
               }
               buffer.update();
           });
       }
}

E.G Output

IOS Android
ios) android)

E.G Output

License

Apache License Version 2.0, January 2004

nativescript-pixi's People

Contributors

triniwiz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.