2014年12月25日

プチコン3号 4日目 背景をスクロールさせる

昨日はスプライトを動かしてみましたが、今日はRPGでよくあるような、主人公を中央に固定して背景をスクロールさせるプログラムを作ってみました。

プチコン3号には背景用グラフィックス(以下BG)のための命令が数多く備わっています。
スプライトとBGがあれば、2Dのゲームの画像表示そのもので悩むことはほぼ無いのではないかと思います。

今回はBGを以下のように使います。
pc4-1.png

まず、スクリーンの3倍の大きさのBGを用意します。
そして、スプライトはスクリーン中央に固定し、スクリーン全体をBGの上で移動させます。
すると、結果的にスプライトがBGの上を移動しているように見えることになります。

ただし、画面の端からはみ出さないように気をつけなければなりません。
移動範囲はスクリーンの2倍、Xが0から799まで、Yが0から480までとなります。
それ以上動かすと、BGの外側の何もない部分が見えてしまいます。
pc4-2.png


実際に作ってみたプログラムは以下の通りです。
基本的には、前回と同じプログラムで、スプライトを動かす代わりにBGを動かしているだけです。
他に、最初にBGに絵を描いている処理が増えています。
pc4-0.jpg

X=400:Y=240:Z=500
DZ=0
SPSET 0,506
SPOFS 0,184,104,Z
BGSCREEN 0,75,45
BGFILL 0,0,0,74,44,684
BGFILL 0,11,6,63,38,574
BGPUT 0,37,22,246
@LOOP
STICK OUT DX,DY
X=X+DX*8
IF X>800 THEN X=800
IF X<0 THEN X=0
Y=Y-DY*8
IF Y>480 THEN Y=480
IF Y<0 THEN Y=0
IF DZ==0 THEN DZ=16 AND BUTTON(2)
Z=Z-DZ
IF Z<-200 THEN DZ=-DZ
IF Z>500 THEN DZ=0:Z=500
BGOFS 0,X,Y,500
S=1.0+(500-Z)/500
SPSCALE 0,S,S
VSYNC 1
GOTO @LOOP

まず最後から5行目の「BGOFS」命令ですが、これはSPOFS同様、指定した番号のBGのX,Y,Zの値を指定します。
XとYは、スクリーンの原点(左上)が、BG上でどの座標にあるかを表します。

Xが大きくなると、スクリーンはBGの上を右へ移動していきます。
そのとき3DSの画面上では、BGの画像が右から左へとスクロールしているように見えることになります。

BGSCREEN 0,75,45
はBGの大きさを指定しています。
プチコン3号はBGを4枚持っており、最初に番号でBGを指定します。今回は0番です。
大きさは、16ピクセル単位での指定となります。横75だと、75*16=1200ピクセルとなります。
BGFILL 0,0,0,74,44,684
は、BGの中の四角形の領域を、指定した画像で塗りつぶします。
領域の座標は、やはり16ピクセル単位での指定となります。

画像と番号との対応は、スプライトと同じくSmileツールの中で確認できます。
今回は、0番のBGの全体を684番の画像で塗りつぶしています。
684番の画像は、下の画面で言うと四角のコンクリートのような画像です。
BGFILL 0,11,6,63,38,574
も同じ命令ですが、画像は574番で、これは草地の画像です。
これでスプライトが移動できる範囲を塗りつぶしています。
その次の
BGPUT 0,37,22,246
は画像を1つ(16×16ピクセル)だけ描く命令です。
BGの中央に、246番の「家」の画像を描いています。
pc4-3.png
posted by boochow at 00:51| Comment(0) | プチコン講座 | このブログの読者になる | 更新情報をチェックする

2014年12月23日

プチコン3号 3日目 絵をボタン操作で動かす

昨日はスプライトを画面に表示して、座標の値を変化させて位置を動かしました。
今日はその続きで、Nintendo 3DSの操作パッドでスプライトを操作してみました。
キャラクターをスライドパッドで移動させ、Aボタンでジャンプさせます。

プチコン3号では、スライドパッドの入力は
STICK OUT DX,DY

