【ゲーム&モダンJavaScript文法で2倍楽しい】グラフィックスプログラミング入門を一読しました。

どうも。Reo です。

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB DB PRESS plus)を一読しましたので、紹介していこうと思います。

確定申告を終え、色々やりたいことややるべきことがある中、選ばれたのは本書でした。だって、こねこちゃんが手招きしてるんだもん。読むしかないじゃないか。

 

概要

楽しく遊べる2Dゲームの開発を進めながら，グラフィックスプログラミングの基本が学べる入門書。

一度習得すると，ゲームや映像生成，動的可視化をはじめ，幅広い分野で長く役立つグラフィックスプログラミングの基礎。

本書では，リアルタイムに動く画像を描くために求められる技術や考え方を平易に解説します。 開発言語として，エディタとブラウザがあれば開発ができるJavaScriptを採用し，すぐにスタートできる構成が特徴です。 豊富な図解に加え，いまどきのJavaScript（ES2015準拠）の基本文法，これだけは知っておきたい数学知識も厳選収録。

一線の開発者による，現場で活かせるやさしい実践解説です。

 

「ゲーム&モダンJavaScript文法で2倍楽しい」と書いてあるように、あらゆるフレームワークはでてきません。Vue.js？React.js？Angular.js？どれでもないです！

私は Pure とか Vanilla とかいう言い方をしますが、ピュアでバニラな素の JavaScript で書かれています。

なにか特別なライブラリ等も最初から最後まで出てきません！

 

目次

1. [入門]グラフィックスプログラミング - 長く役立つ基礎の基礎
2. [グラフィックスプログラミングで役立つ]JavaScript/ES2015入門 - 開発環境から文法基礎まで
3. [基礎]グラフィックスプログラミング入門と数学 - 三角関数、線形代数、乱数&補間
4. Canvas2Dから学べる基本 - Canvas2Dコンテキストと描画命令
5. ユーザーインタラクションのプログラミング - ゼロから作るシューティングゲーム❶
6. キャラクターと動きのプログラミング - ゼロから作るシューティングゲーム❷
7. 状態に応じた判定や演出のプログラミング - ゼロから作るシューティングゲーム❸
8. ピクセルと色のプログラミング - ピクセルを塗る操作と感覚

全8章の構成となっています。

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB DB PRESS plus)

 

素のJavaScriptでCanvasに描く！

普段、技術書は購入前に目次や発行日を確認してから買うようにしているんですが、今回はTwitterで発売前から追っていたので、発売日前に本屋さんで見つけて即購入しました。（フラゲ）

読み始める前は以下のように考えていました。

• JavaScriptで書かれているらしい。モダンJavaScript文法ってなんだろう
• Canvas API っていう API を使うらしい？
• なんかシューティングゲームを作れるらしい
• 数学的な話があるらしい

読んだ後は大体以下のような感じ

• めっちゃ素の JavaScript だ！何も入れずにできちゃう！！
• Canvas API はで描画するやつで、特に何も入れなくても動くぞ。
• シューティングゲーム作った！

めちゃくちゃ素の JavaScript でした。 jQuery とかも出てきませんよ。

私は、素の JavaScript なら少しかけるので、むしろ結構知ってることが多かったなーという印象でした。でも真面目に勉強したのも何年も前ですし、完全に今はオレオレで書いてるんですよね。

なのでかなり勉強になりました。例えば、JavaScriptってプロトタイプベースなんだって今更知りました。クラスもクラスって名前ついてるけど、普段触ってるクラスとは違うんだ...！ってのが驚きでした。知らないで書いてた。

 

1~3章の感想

1章でグラフィックスプログラミングとはなんぞや？どういう場で活躍してるの？といったお話から入ります。Processing が出てきたり、グラフィックスAPIである DirectX や OpenGL のお話が出てきたり。

本書は1章と8章だけカラーになっていて、1章はカラー写真が載っています。ジェネラティブアートの写真とかも載せられていたり。

