忍者ブログ
ゲームと工作と勉強と雑記のページ
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

今日は、アニメーションをしたいと思います。
これを、プレーヤーが動かせるようになればゲーム?ですからゲームプログラマーまでもう少しです。


今までは、動かない図形や文字を描いてきました。
今日は動く図形を描くわけですが、ちょっとした工夫で簡単に出来ます。

パラパラマンガを作ったことはあるでしょうか?原理はあれと全く同じです。
1コマ1コマ少しずつ変化するコマを連続的に速く切り替えることにより、人間の目にはそれが動いているように見える、というものです。

まず、このプログラムを見てください。

 x = 100 
 y = 100
 r = 10
 circle x - r, y - r,  x + r, y + r

今まで言ってきませんでしたが、パラメータを指定する時に、数式で書くことも可能です。
つまり、この「circle」のパラメータは数値に直すと「90,90,110,110」ですね。
と言うことは上のプログラムで、(x, y)つまり(100, 100)を中心に、半径r=10の円が描かれることは理解できるでしょうか?パッとみて分からない人も、今までのところを振り返りながらちょっと考えれば分かるはずです。

あと補足ですが、今回のプログラムにはあちこちにスペースが入っています。これは見易さのためで、命令とパラメータの間のスペース(今回の場合、「circle」の直後のみ)以外は必要ではありません。好みで入れても入れなくてもいいです。


で、上のプログラムで(x,y)中心の円が描けると言うことは、このxとyという変数をちょっとずつ変化させながら、描画すれば、アニメーションになると言うことです。ということで、次のプログラムにしてみましょう。

 // 変数初期化
 x = 100
 y = 100
 r = 10

 repeat

  // 背景塗りつぶし
  color 0,  0,  0 // 黒
  boxf

 
// 円の描画
  color 255, 255, 255 // 白
  circle x - r, y - r,  x + r, y + r

 
// x座標を5増やす
  x = x + 5

  // 50ms待つ
  wait 5  

 loop

ちょっとプログラムが長くなってきたので、コメントを入れてみました。(←用語)
コメントとは、プログラムの節々に入れるメモみたいなものです。
//や;の後なら、好きなことが書けるので、自分で分かりやすいようなコメントを是非入れておきましょう。
この癖はつけておいたほうがいいです。

コメントを見れば、どの行がどんな役割があるか分かると思います。

ちょっと付け足すと、

・repeat命令にパラメータで繰り返し数を指定していないのは、無限に繰り返すことを意味します。
こんなループのことを無限ループと言ったりします。

・boxf命令にパラメータが1つもないのは、画面全体の塗りつぶしを意味します。

プログラム全体の流れとしては、
まず、無限ループに入る前に、変数を初期化しておきます。
そして、ループに入り、次のことを繰り返します。
①背景を塗りつぶす
 これがないと、前のターンで書いたものが残ったままなので必要です。試しに消してやってみるとよく分かります。
②円を描く
 その時の変数の値で(x,y)を中心に半径rの円を描きます。実質変化する変数はxのみですが・・・
③x座標を増やす
 ちょっと円の中心位置をずらします。これで、動いているように見えます。
④50ms待つ
 wait命令が、待ち時間を作る命令です。パラメータ×10ms待ちます。
 これがないと、フリーズに近い状況になってしまうので注意しましょう。絶対必要です。

とにかく、描く→待つ→描く→待つ→・・・と繰り返すのが基本です。
ゲームでも、おおよそこんな流れなので覚えておきましょう。

この例では、xを変化させましたが、yとかrとかを変化させても面白いかもしれません。

気付いた人はいるかもしれませんが、
上のプログラムを実行すると、チカチカします。
この対策は次回します。


PR
前回の続きで、3の倍数を表示するプログラムを考えていきます。

前回の最終的なプログラムは

 x=3
 mes x
 x=x+3
 mes x
 
x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x

でした。最初の2行以外は、同じ事の繰り返しです。
これを今回はrepeat命令loop命令を使って簡単にします。
repeat命令とloop命令は繰り返し文を作るための命令です。
繰り返し文のことはループとも呼びます。ループの方が言いやすいので、今後は多用すると思います。

それで、使い方ですが、
repeatとloopは互いを対にして、1組で1つのループを作ります。下のようにして使います。

 repeat 10
  mes "なんたら"
  mes "かんたら"
 loop


このようにrepeatを先、loopを後に書く事によって、その間のプログラムを繰り返します
繰り返し回数は、repeatの後にパラメータとして与えます。
今は、必ず繰り返し回数を書いてください。
繰り返し回数を書かないと、無限に繰り返すことになり、ウィンドウが固まります。
万一そうなってしまった場合は、Ctrl+Alt+Deleteでタスクマネージャーを開いて、「応答なし」のタスクを終了してください。


