妹と作る！ シューティングゲーム！

はじめてのonDraw

　例によって妹の由紀に呼ばれてリビングにMacBookを持ってきた。

「さてお兄ちゃん……今日は……」

「今日は？」

「図形を描いてもらいます！」

　もうグリグリキャラが動くのかと思ったので拍子抜けした。

「そんな大仰にいうようなことか？」

「何言ってるんですか！　重要なんですよ！　千里の道も一歩からっていうでしょう！」

「そ、そうか」

「とは言えまずは描画用のキャンバスが必要ですね。というわけで画面遷移から始めましょうか」

「がめんせんい？」

「これは簡単なので安心してください、描画用の画面に切り替えるだけです、まずは以下のように起動画面のウインドウのテキストが書いてあるところに書いてください、あ、クラスの中のsuperの下ですよ」

「superってなんだ？」

「まあその辺説明するのは大変なのでお約束として覚えといてください」

「これをコピペしてください」

-----------------

GameMain gm = new GameMain(this);

setContentView(gm);

-----------------

「なんか文字が赤くなったぞ！」

「まだGameMainを作ってないからですね、カーソルを合わせると赤い電球が出るのでそれをクリックしてください」

「よくわかんない英語が出た」

「難しくないので読みましょうね、今回はGameMainを作るを選んでください、MakeとかCreateとかそういう単語があるでしょう」

　よく読むとどうやらGameMainを作るという選択肢が出ている。

「あった！　クリックすると……なんか画面が切り替わったぞ！」

「新しくできたクラスの先頭にextendsっていう単語がありますよね、それの後をViewに変更してください」

「ああ、できたぞ、で、この後は？」

「まあそう焦らないでください、これからも必要なのでまずはクラスについて説明します」

「クラス？　この行の先頭についてるclassってやつか？　その前にpublicってついてるな」

「そう、それがクラスです。　Javaはクラスメインで作っていくので説明しますね」

「頼む」

「クラスっていうのは平たく言えば設計図です」

「設計図？」

「どんな数を持っているか……例えばライフとかですねprivate int Lifeでライフを持っていることになります」

「Lifeって名前にしないといけないのか？」

「いえ、作ってる側がわかればtairyokuとか極端な話aでもいいです、分かりにくいのでやめといたほうがいいですけど……」

「privateっていうのはなんだ？」

「これはこの値がどこから見ることができるかですね。さっきのコピペでgmのインスタンスができてますね、あれがクラスの実態です。要はgm.Life=1で書き換えばできればpublic、クラス内でしか使わないならprivateと覚えておけばいいです」

「ちょっといいか？　インスタンスってなんだ？」

「それは後で説明します。要はどこからでも読めるか、読めないかで区別します、ちょっと極端ですけどね」

「で、インスタンスですが、要は設計図から組み上がった実体ですね、例えば自動車があるとして、設計図に乗って時速100キロで走ることはできませんよね、走るには設計図ではなく設計図からできた自動車そのものが必要なんです」

「じゃあどうやって設計図から組み立てるんだ？」

「そこでnewを使います。これで実態ができるわけですね。ここではGameMain gmというのが本体を入れる変数で、GameMainの入るgmに new GameMain()で設計図から実態を作って入れています」

「できたぞ、ただなんも書いてないな」

「これから書くんですよ、まずはコンストラクタを書きましょう」

「コンストラクタ？　そういう名前を書けばいいのか？」

「いえ、コンストラクタはクラス作成時に自動で実行されるメソッドです。メソッドというのは、ええと……関数ともいうですけど要は命令ですね」

「さっきのnewでインスタンス？　だっけ？　その行で実行されるのか？」

「そうですそうです、なかなか飲み込みがいいですね、ではpublic GameMain(Context contest){}と書いてください」

「このコンテキストっていうのはなんだ？」

「その辺はandroid用のおまじないと考えておいてください、おまじないで済ますのは好きじゃないですけどPCとかで動かすときは必要ないですしandroid専用なので覚えちゃったほうが楽ですよ」

　触れなくていいことには触れずに済ませるようである。

「これでコンストラクタは完成か？」

「まずはこれもおまじないですけど{}の間に改行を入れてsuper(context);と入力して下さい、これも覚えちゃったほうがいいですね、これで本当に必要最低限はできました、動くことは動きますよ」

　そういうと由紀は自分のスマホを取り出してMacBookにつないだ。

　俺は昨日と同じく実行ボタンを押して実行する。

「真っ白だな、ていうか前回のHelloWorldすら消えたぞ」

「そりゃそうですよ、まだ何も書いてませんから、じゃあまずは図形を描きましょうか」

　どうやら画面が昨日作ったHelloWorldから白紙の画面に変わったらしい、もともと白かったのでわかりづらいのだが……