です。
DXとDYには、実際にはスライドパッドの値を代入したい変数の名前を書きます。
値はそれぞれ、スティックが中央のとき0、左端・下端のとき-1.0、右端・上端のとき1.0です。
Y軸の座標系が画面とは逆になっています。

ボタンの読み取りはもう少し複雑です。
まず、読み取りモードが複数あり、使うモードをパラメータで指定します。
また、複数のボタンの状態を一度に読み取れるように、読み取り結果はビットパターンで返されます。
使い方は以下のようになります。
B=BUTTON(M)

Mはモードを表す整数、Bは読み取り結果を代入するための変数の名前を書きます。

読み取りモードは、
 0 押され続けている状態
 1 ボタンが押された瞬間だけビットが1になる(リピート機能付き)
 2 ボタンが押された瞬間だけビットが1になる(リピート機能なし)
 3 ボタンが放された瞬間だけビットが1になる

の4つが用意されています。
ゲームでの使い方を考えると、たとえば
・押している間だけ移動する → モード0
・押すと弾丸発射、押しっぱなしで連射 → モード1
・押すと弾丸発射、連射なし → モード2
・画面に描かれたボタンをクリックする場合 → モード3
というようになるでしょう。

返り値のビットパターンは、桁の小さいほう(右)から、
 上下左右ABXYLR
のようになっています。まあまあ覚えやすいですね。
ボタンと、それが押されているときの値の対応は下図のようになっています。
pc3-2.png

上のビットパターンを覚えていれば、値は計算で出せます。
今回はAボタンを使うので、右から5番目のビットですから
 2^(5-1) = 2^4 = 16
となります。小学生には、チョット難しいでしょうか・・・。


複数のボタンが押されている場合、値は足し算になります。
たとえば、上ボタンとAボタンが押されていると、16+1=17が返り値になります。

返り値の中に、ある値が含まれているかどうかはビット演算子「AND」で求めます。
たとえば、Bという変数に16という値が含まれているかどうかは、
B AND 16

の演算結果が0か0でないかで判別できます。含まれていないなら結果は0です。

2進数で書くと、16は10000、1は1、17は10001になります。
ANDという演算は、2つの2進数で両方とも1になっているところだけを抜き出します。
10001 AND 10000 = 10000です。
2進数を使うほうが分かりやすいと感じたら、プログラムも2進数で書くと良いかもしれません。
プチコン3号では、2進数は"&B"を頭につけます。
たとえば「B AND 16」は「B AND &B10000」と書いても同じです。


さて、今日つくったプログラムです。
長さは昨日とほとんど変わりません。
pc3-1.jpg

X=192:Y=112:Z=500
DZ=0
SPSET 0,310
@LOOP
STICK OUT DX,DY
X=X+DX*5
IF X>368 THEN X=368
IF X<0 THEN X=0
Y=Y-DY*5
IF Y>208 THEN Y=208
IF Y<0 THEN Y=0
IF DZ==0 THEN DZ=16 AND BUTTON(2)
Z=Z-DZ
IF Z<-200 THEN DZ=-DZ
IF Z>500 THEN DZ=0:Z=500
SPOFS 0,X,Y,Z
S=1.0+(500-Z)/500
SPSCALE 0,S,S
VSYNC 1
GOTO @LOOP

STICK OUTで読み取ったスライドパッドの値は、絶対値が最大1.0と小さいので、5倍して速度の値として使っています。
画面の端から飛び出さないように、Xの最大値と最小値をチェックしています。
MAX、MINといった命令を使って書くやり方もあります。
Yの値もほとんど処理は同じですが、Y軸は画面とスライドパッドが逆方向なので、Y+DYではなくY-DYになっています。

Zですが、常にZ=Z-DZを実行していますので、Zの値をDZだけ減算しつづけています。
ボタンを押さないとき、DZは0で、Zは変化しません。
Aボタンが押されたら、DZに正の値を入れます。
するとZの値がどんどん小さくなっていきますので、最小値(ここでは-200にしています)に達したら、今度はDZを負の値にします。
今度はZがどんどん大きくなっていき、最大値(500)に達したらDZを0にします。

以下の部分は、プログラミング初心者には分かりにくいかもしれません。
IF DZ==0 THEN DZ=16 AND BUTTON(2)