で、実際に上のプログラムを実行すると、「なんたら」「かんたら」「なんたら」「かんたら」・・・・と言う風に、「なんたら」「かんたら」が10回繰り返し表示されると思います。


これを利用して、3の倍数のプログラムを書き直すと、下のようになります。

 x=3
 mes x
 repeat 8
  x=x+3
  mes x
 loop

だいぶ簡単になりました。

簡単に動作を説明すると、1行目「x=3」でまずxの値を3に初期化します。前回は言ってませんでしたが、一番最初の代入は、その後の代入と違って、今から変数としてxを使いますよ、という宣言も含んでいます。
2行目「mes x」で、ここでのxの値、つまり3を表示します。
この次3行目で、ループに入ります。
4行目でxの値を3増やし、5行目で表示します。
そして6行目でloop命令にたどり着くと、また3行目のrepeat命令まで戻って、4行目、5行目を繰り返します。

分かったでしょうか?
今まで、1行目→2行目→3行目→4行目→5行目→・・・・・→最終行、
と言う風に上から下まで順番に実行していました。
が、今回のプログラムでは2行目を実行した後、
4行目→5行目→4行目→5行目→・・・・・・→5行目、
と言う風な繰り返しがあります。と言うことです。

もう少しプログラムを代えて、こうできるのは分かるでしょうか?

 x = 0
 repeat 9
  x = x + 3
  mes x
 loop

ちょっと考えれば、これも3の倍数を表示してくれるプログラムであることが分かると思います。
このプログラムでは、xを0から始め、後は「3増やして表示」をいうのを繰り返しています。
確かに、3、6、9、・・・と繰り返しますね。

このプログラムであれば、3の倍数がいっぱい欲しければ、2行目の「9」をもっと大きな数にすればいいだけですし、4の倍数が欲しければ、3行目の「3」を「4」に書き換えるだけです。


2回にわたって、3の倍数を表示するなんて何も面白くない話でしたが、
その間に出てきた変数や、ループは非常に重要です。これからボコボコ出てきます。
ちょっと辛抱してここの辺りを理解すれば、後にゲーム作りが更に楽しくなると思います。



最後に、前回書き忘れていたことを書きます。

まず、
前回何気なく出てきた「x=x+3」の「+」。他の記号も書いておきましょう。

「-」・・・ 引き算。(例)3引く2⇒3-2
「*」・・・ 掛け算。(例)5掛け2⇒5*2
「/」・・・ 割り算。(例)8割る2⇒8/2
「%」・・・ 割り算のあまり。(例)5割る3の余り(2)⇒5%2

これらの記号のことを演算子と言います。

で、次に、変数の名前の付け方ですが、
これまでは「x」しか使ってきませんでした。
しかし、「y」や「a」とかいう記号も使えるのは当たり前で、
「okane」とか「teki」とかゆう風にアルファベットをいくつか並べたものでもOKです。
ただし、命令や他のワードとかぶらないように注意しましょう。


次は、何かが動くかも。

今回は次回と一緒に、ゲームプログラムに必要不可欠な変数繰り返し文について紹介しようと思います。
今回の内容はとても重要なので、よーく聴いてください。

ここで、
例えば、3の倍数を縦に並べるプログラムを考えてみましょう。
今までにやったことだけでやろうと、こうなるでしょうか?

 mes 3
 mes 6
 mes 9
 mes 12
 mes 15
 mes 18
 mes 21
 mes 24
 mes 27

・・・ちょっと話はずれますが、このプログラムを見て、違和感を覚えた人はいるでしょうか?
そうです。""がありません。今まで、mes命令のパラメータは""で囲まれていました。
""で囲まれた文章のことを文字列と言いますが、(←覚えておくべき)
上のプログラムでは""がついていません。
と言うことは、上のプログラムのmes命令の後の数字は、文字列ではなく数値なのです。
これでなぜ動くかと言うと、HSPが自動で数値を文字列に変換してくれたからです。
mes命令に数値を渡しても描画してくれる言うことを覚えておきましょう。



話を戻しますが、
上のプログラムを実行すると、確かに縦に3から27までの3の倍数が並びます。

しかし、3の倍数が、もう100個欲しい時はどうしますか?
あるいは、3の倍数ではなく4の倍数が欲しくなった時にはどうすればよいのでしょう?
上のプログラムから変更しようと思うと、地獄のような作業が待っています。

ここで便利なのが変数繰り返し文です。
繰り返し文は、その名の通り、繰り返しするための文(プログラム)ですが、
名前だけ聞いて分かりにくいのは変数の方だと思います。