「ではまず、protected void onDraw(Canvas canvas){}というメソッドをコンストラクタの一つ外に書いてください、一番外じゃないですよ、クラスの{}の中には書いてくださいね」

「ああ、なんかプログラミングっぽいなこういうの」

「そうですね、こういうのばかりがプログラミング扱いされているのは不本意なのですが……」

「ところでこのprotected voidってなんだ？」

「protectedは気にしなくていいですよ、おまじないです、正確にはprivateとpublicの中間のアクセス許可なのですけど……使用頻度低いですしね」

「voidっていうのは？」

「このメソッドは値を返さないって意味です。他には整数を返すならint浮動小数点を返すならfloatやdoubleもありますね」

「値を返す？」

「要は計算結果を返すのが目的かどうかってことですね。例えばadd2(1);と書かれていれば1に2を足したものが帰ってくるわけですですからint a = add2(1);と書くとメソッドadd2、ここでは2を足したものが返ってくるわけです」

「あれそのくらいなら手動で計算すればよくない？　プログラムにやらせるにしてもint a = 1+2;じゃダメなのか？」

「ここではそれで問題ないですけど、例えば複雑な計算だったらどうですか？　台形の面積を求めるのに毎回area = ((bottom + top) * high) / 2って書きたいですか？　求めるたびに書くんですよ？」

「それはちょっと面倒だなあ……」

「後は一箇所変えれば全て変更できるってところですね、台形の面積を求めるのが別の図形になった時にメソッドの中身を変えるだけで対応できますしね、まあその便利さは追い追いわかりますよ」

「そういうもんか、そういやしれっと=が出てるけど左右が等しいわけじゃないんだな？」

「そうですね、右を左に入れるって意味ですね、等価か比較する言語もありますけど大抵の言語は代入ですね」

「数学とは違うんだな」

「数学の知識もあるに越したことはないですけどね、それでも大抵は三角関数くらいわかれば十分ですよ」

　自慢じゃないが数学は苦手だ

「うっへぇ……苦手なんだよなあ」

「今回はそこまで使わないから大丈夫ですよ、ではonDrawに戻りましょうか」

「あれ？　そういえばCanvasの文字が赤くなってる……」

「インポートの必要があるんですよ、その辺はIDEがよしなにやってくれるのでCanvasにカーソルを当ててAltかoptionキーと一緒にEnterを押してください」

　ちなみにMacではAltキーがなく代わりにoptionキーがついている。つまりoptionとEnterを押せばいいのか。

「あっ！　赤くなくなった！」

「これでそこのエラーは無くなりました、ちょっと前後しますがこのクラスの先頭にPaint p;と書いてください、ここからは赤字が出たらそこにカーソルを合わせてAltかoptionとEnterを押すように心がけてくださいね」

「このpってなんだ？」

「平たくいえば図形とかを書く時に使うペンの色とかの情報を入れるものくらいに考えておいてください、次にコンストラクタの先頭にp = new Paint()と書いてください」

「Paint()の実態を作るってことか？　でもPaintクラスなんて作ってないぞ？」

「Javaは標準でいろんなクラスが付いているので組み込まれたクラスの呼び出しになるんですよ」

「へー、そういうのが無い言語もあるのか？」

「Cなんかは本当に必要最低限しか用意されて無いですね、あるものは使っちゃったほうが楽ですし、どんどん使っていきましょう」

「Javaって楽なんだな！」

「好き嫌いはありますけど楽ですね。じゃあ次はonDrawメソッドの中にp.setColor(Color.BLUE);と書いてください。文面からわかりますけど要はpというペンの色を青にすると思ってくれていいです」

「setColorも組み込んであるのか？」

「そうですよPaintクラスの中に入ってます、見えませんけどね」

「なんでもあるんだな」

「では今日一番大事なところ行きますよcanvas.drawRect(300,300,600,600,p);とさっきの1行のすぐ下に書いてください」

「名前からするに300から600まで四角を書くのか？」

「そうですよ、察しの通りです。書けましたね、ではお待ちかねの実行をしてみましょう！」

　そういうと由紀はスマホをつないだ。俺は実行ボタンを押す。

「ふっふっふ……これがお兄ちゃんが書いたプログラムです！」

　そう言って差し出されたスマホには青い四角形が表示されていた。

「これを俺が書いたのか……なんかすごいな……」

「そうでしょう！　じゃあ今日はここでお開きです、図形を動かしたいところですけど、動かす処理は面倒になるのでまた今度にしましょう」

　こうして俺たちはお開きとなったリビングを後にした。

　俺が……作ったんだよな……なんかハッカーになった気分だ！

　こうして俺はどこかワクワクしながら眠りに就いた。