2章は JavaScript(ES2015) の文法です。自分はこの章では特に目新しいことはなかったですね。ので結構サクッと流し読みぐらいで読みました。

3章は数学のお話です。

ラジアンやsinやcos、ベクトル、行列等が出てきます。数学は大学受験でⅢCまでやっているけれど、忘れているし、こうやって本でプログラミングと合わせて勉強したのは初めてかもしれません。

3章は結構じっくりと読みました。プログラミングをやり始めて数年、この辺の知識を使う必要があった場面は度々ありました。ツール系のアプリを作っている時ですら使う時があるので、間違いなく勉強していて損はないです。ゲームやアートの分野でプログラムを書く場合には、さらに必要になってくるでしょう。

終始丁寧なのでとてもわかりやすかったです。雰囲気で計算式を書くのはもう終わりだ...！

 

しかし実際に計算式を暗記するというより、それが何を示すか、それで何を求めることができるのかを覚えておくことが大切だなぁと感じ、なんか手帳にメモってあります。

 

4章の感想

4章からようやく実際にファイルを用意して書いていきます。

サンプルコードが充実しているので、そちらを見ながらCanvas2Dを用いて基本を学んでいきます。

丸を描いたり、四角を描いたり、線を描いたり...そういう基本的な図形をcanvas上に描いていきます。

コードに丁寧なコメントがついているので、とてもわかりやすいです。本書全体を通して、本当にコメントが丁寧です。1行ごとに説明があるのでもうめちゃくちゃ丁寧です。

 

5章〜7章の感想

シューティングゲームを作ります！作りました！

久々に本を見ながら写経をするってことをしました。

https://uruly.github.io/shooting-practice/ にて実際に写経したものを公開しているので、遊んでみてください！画像・音源等はそのまま使わせていただいています。改造はしてないですが、ちょっとするかもしれないです。

 

実際に4章で作ったCanvas上に図形を描くためのクラスを使用しているので、そこまで順々に読んでいる前提です。

シューティングゲームの実装を通して、前章までに学んだことをフル活用させていきます。ラジアンを使って回転させたり、ベクトルを使って向きの計算をしたり、衝突判定を計算したりします。

良かったところ

やっぱりゲームができていくって楽しいんですよ！シューティングゲームを作るのは初めてかもしれないです。

特に良かったなと思うところは以下です。

• 爆発エフェクトづくりたのしい！
• 自機狙いつよい！
• シーンの作り方がとても勉強になった！

ちょっと遊んでみてほしいんですが、爆発エフェクトは第4章で作ったクラスを用いて、画像を使わずに実装をしています。エフェクト作り、とても面白いかもしれない...！

あとは、1つのページ上でシーン作りをしていくことになるわけですが、このシーン作りが良かったですね。

登場シーン→実際に操作できるシーン→ボス戦→ゲームオーバー ... この切り替えがとても参考になりました。

 

少し気になったところ

写経するにはちょっと向いてなかったなって思いました。

というのも、本書だけを追っても変更点がちょっとわかりづらかったですし、全ての変更を載せられているわけではなく、重要点の抜粋をして説明をしているので気づいたら増えているところがありました。

initializer で初期化するところや宣言するところがいつの間にか増えているといった感じです。

そして JavaScript はまぁなんというかエラーがわかりにくい！タイポしてるところもわかりづらいし。エラーも出してくれないし...。

計算式の height をタイポして、hieght になっていて、期待通りの表示にならないけどエラーも起きないみたいなのが結構あって、うわ、JavaScript やりづらいなって思いました。写経って意外と難しいですね...。

なので写経するってやり方をするよりは、引数を変えてコードをいじりながらどう変わるかをみながらやるといいかもしれません。サンプルコードは本当に充実しているので。

 

あと、ローカルサーバーを建てずに作業をしていたんですが、それだと音声ファイルが読み込めないんですね。

先ほどサンプルのREADMEをみて、ようやく注意書きがされていることに気がつきました。