とはいってもやっぱり名前は嘘をつかず、変数とは変わる数のことをいいます。

当たり前のことを言いますが、「3」と書けば3と言う1つの数値しか表していません
一般的にこれは、定まっている数ということで、定数と呼ばれます。

一方、変数は、3を示している時もあれば、6を示している時もあると言う数です。
定数は数字を使って表すのに対し、変数は「x」とか「y」とかいう記号を用いて表します。
変数を「数値の入れ物」と考えた方が分かりやすいかもしれません。
変数はただの入れ物であるため、中に入れるもの(数値)によって、示す数値が変わってきます。
変数の関係の用語で知っていて欲しいものがあるので下に2つ書きます。難しくはありません。

・変数の値
 変数の中に入っている数値のことです。
 
・代入
 変数の値を設定・変更すること、
 つまり、変数の中に数値を入れることを、「代入する」あるいは単に「入れる」といいます。
 一度、変数にある値を代入すれば、その変数は次の代入まで、その値を保持し続けます。
 また、代入する時に、それまで入っていた中身は捨てられます。

文章だけでは難しいと思うので、実際に変数を使ってみましょう。

次のプログラムを書いて実行してください。

 x=3
 mes x

画面に「3」が表示されたと思います。

このプログラムの1行目、「x=3」は「xの値を3にする」ことを示しています。
数学的には「xと3は等しい」と言う意味ですが、プログラミング上の「=」の意味は違い、
右辺の数値を、左の変数に代入する」ことを意味します。
つまり、この1行目でxの値が3になったため、
2行目の「mes x」で、3が描画されたわけです。

分かったでしょうか?分からない場合も、とりあえず次に進んで見ましょう。後で読み返してみてください。

次は、今さっきのプログラムに、xを3ほど増やして表示するプログラムを付け加えてみましょう。
次のようにして実行してください。

 x=3
 mes x
 x=x+3
 mes x

「3」と「6」が表示されたと思います。

新たに加わったのは3行目と4行目ですが、3行目に注目してください。
「x=x+3」となっています。今さっき書いたとおり、「=」は「右辺の数値を、左の変数に代入する」という意味であるため、この場合、「x+3を変数xに代入する」つまり「変数xの値を3増やす」と言う意味になります。
ちょっと最初は違和感あるかもしれませんが、ここは必ず理解してください。

よって、このプログラム上では、3行目に来た時のxの値は3であるため、
この3行目でxの値は6に変更されます。
そのまま4行目に流れ、「6」が表示されると言うわけです。


ん??ということは・・・

xを3増やす

表示

xを3増やす

表示

xを3増やす

表示

・・・・・・
・・・・・・

これで3の倍数が表示が同じ事の繰り返しで表示できるのでは??
具体的にプログラムにするとこうです。

 x=3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x
 x=x+3
 mes x


これで、3から27までの3の倍数を表示するプログラムができました。
これなら、もっと倍数が欲しい場合、コピーを何度もするだけで済むので、だいぶ楽になりました。

けど、書いていることが同じ事の繰り返しってなんか無駄っぽい?
これを解決するために、繰り返し文を使います。
最終的にはたった5行のプログラムになります。
それでは次回。



前回はmes命令で文字の描画をしましたが、
今回は色々な図形の描画をします。

とりあえず前回と同様に、”HSPスクリプトエディタ”を起動してください。

えっと・・・
まずは四角形の描画をしてみましょう。次の1行を書いて、実行(F5)してください。

 boxf 100,100,300,200

出てきたウィンドウの中心よりやや左上に長方形が出てきたでしょうか?
boxfは長方形の領域を塗りつぶす命令です。多分boxf のfは"full"のf だと思います。

で、次の 100,100,300,200 は何を示しているのかというと、
長方形を描く位置を指定しています。
つまり今回の場合、XY座標で(100, 100)の点から(300, 200)の点までの長方形領域を塗りつぶします。

分かりにくいと思うので写真とりました↓
window.png

分かるでしょうか?みにくいと思うので、クリックしてみてください。

図のように、ウィンドウ中の左上の点が原点です。
そこから、右方向がX方向、下方向がY方向です。
ちなみに、ウィンドウのサイズは、Xが640で、Yが480です。
この座標の中で、(100, 100)と(300, 200)の点は、・・・だいたい図に示した当たりの位置ではないでしょうか?

多分、いろいろ値を代えて試してみると分かると思います。


それでは、次にを描いてみましょう。今さっきのプログラムの次の行に付け加えて次のようにしてみてください。(太い部分は新たに付け加えたところです)

 boxf 100,100,300,200
 circle 100,100,300,200