DZに「16 AND BUTTON(2)」を代入しています。
BUTTON(2)には、全てのボタンの状態がすべて入っています。
その中から、Aボタンの状態だけを取り出すために、ビット演算「AND」を使います。
「16 AND BUTTON(2)」の演算結果は、Aボタンが押されたら16、押されていなかったら0になります。
その16という数値を、そのままDZの値として流用しています。

やろうとしていることから考えると、本当は
IF DZ==0 THEN 
IF (16 AND BUTTON(2)) >0 THEN DZ=16
ENDIF

と書くべきところですが、IF文ひとつで済ませようと、横着しているわけです。
posted by boochow at 11:15| Comment(0) | プチコン講座 | このブログの読者になる | 更新情報をチェックする

2014年12月22日

プチコン3号 2日目 絵を動かしてみる

pc2-2.jpg


プチコン2日目は、画面に絵を表示してみます。
表示するだけなら、エディタでプログラムを書かずとも、ダイレクトモードで直接実行できます。
SPSET 0,502
SPOFS 0,200,160,500
SPSCALE 0,2.0,2.0

これで、RPG風のキャラクタが画面に表示されました。

1行目は、0番のスプライトに502番の絵を割り当てました。
スプライトというのは、画面に重ねて表示することができる小さな(16x16ピクセルの)絵です。
スプライトには、表示すると、重ねた下の画面は隠されますが上書きされない、という特徴があります。
ゲームで背景の絵に重ねて、敵や自分のキャラクタを表示するのに大変便利な機能です。
プチコン3号は512枚のスプライトを持っており、0〜511の番号で指定します。

次にスプライトに割り当てる絵ですが、これも番号で指定します。
どの番号でどんな絵が出るかは、Smileツールで確認できます。
Smileツールのボタンは画面下部中央あたりにあります。
pc2-0.jpg


Smileツールが表示されたら、その画面の下部中央の「SPDEF」ボタンを押します。
これでスプライトの一覧が表示されます。
絵柄は4096通りあり、0〜4095で指定します。
pc2-1.jpg


さて、次にスプライトの表示位置と大きさの指定です。
SPSET 0,502
SPOFS 0,200,160,500
SPSCALE 0,2.0,2.0

SPOFSはスプライトの表示位置を指定します。もちろん3次元で指定できます。
4つのパラメータ「0,200,160,500」はそれぞれスプライト番号、X、Y、Zの値です。
ちなみにOFSとは「offset」、基準点(原点)からの差分というような意味合いです。

SPSCALEはスプライトの拡大率です。
3つのパラメータはスプライトの番号、横方向の拡大率、縦方向の拡大率です。

SPOFSの値を変更すると、スプライトの表示位置が変わります。
値を連続的に変えてやれば、スプライトを動かすことができます。
簡単なプログラムを書いてみました。
pc2-3.jpg

X=0:Y=0:Z=200
DX=1:DY=1:DZ=20
SPSET 0,502
@LOOP
X=X+DX
IF X>368 OR X<0 THEN DX=-DX
Y=Y+DY
IF Y>208 OR Y<0 THEN DY=-DY
Z=Z+DZ
IF Z>500 OR Z<-200 THEN DZ=-DZ
SPOFS 0,X,Y,Z
S=1.0+(500-Z)/500
SPSCALE 0,S,S
VSYNC 1
LOCATE 0,0,0
PRINT X," ",Y," ",Z
GOTO @LOOP

プログラムの中身ですが、スプライトを一定速度で動かし、画面の端まで行ったら戻ってくるようにしています。
DX、DY、DZが単位時間の移動量(=速度)で、正の値と負の値で移動方向を指定しています。
X, Y, Zでどれもやっていることは同じです。

ちなみに単位時間とは、1/60秒です。
これはVSYNCで指定します。1/60秒が、指定できる最短の単位時間です。

なおVSYNCとはVertical Sync(垂直同期)のことで、アナログのビデオ回路の走査線が下から上へ戻るときの同期信号から来ています。昔のゲーム機は、ビデオ回路が画面を描いている途中で絵を変化させると、ちらつきなどの悪影響が出ていました。そのため、走査線が戻る期間(画面を描いていない時間帯)に一気に画面を更新するようにしていたのですね。

