情報電子工学演習Ⅱ(後期・水曜 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
© Copyright 2024 Paperzz