[JS]かわいくて楽しい!ピクセルベースの3Dグラフィックをウェブページで利用できるスクリプト -Obelisk.js

アニメーションでも動く3Dのピクセルベースのオブジェクトをウェブページで利用できるHTML5 Canvasをつかったスクリプトを紹介します。

サイトのキャプチャ

Obelisk.js -GitHub

Obelisk.jsのデモ

Obelisk.jsを使ったさまざまな楽しいデモが用意されています。
HTML5対応ブラウザでご覧ください。

サイトのキャプチャ

GIF Animation Rendering
映画のワンシーンを再現したアニメーション、要Chrome, Safari。

サイトのキャプチャ

Input Text Rendering
入力したテキストをレンダリングします。

サイトのキャプチャ

Pixel Isometirc Flappy Bird
ピクセルで描かれたFlappy Bird。

サイトのキャプチャ

Cube Generator
シンプルなキューブのジェネレーター、X, Y, Zのサイズを変更できます。

また、有志によるデモも充実。

サイトのキャプチャ

Github Contribution Chart Isometric View
GitHubのContributionをグラフ化。

サイトのキャプチャ

Online Voxel Builder
ピクセルアートをゼロから作成できるジェネレーター。

Obelisk.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="//path/to/obelisk.min.js"></script>
</head>

Step 2: HTML

オブジェクトを配置するcanvas要素を用意します。

<canvas id="canvas-demo" width="1500" height="400"></canvas>

Step 3: JavaScript

例えば、キューブだと下記のようなコードになります。

// get DOM or jQuery element
// like: $('#canvas-demo')
var canvas = document.getElementById('canvas-demo');

// create pixel view container in point
var point = new obelisk.Point(270, 120);
var pixelView = new obelisk.PixelView(canvas, point);

// create dimension instance
var dimension = new obelisk.CubeDimension(120, 200, 60);
// create color instance
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY);

// create cube primitive
var cube = new obelisk.Cube(dimension, color);
// create cube primitive wihtout border
//var cube = new obelisk.Cube(dimension, color, false);

// render primitive to view
pixelView.renderObject(cube);

Obelisk.jsの詳しい使い方は、チュートリアルが用意されています。

sponsors

top of page

©2018 coliss