Z軸方向の移動については、スプライトが遠いときほどサイズを小さくするようにして、動きをデフォルメしてみました。
このほうが、画面の中で動いている感じが出ると思います。

画面の座標系は、原点が左上。
一般的なグラフなどと違って、Y軸が下向きです。
画面サイズはX軸が400、Y軸が240です。
Z軸は、画面位置が座標0で、手前が負、遠くが正。
画面奥行き方向は最大1024、画面手前方向は-256までの値で指定します。

スプライトも(特に指定しなければ)原点は左上になります。
2倍に拡大した(32x32ピクセル相当の)スプライトの右端が、画面の右端に一致するとき、スプライトの座標は
400 - 32 = 368

となりますので、上のプログラムでは座標が368を超えたときにX軸上の移動方向を反転するようにしています。

プチコン3号は、小学生にプログラミングを学ばせるのが目的なのかなと思ったのですが、その割に初歩的な解説が少ないようなので、今回は初心者講座っぽく詳しめに書いてみました。
昔はBASICの解説本は非常に多かったのですが、今ではマイナーな言語になってしまったのですね。
posted by boochow at 20:45| Comment(0) | プチコン講座 | このブログの読者になる | 更新情報をチェックする

2014年12月21日

プチコン3号 初めの一歩

というわけでプチコン3号の話題です。
公式の簡易マニュアルはこちらにあります。
プチコン3号 - 簡易電子説明書

ただ、このマニュアルは初めてプチコンを使う人向きではないので、最初に眺めるには、最初から入っている公式のデモプログラムを動かすところから始めるこちらの解説のほうが良いと思います。
プチコン3号 - プチコン3号を最初から

用意されたデモは結構多いので、最初は眺めるだけでも結構楽しめます。
ただ、そこからプログラミング開始へは、この解説だとちょっとハードルが高い感じがします。

まずはそれよりも、前回紹介したABAさんの
1000円を握りしめてニンテンドーeショップに駆け込み、プチコン3号を買って、以下のプログラムを打ち込もう。

をやってみました。

まずトップメニューから「SmileBASICでプログラムを作る」を選びます。
pc1-1.jpg

するとこんな画面になります。

上半分は、かつてのマイコン少年にはおなじみの画面です。
下半分はソフトウェアキーボードと開発環境のメニューを兼ねています。
pcshell.jpgpcide.jpg


ただ、昔のマイコンのように上半分の画面で直接プログラムを入力するのではありません。
上半分の画面は「ダイレクトモード」と呼ばれており、要するにコマンドシェルの役割をしているようです。
プログラムを入力するには、下画面のEDITボタンを押します。
pc1-2.jpg


すると上半分の画面がエディタになりますので、ここでプログラムをポチポチと入力していきます。
こんな感じです。
pcedit.jpg

プログラムの内容はABAさんの記事にあるとおり
@1:LOCATE RND(48),RND(30),RND(500)-250:PRINT "バカ":GOTO @1

です。
SmileBASICでは行番号は無く、@で始まるラベルを用いるようです。
カナの入力はEDITボタンの上にある入力モード切替ボタンで指定します。
「バ」は最初キーボードに出てきませんが、シフトキーを押すと出てきます。

入力が終わったら、EDITボタンの左にあるDIRECTボタンを押します。
すると上画面がダイレクトモードに戻ります。
pc1-3.jpg

ここで
RUN

と入力しEnterキーを押すとプログラムが実行されます。
プログラムの停止は3DS本体のSELECTボタンです。

画面が「バカ」で埋め尽くされたままですので
CLS

と入力してスクリーンをクリアしましょう。

以上でプログラムを入力して動かして止めることができましたが、上のプログラムをちょっとだけ変更して、バカの色をランダムに変更するようにしてみましょう。
それにはプログラムを以下のように変更します。
@1:LOCATE RND(48),RND(30),RND(500)-250:COLOR RND(16),RND(16):PRINT "バカ":GOTO @1


これで同じように実行すると、今度は文字の色と背景色がそれぞれランダムに設定されます。
ただ、実行が速すぎて何が何だかわかりませんね。
そこで、以下のようにさらに1命令追加します。
@1:LOCATE RND(48),RND(30),RND(500)-250:COLOR RND(16),RND(16):PRINT "バカ":VSYNC(10):GOTO @1

