HSP3講座〜0から他の講座までのつなぎ〜 
ステップ2:画像を表示してみよう。

満月芸夢topへ
HSP3講座topへ

<<前へ 次へ>>

【目次】
ステップ0:HSP3をダウンロードしてゲームを作る準備をしよう。
ステップ1:エディタを立ち上げて画面を表示してみよう。
ステップ2:画像を表示してみよう。
ステップ3:文字を表示してみよう。
ステップ4:実行ファイルを作ってみよう。
ステップ5:変数を使ってみよう。
ステップ6:ループ文やif文、乱数を使ってみよう。
ステップ7:goto文、gosub文を使ってみよう。
ステップ8:これまでの内容でゲームを作ってみよう。
ステップ9:配列変数を使い、スクリプトの分割をしてみよう。
ステップ10:音を追加し、透明色を使ったアニメを作ってみよう。


画像の表示か……なにから始めればいいんだ?
HSPで分からないことがあったら、まずは検索サイトで調べてみることだ。
自分に合ったわかりやすい講座が何個かはあるだろう。
検索サイトというとgoogleとかだな。最初に妹に教えてもらったぞ。
では、試しに検索してみるとしよう。
検索ワードは “HSP3 画像の表示”とかでいいかな?……よし、ポチッとなっと。
何でも試してみるのはいい傾向だね。

分からないときはまず“検索エンジンで調べる”こと。
検索エンジンで調べた後さらに詳しく知りたければ、
HSPエディタと同じフォルダにある“hdl.exe”というヘルプを使って調べてみると理解が深まるよ。
むう……HSPの解説をしているところは検索エンジンで見つけたが、
正直言って眺めてもさっぱりわからないな……。私のプログラムに対する知識が少ないせいなのだろうが……。
アルマ、こういうときはどうすればいいんだ?
そういうときは簡単だ。“詳しい人に聞けばいい”。
おお!
HSP関係の質問掲示板に投稿して教えてもらうのもいいし、知り合いに教えてもらうのもいいね。
今回の場合はボクが居るからボクに聞けばいいさ。
わかった。
アルマ、HSPで画像の表示の仕方がわからないんで教えてくれ。
いいだろう。
ではまずゲームを保存しておくためのフォルダをデスクトップに作ってくれ。
名前は……“絶歌HSPゲーム”とか適当に付けてくれ。
こんな感じでいいかな?
デスクトップの空いた箇所で右クリックして新規作成のフォルダを選び、
その次にフォルダの上で右クリックをしてから名前の変更とやってみた。……右クリック万能だな!
いい感じだな。
じゃあそのフォルダの中にさらにimgというフォルダを作っておいてくれ、
そこにゲームで使う画像をまとめて入れることにするからな。
作ったぞ。我ながら完璧だ
それではそのimgフォルダの中に下の画像を入れてくれ。
名前はzetuka.jpgのままで変えないでくれよ。
(画像上で右クリックをした後、“名前をつけて画像を保存”もしくは“名前をつけてリンク先を保存”で保存できます)
あ、私の画像を使うのか……ちょっと気恥ずかしいな。
これで画像のほうの準備はできた。今度はHSPスクリプトエディタを開いてくれ
えーっと、どこだったっけな……hs3ed.exe……これか。
よし、開いたぞ。
では後で説明するから、今は何も考えずにこの下の6行をエディタにコピーして貼り付けてくれ。

buffer 1;仮想の画面1(バッファ1)を呼び出す。
picload "img/zetuka.jpg";絶歌の画像をバッファ1に読み込む。
gsel 0;画面0を操作するように変更する。
redraw 0,0,0,800,640;ここから見えない画面0に画像を張り付けていく。
pos 0,0:gcopy 1,0,0,150,200;絶歌の画像を画面0に張り付ける。
redraw 1,0,0,800,640;画面0を見えるようにする。
色即是空……空即是色……。
何も考えずに貼ったぞ。
では、HSPエディタの上側左にあるメニューバーからファイルという項目をを選び、名前をつけて保存を選択してくれ。
保存場所はデスクトップの絶歌HSPゲームフォルダの中だ。
何という名前で保存したらいい?
名前はなんでもいいがとりあえずは“start”にしておいてくれ。
ファイルの種類は“HSP Sorce(*.hsp)”だから特にそこはいじらなくていいはずだ。
よし……保存できたぞ。
HSPエディタの上のほうにあるメニューバーから “HSP(P)”と書いてあるところをクリックしてくれ。
“コンパイル+実行(C)”と書いているところをクリックしてくれ。
前にやって白い画面がでたやつだな。
よし、やってみる。
画像が表示された!!!

