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

情報電子工学演習Ⅱ（後期・水曜 3 限）
ＨＳＰによるスマフォアプリの作成
１．目的
Hot Soup Processor (略称 HSP)は、プログラミング初心者でも手軽に使えるよう工夫
されたスクリプトタイプの言語である。本テーマではテニスゲームの作成を通してプロ
グラミングの基礎を学ぶとともに、新たなアプリのアイディア創出をはかることを目的
とする。
２．スケジュール (実施場所：情報電子第１実験室)
第１回(12/ 3 13:30～) ガイダンス・テニスゲームの作成実習（１）
－HSP プログラム記述（スクリプトエディタの利用）と命令語－
第２回(12/10 13:00～) テニスゲームの作成実習（２）
－ボールの軌道計算とラケット打ち返し判定処理－
第３回(12/17 13:00～) テニスゲームの作成実習（３）
－スマフォ/タブレットにおける動作確認－
第４回(12/24 13:00～) スマホアプリの企画書作成（１）
※テニスゲームの改良もしくは新規アプリの企画書を A4 用紙 1 枚程度にまと
め、最後の審査会で発表する。
第５回( 1/ 7 13:30～) スマホアプリの企画書作成（２）
最終回( 1/14 13:00～) 審査会の実施(一人 発表：５分＋質疑：３分)
３．開発環境と手順
Android スマフォアプリを開発するため、
下記のＯＳ及び開発環境が使用するＰＣにイ
ンストールされています。
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 パッケージを生成する。
③ＰＣ上で仮想マシンを利用し、動作確認する。
④Android パッケージをスマフォに転送し、動作確認する。
４．テニスゲームの作成実習
４－１．テニスゲームの概要
実行画面のサイズは 320×480 とする。ボールを１つ、ラケットを１つ表示させ、Start
ボタンを押すと、ボールが緑のコート内を動く。ラケットは、画面をタッチ（PC 上ではマ
ウスをクリック）することにより、水平に動かすことができる。また、ボールが近づいた
時にラケットを移動し、ボールに当てることが出来ると、スコアが増える。逆に、ラケッ
トをボールに当てることが出来なければミスの値が増え、ミスが３回になるとゲームは終
了する。
図１ ＰＣ上で実行した時のイメージ
2
４－２．課題（１）ボールの移動
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
追加１）ボールの x, y 座標の値を変更し、再度実行して下さい。
追加２）ボールを動かすには？
追加３）ボールの動きを途中で止めるには？
追加４）ボールの進む方向を変えるには？
3
main へ戻る
４－３．課題（２）ボールの軌道計算とラケット打ち返し判定処理
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
追加１）ラケットを移動させるには？
ヒント：getkey 命令を利用して、画面タッチした位置を mousex で読み取る
追加２）ラケットによるボールの打ち返し判定は？
ヒント：下記の２つの場合について、ラケットとボールの座標を確認する
a)打ち返し OK
b)打ち返し NG
５．スマフォ/タブレットにおける動作確認
※手順を本実習サポート 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]
円を描き、中を塗りつぶす。最後の１を 0 にすると線のみ。
6
goto *ラベル
指定したラベル(行)へジャンプする。
7
await [t]
指定した時間 t ミリ秒待つ。
8
if 条件 : 命令
条件が真（成立）の時、命令が実行される。
9
if 条件 { 命令１
条件が真の時、命令１、命令２、命令３が実行される。
命令２
命令３ }
10
if 条件 { 命令１
命令２ }
条件が真の時、命令１と命令２が実行される。
また、偽（成立せず）の時、命令 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