なお、SELECTでプログラムを停止すると、その時点の文字色・背景色で停止します。
CLSだけでは文字色・背景色が元に戻りませんので、これを元通りに黒の背景・白の文字色にリセットするには、
ACLS

と入力します。

こんな感じで初めの一歩は終わりです。
次は、やっぱり絵を表示したいですね!!
posted by boochow at 18:55| Comment(2) | プチコン講座 | このブログの読者になる | 更新情報をチェックする

プチコン3号を買ってみた

petitcom.jpg

このブログを1年あまりも放置してしまいました。
enchantMOONを買ってはみたものの、いまひとつ楽しめず、この1年はもっぱら音楽(DTM)にはまっていました。
あと、いまさらながらArduinoを買ってみて一通り動かしてみたりもしていたのですが、昔PICやAVRで電子工作をしていたので、それほどの新味は感じず、これまたお蔵入りになっています。
もっとも、Arduinoの開発環境はよく出来ているのは確かだし、Processingとの連携も面白いので、作りたいものとマッチすれば非常に便利そうです。

で、今度はニンテンドー3DS用のソフト「プチコン3号」が面白そうなので買ってみました。
そもそも3DSも持っていませんでしたので、3DSも買いました。
といっても3DS(旧型)は9,800円で買えましたし、プチコン3号がダウンロード販売で1,000円ですので、enchantMOONよりもだいぶ小さい出費です。

そんなわけで、これを機会にこのブログを再開しようと思います。


さてプチコン3号ですが、これは何かというと3DS上で動くプログラミング環境です。
言語は「BASIC」ですが、命令は3DSの機能を活かせるようにいろいろ拡張されているようです。
そして、現代風に一応エディタなどと統合したいわゆる統合開発環境(IDE)になっています。
キーボードが外付けできるともっと良かったんですが、まあハードの制約上仕方がないですね。

このプチコンシリーズ、ニンテンドーDS時代から続くシリーズで、今回で3代目なので「3号」という名前になっているようです。
興味深いのは、3号ではBASICはインタープリタではなくコンパイラになっているという点で、以前に比べて格段に実行速度が上がっているそうです。
がんばればかなり本格的なゲームの作成も可能で、「初代プレイステーションで出ていた2次元ゲーム並みのものは作れるはず」(スマイルブームの小林貴樹社長)とのこと。
初代プレステ並みのゲームをBASICで作れる『プチコン3号』 【東京ゲームショウ 2014】 日経トレンディネット

あと、まだ全部目を通していないのですが、熱心な解説記事がこちら。
「日刊!プチコン3号」最新記事一覧 - ITmedia Keywords

もっとも、プチコン3号を私が買おうと思ったのは、昔からゲームを作られているABA GAMESさんの日記がきっかけです。
1000円を握りしめてニンテンドーeショップに駆け込み、プチコン3号を買って、以下のプログラムを打ち込もう。

@1:LOCATE RND(48),RND(30),RND(500)-250:PRINT "バカ":GOTO @1
文字列の表示位置を指定するLOCATEの引数が3つあることに注目。3つ目の引数のZ座標で奥行きを設定することができ、このプログラムで3DSの上画面に飛び出す「バカ」が表示できる。

立体視を手軽に試すことができるという点では、プチコン3号はかなりイケている環境である。コンソール上のテキストだけでなく、スプライトやBGなどもZ座標を設定することで画面から飛び出した位置や奥まった位置に配置できる。ムダに立体なゲームが作りたくなる。

作ったゲームはサーバ上にアップロード、公開することができ、公開キーを打ち込むことでダウンロードできる。作ったゲームを配るのも簡単だ。
最新ゲーム機の裸眼立体視をマイコン時代のBASICで堪能できるプチコン3号 2014-12-01 - ABAの日誌

非常に簡潔かつポイントを押さえたご紹介ですね。

私はまだ、いじり始めたばかりで操作もよくわからない感じではあるのですが、まあ少しずつ紹介していければと思います。
posted by boochow at 12:40| Comment(0) | プチコン講座 | このブログの読者になる | 更新情報をチェックする
人気記事