気になる実装チュートリアル

正規表現の基本をJavaScriptで実装するチュートリアル。

postd.ccに40行以内で正規表現エンジンを構築という、正規表現をJavaScriptで実装するチュートリアルがあります。ソースコードもhttps://github.com/nadrane/build-your-own-regexにあるので実装が上手くいかない場合、正しい実装を確認できます。元々はC言語の実装のようですが、JavaScriptを使っているので配列はslice関数で先頭とその他に分けられたりして簡単に実装できるようになっています。

React+Reduxで、TODOリストを作成するチュートリアル

Immutable.jsも使ったReact+ReduxのTODOリスト作成チュートリアルです。基本的な用語を押さえてからこのチュートリアルでTODOリストを作成して、どんどん機能を追加していくことで効率よくReact+Reduxが学べそうです。

p5.jsで2Dパーリンノイズを動かすにはコツがいります。

書籍Nature of Codeを買ったので最初の章をp5.jsで試してみました。2Dパーリンノイズを作ってみる課題があったのですが、書籍の書き方ではうまくいきませんでした。githubのサンプルコード(https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/tree/master/chp00_introduction)にも、サンプルはありませんが、Youtube動画でコーディングしていました。

See the Pen 2D perlin noise p5.js by dev001hajipro (@dev001hajipro) on CodePen.0

考え方

1.単純な二次元配列の要素の取得を考える。

横幅(width)を100px、縦幅(height)を100pxで考えると、2重のfor文で二次元配列の座標(X,Y)を求める事ができます。これはよくある実装方法なので難しくないです。

2.一行はRGBAが並んでいる事を考慮する

p5.jsのpixels配列は、1つの要素にRGBAがオブジェクトとして含まれるのではなく、R、G、B、A、がpixels配列の要素で連続で並んでいます。例えば、横幅5pixelで、縦幅2pixelの場合は、以下のような感じです。

このため、ピクセル単位で処理をしたい場合は、4単位で移動させるように、for文のステップ数を変更します。

3.画像は通常一次元配列

私たちはXY座標で操作するほうが簡単ですが、画像データは一次元配列でpixels配列も同様です。そのため、(1行の幅 * 行数) で現在行までの要素数を求めて、そこに現在のX座標を足します。

(1行の幅 * 行数) + 現在のX

p5jsが予約しているwidthグローバル変数はキャンバスの横幅、heightグローバル変数はキャンバスの縦幅を取得できます。これはちょうどcreateCanvasで指定した値です。また、今回の一行はRGBARGBARGBAのようになっているため4倍にする必要があります。

此処までで、各pixels要素であるRGBAにアクセスし、直接色を指定できるようになりました。以下はRGBA(255,0,0,255)を指定して、全てのピクセルを赤で染めるサンプルです。

4.Densityを考慮する

Retinaディスプレイや携帯電話の場合、より綺麗な画像を表示するためにPiexl per Inch(https://ja.wikipedia.org/wiki/Ppi)、所謂、画素密度が異なります。そのためpixelDensityで値を取得して、縦幅、横幅に掛けます。1行は、width*4*dになります。よって、(width*4*d)*yで、現在行数の要素数を求めて、それにxを加えることで、現在のピクセル位置が求まります。ゆっくり考えれば問題ありませんが、(width*4*d)*y*dみたいにしないように注意してください。

此処までで、高解像度ディスプレイの場合でも各RGBAを修正することができるようになりました。

5.横のノイズをリセットする

p5.jsでは、noise(x,y)を設定すると二次元のパーリンノイズを使うことができます。y=1の固定にして以下のコードを書きました。注意してほしいのは、noise(xoff)を1行単位でリセットすることです。つまり3行目のlet xoff = 0;のように書きます。

二重ループの前にxoffの変数定義をすると、パーリンノイズ関数は、xがずっと続いていると判断するため、意図したノイズになりません。

xoffが正しくない例

yoffも定義する

ここまでくればもう理解できたと思います。あとは、yoffを指定するだけです。

 

まとめ

p5.jsでのピクセル操作と2Dパーリンノイズを実装することができました。まずは、RGBA単位のピクセル操作をできるようにして、そのあとに高解像度を考慮して、最後に2Dパーリンノイズを実装しました。いちどにすべてをやろうとすると、どこが原因で表示できないのかが分からなくなるので、このような実装は、段階的にやったほうが良いようです。

フリッピーバードと簡単なピクセルアートの作り方

lessmilk

http://www.lessmilk.com/tutorials

ちょっとゲームのプロトタイプを作ろうとしたとき、画像にこだわってしまって作業が進まない場合があります。一度ちょっとしたピクセルアートの作り方を学ぶと無機質で単色の四角や丸の画像でプロトタイプを作る必要がなくなり、モチベーションが上がりそうです。

少しピクセルアートについて調べてみます。

 

Bejeweledを調べると歴史が見えて面白い

JavaScriptのゲームフレームワークPhaserは、海外でよく使われているためチュートリアルも豊富にあります。パズドラのほうが知名度があるので、パズドラ風チュートリアルといえばよいのでしょうか。。。それで、Bejweledを調べていくとアクティブ連鎖やファミ通のインタビューに関する記事を見つけました。

Phaserベースのゲームチュートリアル Emanuele Feronato

eman

http://www.emanueleferonato.com/ かなりの量のチュートリアルがあり、一度どんな記事があるか流し読みしてみると必要な情報が見つかるかもしれません。

パズドラ風ゲーム(正確にはBejeweled[びじゅえるど])の実装などもあるので、Phaserでゲームを作っている場合は参考になります。

 

TypeScriptでJavaScriptゲームエンジンPhaserを使うときの参考資料

phaser

http://www.photonstorm.com/tags/typescript

VisualStudioやVisualStudioCodeでTypeScriptを使う際にPhaserの型定義ファイルを読み込ませると自動補完が可能になりJavaScriptに比べると大幅に開発効率が上がります。ですが、やはりTypeScriptのユーザー数が少ないため分かっていない場合は環境構築だけでも面倒です。そんな場合は公式にチュートリアルがあるので活用しましょう。

 

Canvas上にボタンをJavaScriptで作成するチュートリアル

create_game_ui

Create a Game UI with the HTML5 CANVAS

Canvas上にボタンを作るのは、座標判定するだけなのでそれほど難しくありませんがスライダーなどをはじめて作るときはチュートリアルがあると、どこから実装してよいかのヒントになるため助かります。英語ですが、どうしても自前でUIキットを作る際には参考にできます。

Phaserで自機にジェット噴射を加えるサンプル

codepenでPhaserでプレイヤーの機体にジェット噴射をするサンプルを見つけました。パーティクルの画像が無くて表示がおかしくなっていますが、2Dシューティングゲームを作るときに参考にできそうです。