# phina-gl2d

> phina.js simple sprite rendering plugin using webGL

Latest version **0.2.1** (published 2019-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install phina-gl2d
pnpm add phina-gl2d
yarn add phina-gl2d
bun add phina-gl2d
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-04-11 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 60.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | pentamania |
| Maintainers | pentamania |
| Keywords | phina.js |

## Links

- npm: https://www.npmjs.com/package/phina-gl2d
- npm.io page: https://npm.io/package/phina-gl2d

## Dependencies (1)

- [phina.js.d.ts](https://npm.io/package/phina.js.d.ts.md) github:negiwine/phina.js.d.ts

## Recent versions

- 0.2.1 (latest) — 2019-04-11
- 0.2.0 — 2019-04-08

## README

phina-gl2d
===

SpriteクラスをwebGL描画するphina.js用簡易プラグインです。

[サンプルシューティングゲーム](https://github.com/pentamania/toma-shooting)

## Usage
phina.gl2d.GLLayerクラスのインスタンスを生成し、そこにSpriteを追加するだけでOKです。  

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>phina.gl2d sample</title>
</head>
<body>
  <script src='path/to/phina.js'></script>
  <script src="path/to/phina-gl2d.js"></script>

  <script type="text/javascript">
    phina.define("MainScene", {
      superClass: "phina.display.DisplayScene",

      init: function(param) {
        this.superInit(param);
        this.glLayer = phina.gl2d.GLLayer(param).addChildTo(this); // <- here

        this.player = Sprite('player').addChildTo(this.glLayer);
      },
    });

    phina.main(function() {
      var app = phina.game.GameApp({
        assets: {
          player: "./assets/player.png"
        },
        startLabel: 'main',
      });

      app.run();
    });
  </script>
</body>
</html>
```

## CDN
jsdelivrで配信してます [https://cdn.jsdelivr.net/npm/phina-gl2d/dist/phina-gl2d.min.js](https://cdn.jsdelivr.net/npm/phina-gl2d/dist/phina-gl2d.min.js)

### Note
同じテクスチャ由来のSpriteクラスはバッジ処理してドローコールを節約するよう設計されています。  
なので画像を一枚にまとめ（スプライトシート化）、スプライトが全て同じテクスチャ由来となるよう調整すると、最もパフォーマンスがよくなります。

## Inspired by
- [pixi.js](http://www.pixijs.com/)
- [phigl.js](https://github.com/daishihmr/phigl.js)

---
_Source: https://npm.io/package/phina-gl2d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
