スマートフォンでゲームプログラミング

概要 †

近年，スマートフォンやタブレットが普及しています．これらも立派なコンピュータ（計算機）ですので，これらを活用してプログラミングを学んでみましょう．

準備するもの †

• 新しめのスマートフォンもしくはタブレット
• メールアドレス（すでにもってればそれで可，なければgmailやoutlookなど無料のもので構わないので取得しましょう）
• キーボード（なくても可能だが用意することを強く推奨，どのようなキーボードを買えばいいかはこちらを参照）

openprocessing.orgへの登録 †

ここではブラウザ上でプログラムの記述，実行が可能なWebサービス，openprocessing.orgを利用します．

• https://www.openprocessing.org/

記述したプログラムはインターネット上に保存され，ブラウザ上で実行できるため，書いたプログラムを誰かに見せたりすることが，アドレスを教えるだけで可能です．

まずは登録を行うため[Join]をクリック，

[NAME]には他のユーザに公開されるニックネーム（後から変更可能です），[EMAIL]には用意したメールアドレス，[PASSWORD]には推測されにくいパスワードを記入しましょう．その後[私はロボットではありません]の指示に従ってチェックし，[Join]をクリック．

登録が済むと，以下のトップページが表示されます．それぞれ以下のようになっています．openprocessing.orgはtwitterと同じようにソーシャル機能を備えており，他のユーザをフォローしたり，他のユーザのプログラム（openprocessing.orgではスケッチと呼ばれる）を"いいね"したり，ほかのユーザのプログラムを改良して，それを公開するなどの交流も可能です．

プログラムを書く †

トップページの[Create a Sketch]をクリックし，新しいプログラムを作成すると以下の画面になります．

デフォルトプログラムの解説 †

画像や音を扱うには †

プログラムの設定を開き，[Files]-[Upload Files]から使いたい画像や音のファイルをアップロードすることで，プログラム中で使うことが可能になります．

プログラムが動かなくなった場合は †

openprocessing.orgでは，プログラムを間違った書き方をしていても，特にエラーを出さない場合があるので注意が必要です．

• 関数名，変数名を間違えていないか？（大文字，小文字も区別されるので注意）

  textsize(20);
  ↓
  textSize(20);

• セミコロンがコロンになっていないか，カンマがピリオドになっていないか？

  text("score:" + score, 70. 70):
  ↓
  text("score:" + score, 70, 70);

プログラムが動くが思った通り動かない場合 †

print関数を使って，変数の値を表示したり，print関数を書いた位置のプログラムが実行されているか確認する方法が便利です．

print関数が実行されると，引数に指定された内容が実行画面に重ねて表示されます．

以下のプログラムを実行した例です．実行画面にmouseXの値が表示されていることがわかります．

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
  print(mouseX);
}

print関数は処理が重いので，うまくいかない原因が治ったら消しましょう．

また，プログラムの行の先頭に//（スラッシュを2個）書くと，その行は「コメント」となりプログラム実行時，無視されます．

//print(mouseX);

もしくは/*（スラッシュ＋コロン）と*/（コロン＋スラッシュ）で囲まれたプログラムも「コメント」となり，プログラム実行時無視されます．

/*
ellipse(mouseX, mouseY, 10, 10);
print(mouseX);
*/

このコメント機能を使い，一時的にプログラムを一部分のみにすることで，どこのプログラムがうまく動いていないか，探し出すことも一つのテクニックです．

サンプル †

アカウントがなくても，プログラムの一部を変更して実行は可能です．ただし保存はできません．

もぐらたたき（モグラが一定時間で適当に位置を変えるだけ）

• https://www.openprocessing.org/sketch/442025

もぐらたたき（たたき判定＋スコア表示）

• https://www.openprocessing.org/sketch/442026

もぐらたたき（制限時間を設けてよりゲームらしく）

• https://www.openprocessing.org/sketch/442027

もぐらたたき （爆発エフェクト追加）

• https://www.openprocessing.org/sketch/442028

もぐらたたき（いらすとやさんの素材を使用）

• https://www.openprocessing.org/sketch/442091

もぐらたたき（もぐら複数）

• https://www.openprocessing.org/sketch/442053

シューティングゲーム

• https://www.openprocessing.org/sketch/442364

Top