これで実行してみてください。円が描かれるはず・・・あれ?
なぜか長方形しか描画されません。・・・
分かった人もいるかもしれませんが、長方形も円も色が同じ事が問題なんですね。
そこで色を変更してみましょう。今さっきのプログラムを次のように付け加えてください。

 boxf 100,100,300,200
 color 255,0,0
 circle 100,100,300,200

これで実行すると、長方形の上に円が重なって描画される様子がわかると思います。
このcolor命令は、これから描かれる物の色を指定します。
色は、赤,緑,青の輝度(0~255の数値)でcolorの後に指定します。
つまり、今回の 255, 0, 0 は、赤色を示します。ちなみに黒は 0, 0, 0 で、白は 255, 255, 255 です。
この色は、次に再びcolor命令があるまで有効です。

このcolor命令を使えばあらゆるものの色、前回表示した文字の色や長方形の色も指定することが出来ます。

そんで、最後に直線を描いてみましょう。プログラムを次のようにしてください。

 boxf 100,100,300,200
 color 255,0,0
 circle 100,100,300,200
 color 0,255,0
 line 100,100,300,200

実行すると長方形と円の上に重なって、緑の線が描画されます。
line命令が直線を描く命令です。後の数値は、今までと同じ雰囲気です。




今日は、合計4つの命令を紹介してきましたが、全て
命令  数値1, 数値2, 数値3, 数値4
のような形をしていたのが分かると思います。(color命令だけ数値が3つ)

全てのHSPの命令はそんな感じです。
この命令の後についてくる数値をパラメータといって、命令を内容を細かく指定する役割があります。
(”直線を引け”では詳細が分からないので”(100, 100)から(300, 200)の点まで直線を引け”と言う風に)

ときどき、このパラメータは数値でない時があります。その例が前やったmes命令です。
しかも、mes命令のパラメータは文章が1つだけでした。
このように、命令によってパラメータの数も種類も違います
命令  "文章",数値
のような命令もあります。


パラメータと言う言葉は今後出てくると思うので、覚えておいて下さい。


次回は、プログラムの非常に重要な要素である変数を紹介したいと思います。
ちょっとづつゲームに近づいていきます。

HSPやってみましょう!!

まずソフトをダウンロードしてこなくては!
ここから
HSP3の紹介とダウンロード>HSPダウンロード>Free Download HSP、と進めてください。
”hsp31.exe”がダウンロードできます。

そしてそのexeファイルを実行します。
いろいろ出てくるので適当に乗り越えます。
全てそのままで特に問題ありません。
というか、今後の説明はそのままの設定のものでやるので、
自信の無い人は、そのままにしておいてください。

ここまで来て、

何と!

これで開発環境は整いました。



それでは少しだけHSPを体験してみましょう!!
スタートメニュー>プログラム、の中に
Hot Soup Processor 3.1
とかいうやつが入っているはずです。
その中の、”HSPスクリプトエディタ”を開いて下さい。
(スタートメニューの中に入っていない人は
 C:\Program Files\hsp31
の中の”hsed3.exe”を実行してください。)

すると
edit.png
こんな奴が出るはずです。
これから、ログラムを書くときは、これをいつも使うので覚えておいてください。

そして

ここに1行、
mes "BOSU SYUTUGEN"
と全て半角で書いてください。(""はダブルクォーテーションと言って、shift+2で出ます)

書いたら実行。
F5キーを押してください。

すると・・・・

・・・・

”BOSU SYUTUGEN”が出現したでしょうか?
文字が出たら成功です。出なかった人は間違ってないか確認してみてください。


分かった人もいると思いますが、
mes "なんたら"
は、""の中の文章(この場合では、なんたら)を描く命令です。

これが”プログラム”です。簡単ですよね??

次回から、もっと色々なことをしていきますので、
できたら、楽しみにしておいて下さい。



*僕のパソコンのOSはWindows 2000です。
Windowsならどれでもできるとは思いますが、ちょっと外観が違ったりするかもしれません。

あと、もし分からなければメールください。できる限りお答えします。

カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
リンク
フリーエリア
最新CM
[08/30 masaya]
[06/17 Yu]
最新TB
プロフィール
HN:
ぴんかび
性別:
男性
趣味:
プログラミング、工作、囲碁
自己紹介:
_m_s_k_あっとまあくmail.goo.ne.jp
バーコード
ブログ内検索
最古記事
(06/15)
(06/16)
(06/17)
(06/18)
(06/20)
カウンター
アクセス解析

Copyright © [ PinCurve ] All rights reserved.
Special Template : 忍者ブログ de テンプレート
Special Thanks : 忍者ブログ
Commercial message : [PR]