## サンプルの実行に関する注意事項 一部のサンプルについてはローカルサーバーの起動が必要になります。 具体的には、シューティングゲームのサンプルのうち `stg/022` 及び `stg/023` は、音声ファイルを再生する処理が含まれているため、ローカルサーバーを起動してサンプルを実行しないと正しく動作しないようになっています。また、本書の第８章で扱う画像処理のサンプル全般では、画像ファイルを読み込んだあとに JavaScript で加工する都合から、同様にローカルサーバーを利用してサンプルを実行する必要があります。 ローカルサーバーを利用したサンプルの実行方法については、本書の第８章に説明がありますので参考にしてください。

 

多分完成してから気づいちゃったパターンのやつなんだろうな。 8章にて言及されているので、その部分をゲームを作り始める前に置いてくれても良かったなぁと感じました。

あとは本書全体を通して、余白がないんですよ。みっちり。空きスペースがあればコラムが入る。とっても良いことなんですが、図6.1 とかがすごい遠い位置にあって探しながら読んでました。紙面では結構難しい問題だなぁとは思うんですが。

文章の途中にコラムが来て、一旦集中が切れてしまうというか、そういう感じはありましたね。

 

最後が駆け足になってしまうのはしょうがないですね。ちゃんとサンプルコードを追って完成させたけれど。

あと、初手で書いてすぐ使われなくなったコードがいつまでも残ってて、抜粋されるときも残り続けていてチョット笑ってしまった。let nowTime(Date.now() - startTime) / 1000 の部分なんですけどもももも

 

8章の感想

8章は画像処理の話です。画像をグレースケールにしたり2値化したりします。

これもCanvas2Dを用いているので、特別に何かライブラリ等をいれることはありません。

本音を言えば、こっちの方をメインに書いて欲しかったかもしれないですね。おまけみたいになっちゃってるけど、本当は余裕で本1冊なんて書けてしまう分野でしょうし。

でも、構成としてはこれで正解なのかなぁ。8章がシューティングゲームを作る前に来ていたら、せっかく勉強した数学を忘れた状態でゲーム製作に取り掛かることになるし。

でも、ここもわかりやすくて面白かったです。画像処理ちゃんと勉強したいな。

 

おわりに

いやー。面白かったですね。

久々に、写経をして初心にかえって勉強しました。わりとよく初心にかえってる気もするけど。

フラゲをする私。巻末 初版 2020/01/31 になってるんだけど16日に入手している...！（たしか発売日は19日とかだった気がする）

https://twitter.com/uruly\_xyz/status/1217720451994009601

表紙のこねこちゃんが好きすぎるの... もはやグッズとして買ったといっても過言ではない。

早々に読めて良かったです。結構詰んでる本が何冊もあるんですが、一番趣味に近いものを優先してしまいました！

 

まぁでもグラフィックスプログラミングっぽいことをしたかというと、そこまでしてない気がするんですよね。

間違いなくそうではあるんだけど、ゲームを作ることで想像しているのとは少し違ってしまう感じがしてしまうんですよね。それこそ8章の画像処理部分から膨らませていくような、そういうものを想像してしまうというか。

なので、あくまで入門書ですねえ。

物足りないなって思うのは、私が JavaScript チョットデキル人でその辺の知識もゼロではない人だからだと思います。

むしろ、完全な初心者だとちょっと難しいかもしれないです。

エディタはVSCodeいいよとは書いてありますが、導入の仕方は書いてないので、完全初心者よりは少しコードを書き始めたぐらいの方にオススメです！

 

今更素のjs？なんてことは絶対にないはずなので。

あとは全体を通してJavaScriptで書かれているだけで、他の言語にも役立つ知識です。それこそ書き方が少し違うだけで、計算式が変わることはよっぽどないでしょうし。

説明も丁寧ですし、表紙も可愛いし、作れるものも楽しいのでオススメです！

 

全然どうでもいいけど、数年分くらいのfor文を書きましたね...。for(let i=0;i<10;++i)の書き方が死んだ界隈にいるので...。

それではでは〜。次は何を読もうかな。

[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ――リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB DB PRESS plus)