うまくいったようだな。
では今エディタに貼り付けた内容について上から順に説明していくぞ。
うむ、頼む。
まず最初に、一行の間で“;(セミコロン)”以降の文字はコメントと言って機械には読まれない部分だ。
文字が黄緑色になっている部分だな。
だからここは書かなくても今回の貼ったスクリプトは問題なく動く。

はて?だったら書かない方がいいのでは?
わざわざ意味のない文を書く意味はないだろう。
そうでもないさ。人間は忘れる生き物だからね。
コメントをしっかり書いておかないと、どんなプログラムを書いたか分からなくなってしまいやすいんだ。
後々の事を考えると、丁寧すぎるくらいにコメントを書くことをボクはすすめるね。

なるほど、「コメントはしっかり書く」だな。
肝に銘じておこう。
コメントの書き方は他にもあるが今回は割愛させてもらうぞ。
気になったら検索エンジンで“HSP3 コメントの書き方”とかで調べて見るといい。

※ //〜や/*〜*/で〜部分をコメントにできます。詳しくは君の手で調査しよう!
わかった。興味が沸いたら調べてみるとしよう。
では上から最初の3行について説明するぞ。
この3行では「画像を貼り付けるための準備」を行っている。

ふむふむ。
さっき何も書かずにエディタをコンパイルした時の事を覚えているかな?
ああ、たしか白い画面が出たな。
その白い画面が、ゲームをプレイするプレイヤーから見える画面……“画面0”だ。
ふむ。
最初の二行ではそれとは別の画面、プレイヤーからは見えない“画面1”を呼び出し、
そこにzetuka.jpgという画像を貼り付けているんだ。
ちょっと待ってくれ、図を描いてみる……
うーむ、よくわかってないかもしれないがこんなイメージであってるか?
よくわかってるじゃないか。
“buffer 1”の部分で画面1を作り今から画面1に描きこむぞと準備し、
“picload "img/zetuka.jpg"”の部分でimgフォルダの中にあるzetuka.jpgという画像を画面1に描きこんだわけだ。
“gsel 0”の部分は今度は画面0に描きこむよと言っているわけだね。

ググ……わ、分かったような分からないような……。
まあ、そこら辺は今は深く考えなくてもいいだろう。
蛇口をひねれば蛇口の構造を理解しなくても水がでるだろう?
蛇口の構造を知るのは蛇口が壊れてからでいい。
なるほど、その考え方も一理あるな。
では4行目からの残りの3行を説明するぞ。
この3行では「画面1にあるzetuka.jpgという画像を画面0に貼り付け、表示を行っている」

4行目の
redraw 0…の部分で「画面0を描画しないようにする」という命令をし

5行目の
pos 0,0 の部分で「画面0のX0,Y0の部分に絵や文字を貼り付ける」と指定。
(Xは一番左が0に、Yは上が0になり、1ドット単位の指定になる)
その後にgcopy 1,0,0,150,200 の部分では「画面1のX0,Y0から右に150ピクセル下に200ピクセル分を画面0に貼り付け」

6行目では
redraw 1…の部分で「画面0を描画する」という命令をしている。
グググ……。もう少し噛み砕いて教えてくれ。
情報が多すぎて混乱してきた。
あとpos 0,0の後の“:”はなにを表しているんだ?
おっと、“:(コロン)”の説明を忘れていたな。
これは「その行に続けて命令を書く」ことを表しているんだ。
一行に複数の命令を書きたいときに使えるな。

例を挙げれば:(コロン)を使い、下のように1行で書いても今回の6行の内容と同じ事が実行できる。
buffer 1:picload "img/zetuka.jpg":gsel 0:redraw 0,0,0,800,640:pos 0,0:gcopy 1,0,0,150,200:redraw 1,0,0,800,640

見やすくなるように適度に使ってくれ。
さて、説明については私も図を使わせてもらうかな……。

横軸がX軸、縦軸がY軸で、一番左上がX0Y0。
右に行くほどXが増加し、下に行くほどYが増加する。

そうだね……
分かりづらければ試しにpos 0,0をpos 200,100に変更してみてくれるかな。

書きなおしてコンパイル+実行をしたら画像の位置が変わったな。


pos は画像の位置を決める命令だからね。
さっきpos 200,100に書き換えたことで
左上からX軸に200ピクセル、Y軸に200ピクセル移動した位置に貼るようになったのさ。
なるほど。なんとなくわかった気がするな。
今のように実際に命令内の値を変えて確認してみたり、 HSP3のヘルプを見てそれぞれの命令について調べるともっと理解が深まるよ。
ううむ、なかなか手ごわいなあ。
でも絵を表示するだけならできるようになった気がする!
よし、では次は文字の表示方法について教えていこうか。
<<前へ 次へ>>
inserted by FC2 system