概要

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

準備するもの

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

openprocessing.orgへの登録

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

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

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

optop.png

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

regist.png

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

top2018.png

プログラムを書く

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

edit.png

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

defaultprogram.png

画像や音を扱うには

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

upload.png

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

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

  • 関数名,変数名を間違えていないか?(大文字,小文字も区別されるので注意)
    textsize(20);
    ↓
    textSize(20);
  • セミコロンがコロンになっていないか,カンマがピリオドになっていないか?
    text("score:" + score, 70. 70):
    ↓
    text("score:" + score, 70, 70);

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

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

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

print.png

以下のプログラムを実行した例です.実行画面に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);
*/

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

サンプル

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

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

もぐらたたき(たたき判定+スコア表示)

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

もぐらたたき (爆発エフェクト追加)

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

もぐらたたき(もぐら複数)

シューティングゲーム


添付ファイル: filetop2018.png 231件 [詳細] fileoptop.png 260件 [詳細] fileprint.png 314件 [詳細] fileupload.png 282件 [詳細] filedefaultprogram.png 307件 [詳細] fileedit.png 274件 [詳細] filetop.png 290件 [詳細] fileregist.png 312件 [詳細] filejoin.png 269件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-02 (金) 15:05:36