HSPによるスマフォアプリの作成

情報電子工学演習Ⅱ(後期・水曜 3 限)
HSPによるスマフォアプリの作成
1.目的
Hot Soup Processor (略称 HSP)は、プログラミング初心者でも手軽に使えるよう工夫
されたスクリプトタイプの言語である。本テーマではテニスゲームの作成を通してプロ
グラミングの基礎を学ぶとともに、新たなアプリのアイディア創出をはかることを目的
とする。
2.スケジュール (実施場所:情報電子第1実験室)
第1回(12/ 3 13:30~) ガイダンス・テニスゲームの作成実習(1)
-HSP プログラム記述(スクリプトエディタの利用)と命令語-
第2回(12/10 13:00~) テニスゲームの作成実習(2)
-ボールの軌道計算とラケット打ち返し判定処理-
第3回(12/17 13:00~) テニスゲームの作成実習(3)
-スマフォ/タブレットにおける動作確認-
第4回(12/24 13:00~) スマホアプリの企画書作成(1)
※テニスゲームの改良もしくは新規アプリの企画書を A4 用紙 1 枚程度にまと
め、最後の審査会で発表する。
第5回( 1/ 7 13:30~) スマホアプリの企画書作成(2)
最終回( 1/14 13:00~) 審査会の実施(一人 発表:5分+質疑:3分)
3.開発環境と手順
Android スマフォアプリを開発するため、
下記のOS及び開発環境が使用するPCにイ
ンストールされています。
Windows 7 Pro
HSP 3.0 ; HSP 環境(スクリプトエディタ、コンパイラ、コンバータ等)
JDK(Java Development Kit) ;Java 開発環境
Android SDK(Software Development Kit);Android アプリ開発環境
Android NDK(Native Development Kit);Android 端末ライブラリ
Apache Ant ; 開発補助ツール
なお、本実習用の作業フォルダを c:\ex2hsp とします。作成する HSP のファイルは
この作業フォルダに保存してください。
1
スマフォアプリを開発する手順は、
①HSP スクリプトエディタを使用してプログラムを記述する。
②動作確認したコードの一部を修正した後、コンバータ(HSPDish Helper)を使用し
て Android パッケージを生成する。
③PC上で仮想マシンを利用し、動作確認する。
④Android パッケージをスマフォに転送し、動作確認する。
4.テニスゲームの作成実習
4-1.テニスゲームの概要
実行画面のサイズは 320×480 とする。ボールを1つ、ラケットを1つ表示させ、Start
ボタンを押すと、ボールが緑のコート内を動く。ラケットは、画面をタッチ(PC 上ではマ
ウスをクリック)することにより、水平に動かすことができる。また、ボールが近づいた
時にラケットを移動し、ボールに当てることが出来ると、スコアが増える。逆に、ラケッ
トをボールに当てることが出来なければミスの値が増え、ミスが3回になるとゲームは終
了する。
図1 PC上で実行した時のイメージ
2
4-2.課題(1)ボールの移動
HSP エディタを起動して下記のプログラムを入力し、実行を確認して下さい。
#include "hsp3dish.as"
// ---- 変数の初期値を設定 --------------------------------------mx=0
// ボールの x 座標
my=200
// ボールの y 座標
*main
redraw 0
// 仮想画面に描画
color 0,128,0:boxf
// コート(緑)
color 0,0,0:boxf 0,350,320,480
// コート下(黒)
color 255,255,255:circle mx,my,mx+16,my+16,1
// ボール(白)
redraw 1
// 実際の画面に反映
goto *main
// ラベル
end
追加1)ボールの x, y 座標の値を変更し、再度実行して下さい。
追加2)ボールを動かすには?
追加3)ボールの動きを途中で止めるには?
追加4)ボールの進む方向を変えるには?
3
main へ戻る
4-3.課題(2)ボールの軌道計算とラケット打ち返し判定処理
HSP エディタを起動して下記のプログラムを入力し、実行を確認して下さい。
#include "hsp3dish.as"
// ---- 変数の初期値を設定 --------------------------------------mx=0
// ボールの x 座標
my=200
// ボールの y 座標
sx=2
// ボールの x 移動量
sy=-2
// ボールの y 移動量
rk=0
// ラケットの x 座標(y 座標は 300 に固定)
// ---- 起動時の設定 -------------------------------------------redraw 0
// 仮想画面に描画
gosub *scset
// 基本画面描画サブルーチンへ
pos 40,400
// Start ボタン 表示位置 x:40, y:400
button "Start", *main
//押した時は *main へ分岐する
pos 40,440
// End ボタン
button "End", *estop
//押した時は *estop へ分岐する
pos 50,100
// Start ボタンを指示
表示位置
x:40, y:440
color 255,255,255
// 白色を指定
mes "Push the Start Button !"
// Push the Start Button ! をコート内に表示
redraw 1
// 実際の画面に反映
stop
// 停止(押しボタン待機)
redraw 0
// 仮想画面に描画
gosub *scset
// 基本画面描画サブルーチンへ
redraw 1
// 実際の画面に反映
mx=mx+sx
// 次の x 座標値を計算
my=my+sy
// 次の y 座標値を計算
if mx+16=320 : sx=-2
// ボールの x 座標が右隅に達した場合
if mx=0 : sx=2
// ボールの x 座標が左隅に達した場合
if my=0 : sy=2
// ボールの y 座標が上隅に達した場合
if my+16=350 : sy=-2
// ボールの y 座標が下隅に達した場合
*main
4
await 16
// 時間待機
goto *main
// ラベル
main へ戻る
// ---- 基本画面描画のサブルーチン -----------------------------*scset
color 0,128,0:boxf
// コート(緑)
color 0,0,0:boxf 0,350,320,480
// コート下(黒)
color 255,255,255:circle mx,my,mx+16,my+16,1
// ボール(白)
color 255,0,0:boxf rk,300,rk+50,310
// ラケット(赤)
return
// サブルーチンを呼び出した gosub 命令の後に戻る
// ---- 終了 ---------------------------------------------------*estop
end
追加1)ラケットを移動させるには?
ヒント:getkey 命令を利用して、画面タッチした位置を mousex で読み取る
追加2)ラケットによるボールの打ち返し判定は?
ヒント:下記の2つの場合について、ラケットとボールの座標を確認する
a)打ち返し OK
b)打ち返し NG
5.スマフォ/タブレットにおける動作確認
※手順を本実習サポート HP( http://esato.net/ex/ )に掲載します。
5
<HSP 命令語の概要>
No
命令語
概要
1
#include “file”
指定したファイルの結合。
2
redraw [0/1]
再描画の指定。0 で仮想画面、1 で実際の画面の指定。
3
color [r,g,b]
カラー設定。赤, 緑, 青の順に各色の濃さを指定。
4
boxf [x1,y1,x2,y2]
四角を描き、中を塗りつぶす。
5
circle [x1,y1,x2,y2,1]
円を描き、中を塗りつぶす。最後の1を 0 にすると線のみ。
6
goto *ラベル
指定したラベル(行)へジャンプする。
7
await [t]
指定した時間 t ミリ秒待つ。
8
if 条件 : 命令
条件が真(成立)の時、命令が実行される。
9
if 条件 { 命令1
条件が真の時、命令1、命令2、命令3が実行される。
命令2
命令3 }
10
if 条件 { 命令1
命令2 }
条件が真の時、命令1と命令2が実行される。
また、偽(成立せず)の時、命令 3 と命令 4 が実行される。
else { 命令 3
命令 4 }
11
button “名前”, *ラベル
ボタンを生成する。ボタンには“名前”が記され、ボタン
を押した時には、指定したラベルへジャンプする。
12
pos [x,y]
ボタンやメッセージの位置を指定する。
13
mes “メッセージ“
メッセージを表示する。
14
stop
処理を停止(待機)
。
15
gosub *サブルーチン
サブルーチン(ラベル)へジャンプする。必ず return と
対で使うこと。
16
return
Gosub 命令を実行した次の行へジャンプする。
17
getkey key, 1
キー入力(タッチ)の検査。key には、キーのコードが入
力される。また、変数 mousex にはタッチした位置の
X 座標、mousey には Y 座標が自動的に入る。
※ プログラム中にコメント(説明)を記載するには、// を使用します。
<参考図書、Web サイト>
[1] おにたま; はじめてつくるスマホアプリプログラミング HSP3Dish 入門, 秀和システム,
2012.
[2] おにため; HSP3 プログラミング入門, 秀和システム, 2005.
[3] ONION software; HSP TV!, “http://hsp.tv/”
6