Androidアプリでキャラクターや画像を動かす方法 はじめてのAndroidアプリプログラミング日記4

Android Studio プログラミング4 キャラクターや画像を動かす

早くも三日坊主という言葉があるように、4日目はさすがにやる気が起きません。「三日坊主」という言葉はあながち嘘ではなくて脳に何か科学的な秘密が隠されていそうです。さておき、4回目の今回はスマホのAndroidのアプリの背景に画像を表示する方法を学習しました。勉強に使っている本は蒲生睦男先生（といっても誰だかまったく存じ上げません）の「中学生でもわかる Androidアプリ開発講座」改定2版です。

目次

• 背景画像の表示方法
• キャラクターを動かす方法
• 背景に動く画像を挿入する方法
• アイテムを動かして表示する方法
• 右から左に移動するアイテムを円で描画する
• きょうの結論
• バックナンバー

背景画像の表示方法

AndroidのプログラミングではJAVAという言語を使って各「クラス名.java」ファイルにそれぞれの部品を組み立てていくというところまではまったくド素人の私にも理解できるようになりました。画像に関しては「〇〇（部品がわかりやすい名前）View.java」という言葉をファイル名に使うと便利みたいですね。教科書では画面の表示に関するクラスを「GameView.java」というファイルに書き込みます。今回も手順通りに本の内容をファイルに書き込んでみたいと思います。

googleのAndroid Studioというアプリケーションを立ち上げ前回まで使用していたプロジェクトを開きました。間違えないようにしたいのが赤い四角で囲ったタブです。私は前回、別のファイルに書き込んでいて全然気が付きませんでした。

このタブの中のページにコードを書き写して（本は各自用意してね！）エミュレーターで再生してみたいと思います。再生前にテキストの画像を「res」フォルダの「drawable」にコピペしておきました。以下のような空と山の背景が表示されました。

はじめて本の通りにするだけでスマホに画像を表示できました！ちょっとした感動です。しかしこれでは前回表示したヘリコプターの画像が見えません。どうやら命令文を書いた順番に問題があるようです。  canvas.drawBitmap(画像名など,  null);というところの順番をヘリと入れ替えて、上の行に背景画像が来るように変えてみました。

これでプレイキャラが背景の上に表示されました。

キャラを動かす方法

次はキャラクターを動かす方法を学びます。本のページは106ページのLESSON16です。画像を動かすにはアニメのセル画ように一枚一枚微妙に異なる画像を用意して、一定間隔で交互に表示させることであたかも動いているかのように見せかけます。キャラクターを画面上で動かすには「タイマー」という機能を使うそうです。今回編集するファイルは「MainActivity.java」というファイルです。文字を書き込むタブを間違えないようにしなければっ。

はじめの「import java.何とか」という宣言文みたいなところに三個部品を追加しました。まだ私はこの呪文が何か全然わかっていませんが、ここに何の部品を使うかあらかじめ宣言するということは何となくわかりました。どのように使うかは下の行にそれぞれ書くみたいです。「ハンドラ」というものを作って「描画間隔」を指定するそうですね。「Timer」という言葉を使うらしいです。よくわかりませんが入力してタイマーを作成してみました。

Activityクラスでタイマーを作成した後はViewクラスを編集します。アニメーションは「配列」という方法を使って順番に表示させることであたかも動いているかのように表示させます。配列は「0」からスタートするそうです。「new」というのは演算子というそうです（意味わかりませんけどね）。「frameIndex++」というのは画像を配列の順番に取り出す処理らしいです。

入力し終えたらエミュレーターで再生して動きを確認します。5秒ほどですが動画で撮影してみました。

背景に動く画像を表示する

さらに、アプリの背景で画像（雲）を動かすレッスンを学習しました。まずは動かしたい画像をフォルダからコピーしてAndroid Studioのdrawableにペーストしてコードを記述します。入力が終わったらエミュレーターで再生して動く雲が見えたら成功です。

アイテムを動かして表示させる

次は描画クラスというものでアイテムを動かしてみます。「Canvas」クラスの「drawCircle」メソッドで描画メソッドを使います。テキストの120ページのLesson18を学習しました。筆者の現在の状態はバッチリ勉強したというわけではなく、言語の意味はほとんど理解していない状況です。とりあえず「View」クラスを開いて入力しました。

右から左に移動するアイテムを描画する

テキストの120ページのLESSON18ではゲームの的みたいな赤い〇のアイテムをスマホの画面の右から左にランダムに表示させるプログラムを作ります。この方法にはCanvasクラスのdrawCircleというメソッドを使うらしいですが、あいにくプログラミングド素人の私には何のことかまだ意味がチンプンカンプンなので本に書いてある通りにコードをタイピングして入力しました。この段階で少しわかってきたことがありまして、コードを書き写す際には、一行書いたら本を見て字が間違っていないか確認すると割と入力ミスを発見しやすくなりました。冒頭のimport.何とかという宣言文みたいなものは「このような部品を使いますよ～」という風に私は解釈しています。private何とかというのは、このファイルの中でのみ行われる処理というように今はいったん解釈することにしました。「new」という文字についてはまだ理解できていません。canvas.draw何々～というところはスマホの画面にグラフィックを描写するんだなとわかりました。

エミュレーターで再生して結果を確かめます。再生の様子はどうやらFlashじゃないとみられませんので高セキュリティーの端末ではごめんなさい。Chromeで閲覧の場合はFlashプラグインの許可サイトに[*.]digiota.blogspot.comとご入力ください。ちなみに私のパソコンにFlashはインストールしてません（笑）動画は5秒しかありませんのでYoutubeに正式に動画をアップロードするほどの動画じゃないので見れなくても無問題です！

中学生でもわかる Androidアプリ開発講座
Amazon 楽天ブックス

きょうの結論

きょうの段階でもまだどんな呪文が何のためにあるのか理解する余裕すらありませんでした。日常の中でプログラミングを勉強するのは「まるで仕事をしているみたい」でどうもまだ楽しいという気持ちが湧いてきません。プログラミングといえばCとかC++やアップルの開発言語を連想します。JAVAというのは昔から本を見ただけで苦手意識が高くてAndroid Studioのようなアプリケーションが出るまではとても手を出せない言語でした。しかしWebアプリケーションでそのうち廃れそうなPHPとか.ASPなどもちょっとはかじりましたがそれらよりは文章がシンプルなのでJAVAは割と気に入りました。

バックナンバー

• No.01 Android Studioのインストール 開発環境の準備
• No.02 Android Studio 新規プロジェクトの作成
• No.03 Android Studioでスマホの画面に画像を表示させるプログラミング
• No.04 Android Studioでキャラクターを動かすプログラミング
• No.05 Androidアプリの完成と挫折