2020年に出た本ですが、「ゲーム&モダン JavaScript文法で2倍楽しい グラフィックプログラミング入門」を読んだ感想です。

著者の@h_doxasさんはWebGL総本山などを運営しているWebGLに堪能な方で、その方が書いた書籍とのことを知って買ってやってみました。

自分はHTML・CSS・JavaScriptをやる前にProcessingでグラフィックプログラミングを始めたのですが、復習も込めてJavaScriptでグラフィックプログラミングをするこの書籍を読んでみました。

書籍の内容

この書籍で作るサンプルは5章〜7章がシューティングゲームで最後の8章が画像処理関係のサンプルになります。
両サンプルともJavaScriptでCanvasを用いて作成していきます。

最初にグラフィックプログラミングについての説明があり、JavaScriptの基礎やCanvas APIの使い方、グラフィックプログラミングに必要な数学の基礎を学ぶことができるので、JavaScriptの初心者や数学が苦手の人でも理解しながらコードを書き進めていけるかと思います。

実際に作るシューティングゲームもキャラを表示させたりとか、敵キャラの動き、衝突判定、ボスキャラの出現など1から進めていけば実際に完成させ遊ぶことができ達成感を得ることができるので実際に手を動かすことをおすすめします！

ゲームを作るには数学の知識が必須だと思いますが、三角関数・行列・ベクトルを使ってどうコードに落とし込むのかが勉強になりました。個人的には本書を読む前はベクトルをどう使えばいいかが今いちピンときてなかったのですが、ベクトルを使うことで自キャラと敵キャラの位置関係の把握ができたりなどゲーム作成での数学の活用法が分かって良かったです。
また、イージングの実装なども仕組みを自分で実装するので今後応用の効く知識が得られたと思います！

サンプルコードは全てにJSDocでコメント付きで書いてあり親切ですし、JavaScriptのclass構文を使ってオブジェクト指向的に書かれており読みやすかったです。

---

最後の8章は画像処理プログラムを実装するサンプルになります。
具体的にはネガポジ反転・グレースケール・2値化・エッジ検出・ノイズ除去・モザイク処理を実装します。

画像処理はCanvas APIのImageDataを使って画像のpixelデータを得て1pxずつ処理するのですが、その方法をJavaScriptで実装する方法が知れて良かったです。

これらのサンプルは画像処理の基礎なので、この本を読んで他の画像処理の実装もやってみたいなと思いました。

学べたこと

この書籍を読んで学べたことの一覧。

• JavaScriptのclass構文を使ったオブジェクト指向的なコードの書き方
• シューティングゲームの作り方
• ゲーム制作におけるベクトル(内積、外積)の活用方法
• イージングの仕組みと実装方法
• JavaScript Canvas APIを使っての画像処理プログラムの書き方

---

まとめ

「ゲーム&モダン JavaScript文法で2倍楽しい グラフィックプログラミング入門」の書籍紹介を書いてみました。

自分は今後WebGLを勉強したいと思っているのですが、最初から3Dグラフィックスを勉強するのは難しいので、本書のような2Dゲームを作ることでJavaScriptの基礎や数学の知識を学べて良かったです！

また、このブログで画像処理プログラムの解説をCanvas APIかWebGLで書きたいと思ってたので、その部分についても勉強できたのでよかったです。

JavaScriptでのゲームや画像処理、グラフィックプログラミングに興味がある方はぜひ読んでみてください！