グラフィックスとサウンド


1: グラフィックス
RCBasic にはスゴい 2D グラフィックス API が搭載されています。まず、グラフィックスを描画可能にするにはウィンドウが必要です。デスクトップリケーションでは最大 8 枚、モバイルアプリケーションでは最大 1 枚のウィンドウを使用可能です。いったんウィンドウを開くと、描画処理はすべてカンバス (Canvas) と呼ばれる仮想レンダー領域で行われます。ウィンドウごとに最大 8 枚までのカンバスが使用可能であり、 0 ~ 7 までの数値で指定可能です。カンバスの定義時、カンバスのサイズとビューポート (Viewport) のサイズを考慮する必要があります。カンバスのサイズは描画で利用可能な全体の領域を指定、および表示対象となるビューポートのサイズは描画で利用可能な全体の領域で指定します。


上述のイメージはグラフィックプログラムに関する概略構造です。 640x480 のウィンドウの内側には 220x200 のカンバスが存在します。このカンバスのビューポートは 120x100 です。つまり、カンバスの全領域内から 120x100 の領域だけ表示されます。以下は、このウィンドウを作成するコードです。


mode = WINDOW_VISIBLE '別のウィンドウモードを設定するには WindowMode()
をご確認ください。WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)


上述のコードにおいて二本の線は一瞬で描画が終わります。

WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
0 - ウィンドウの識別番号です。ウィンドウには 0 ~ 7 までの数値を指定します。(モバイルではウィンドウ 0 のみアクセス可能です)

"グラフィックスの用例" - ウィンドウのタイトル

0, 0 - ウィンドウの x と y 座標 (WINDOWPOS_CENTERED 定数を使うとデスクトップの中央へウィンドウを開きます)

640, 480 - ウィンドウの幅と高さ

mode - このフラグの組み合わせでウィンドウの描画方法を指定します。

1 - これが 0 ならば vsync は無効になります。それ以外は有効になります。

CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
0 - カンバスの識別番号です。カンバスには 0 ~ 7 までの数値を指定します。
220, 200 - 描画用の全領域
60, 90 - ウィンドウにおけるカンバスの表示位置(このカンバスの描画時、この座標 (x,y) は 0 になります)
120, 100 - ビューポートの幅と高さです。これは表示されるカンバス領域のサイズです。
0 - このフラグが 0 ならばソリッドであり 1 ならばトランスペアレントになります。

いったんカンバスを開くと、カンバスへ描画できるようになります。描画処理の完了直後、 描画したものをすべて表示するために Update() 関数を呼び出してください。なにも描画していない場合であろうと、最低でも一度はメインループで Update() を呼び出してイベントキューを必ず更新してください。さもなければ、マウス、キーボード、ジョイスティックイベント、ウィンドウイベント、タッチイベントなどの取得ができなくなります。さて、赤色の長方形をスクリーンに描画するプログラムはこのようになります:


mode = WINDOW_VISIBLE
WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)

SetColor(RGB(255,0,0)) 描画カラーを赤に設定します。

RectFill(20, 20, 100, 100) カンバスの座標 (20, 20) へ 100x100 の長方形を描画します。

Update() 'すべての描画処理を表示後にイベントキューを更新します。

WaitKey() 'これはプログラム終了前にキーが押されるまで待機します。


すでに言及したとおり、最大 8 までのカンバスにアクセス可能です。複数のカンバスが使えるときは Canvas() 関数を使うことで描画先となるカンバスの切り替えができます。こちらの用例は 2 枚の違うカンバスに長方形を描画します。


mode = WINDOW_VISIBLE
WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
CanvasOpen(1, 150, 150, 200, 200, 150, 150, 0)

Canvas(0)
SetColor(RGB(255,0,0))
RectFill(20, 20, 100, 100)

Canvas(1)
SetColor(RGB(0,255,0))
RectFill(10, 10, 90, 90)

Update() 'すべての描画処理を表示後にイベントキューを更新します。

WaitKey() 'これはプログラム終了前にキーが押されるまで待機します。


併せてシェイプを描画できるため、 RCBasic にはイメージのロードと描画に関する組み込みコマンドがあります。一度にロードできるイメージは最大 1024 までであり、 0 ~ 4095 までの数値で指定可能です。以下はイメージのロードと描画をします。


mode = WINDOW_VISIBLE
WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)

LoadImage(0, "tst_image.png") 'イメージとして tst_image.png をイメージスロット 0 へロードします。

DrawImage(0, 20, 20) 'カンバスの座標 (20, 20) へスロット 0 にあるイメージを描画します。

Update() 'すべての描画処理を表示後にイベントキューを更新します。

WaitKey() 'これはプログラム終了前にキーが押されるまで待機します。



2: サウンド
サウンドのロードと再生はイメージのロードと描画と方法が同じです。一度にロードできるサウンドは最大 1024 までです。こちらのプログラムはサウンドのロードと再生をします。


mode = WINDOW_VISIBLE
WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)

LoadSound(0, "MySound.wav") 'サウンドファイルをサウンドスロット 0 へロードします。

PlaySound(0, 1, 3) 'スロット 0 にロードしたサウンドをチャネル 1 で 3 回ループ再生します。

Update()
waitkey()


一度にロードできるミュージックトラックは最大 1 までです。ミュージックのロードと再生は非常に簡単です。


mode = WINDOW_VISIBLE
WindowOpen(0, "グラフィックスの用例", 0, 0, 640, 480, mode, 1)
LoadMusic ( "MYMUSIC.MP3" )
PlayMusic ( -1 ) 'ループを -1 に設定するとミュージックを無限再生します。
Update()
waitkey()


これはグラフィックスとオーディオをプログラムへ組み込むための概要に過ぎません。これらに関する詳細情報は以下のカテゴリを参照してください:
ウィンドウ管理
カンバス
基本グラフィックス
イメージのロードと描画
サウンドとミュージック

RCBasic に収録の用例を読破することを強く推奨します。