はじめに
HSP（Hot Soup Processor）は、初心者や個人でも手軽にアプリケーションを開発できる環境です。今回はホビーや実務でちょっとした用途に使ってみようという方に向けて、ひな型となるようなコードを紹介してみたいと思います。以下の順で、実例と共にスクリプトの紹介と解説を行います。
- アニメーション表示の方法について
- キー入力による操作を追加する
- タイルパターンの描画
- Excelアプリケーションとの連携
- IEコンポーネントを使用したWebブラウザの作成
それでは、さっそくショートプログラムを紹介していきましょう。
対象読者
HSPのプログラミング環境を使ったことがある読者を対象にしています。HSPについて知識のない方は、入門記事もありますので参考にしてみてください。
- CodeZine 『開発者のためのHSP言語スピード入門』 おにたま 著、2006年7月
必要な環境
HSP 3.0以降が必要です。HSPは、以下のサイトで無償ダウンロードすることができます。
アニメーション表示の方法について
HSPが持つ特長のひとつとして、豊富な描画機能を持っている点が挙げられます。さまざまな手段によるリアルタイム描画を標準的にサポートしていることが、ゲームなどのホビー用途に適していると言えるでしょう。特に「カジュアル・ゲーム」と呼ばれる短時間で簡単に楽しめるゲームの開発には、手軽さやパフォーマンスの面でも非常に適しています。
アニメーションのしくみ
画面を動かす上で最も基本的で原始的なやり方は、「1コマずつ絵を作って、それを連続的に表示する」というものです。例えば、1コマ目で左に描かれていた人が、2コマ目では中央に、3コマ目では右に…という絵を一定時間ごとに切り替えることで、人が動いているように見えます。パソコンの画面上でも同様のことを行ってアニメーションを実現させることができます。基本的なことですが、最初にこの原理をしっかり把握しておきましょう。
HSPの画面描画機能
ここでは、標準的な描画機能を使用して、動きのある画面表示（アニメーション）を行ってみたいと思います。HSPで1コマの画面を作る手順は、大体次のようになります。
- 描画更新を無効にする（
redraw命令） - 背景を画面全体に描画する（
boxfなど描画関連の命令） - 必要な画像の描画を行う（
gcopyなど描画関連の命令） - 描画更新を有効にする（
redraw命令） - 一定時間待つ（
await命令）
1コマ分の画面を作るためには、画像や文字などいろいろな情報を描画する必要があります。それらを効率よく処理するために必要な定型の処理がいくつかあると考えてください。
なめらかな動きを描画するには
HSPでは、描画命令を実行するたびに、現在表示されている画面全体が上書きされてしまいます。小さなキャラクターがちょっと動いているだけで、背景がまったく変わらないような場合には、あまり効率的な描画方法とは言えません。そこで、描画命令を実行しても画面全体の更新を行わないように設定してから、以下のような手順で描画を実行するようにしましょう。
- 画面全体を一度クリア（背景のみを描画）する。
- 必要なもの（キャラクターなど）を描画し、描画の更新を有効にする。
こうすることで、以前に表示されていた画面から、一瞬で次の画面に切り替わり、非常になめらかなコマの遷移を実現できます。
ここで紹介するサンプルは、1コマずつ移動した画像を描くことで、キャラクターが歩いているように見せるものです。スクリプトのソースファイル（move.hsp）と同じフォルダに、画像データ（tinbear.bmp）が存在することを確認して、［F5］キーを押して実行してください。
; 画像の読み込み buffer 1 ; ID1のバッファを初期化する picload "tinbear.bmp" ; 画像を読み込む gsel 0 ; ID0のバッファを操作する ; 変数の設定 x=640:y=100 ; X,Y座標 anim=0 ; アニメーションカウント ; メインループ repeat ; 無限に繰り返す redraw 0 ; 描画更新を無効にする gmode 0,640,480 ; コピーサイズを設定する color 216,233,236:boxf ; 背景を描画する gmode 0,200,300 ; コピーサイズを設定する pos x,y:gcopy 1,anim/4\8*200 ; 画像を描画する anim=anim+1 ; アニメーションカウントを増やす x=x-2 ; 座標を移動させる await 16 ; 一定時間待つ redraw 1 ; 描画内容を反映させる loop ; 繰り返しの終わり
このサンプルでは、キャラクターを右から左に2ドットずつ移動させながら、キャラクター自体が歩いている絵も切り替えて表示しています。repeat命令からloop命令までの区間で1コマ分の画面を描画します。これを繰り返すことで、移動して見えるように作られています。
内部のしくみとしては、画像を表示する座標に変数を使って少しずつ変化させているだけです。描画方法や、画面を更新するタイミングなどが大きなポイントとなります。キャラクターの描画は、gcopy命令によって行われています。これは、別の画面バッファにストックされている画像をコピーするための命令で、gmode命令と併用することで非常に多くの機能を利用できます。
gcopy命令（画面コピー）
gcopy命令に記述するパラメータの内容は以下の通りです。
gcopy p1,p2,p3,p4,p5
| パラメータ | 説明 |
| p1=0～(0) | ウィンドウID |
| p2(0), p3(0) | コピー元の左上X, Y座標 |
| p4, p5 | コピーする大きさX, Y（ドット単位） |
gcopy命令は、指定したウィンドウIDの画面の一部を、現在の描画先カレントポジション（pos命令で指定された座標）にコピーします。コピー元のウィンドウIDは、自分のウィンドウIDと同じか、またはscreen命令やbuffer命令で初期化されたウィンドウIDでなければなりません。gcopy命令でコピーする場合は、gmode命令によってコピーするモードをいくつか選ぶことができます。
p2,p3のパラメーターを省略した場合…(0,0)が使用される。p4,p5のパラメーターを省略した場合…gmode命令で設定されたサイズが使用される。
ストックのための画面バッファ（ウィンドウID1）は、最初に「buffer 1」という行で初期化した後、picload命令で画像を準備しています。あらかじめ、画像を別な場所に読み込んでおくことで、高速な描画や加工が可能になります。
メインウィンドウ（最初に作成されるウィンドウ）は「ウィンドウID0」となります。buffer命令などで新しいウィンドウIDを初期化した場合には、gsel命令で描画対象をメインウィンドウに再設定することを忘れないようにしてください。
