これまで学んだグラフィック命令を使って、簡単なアニメーションを作成してみましょう。
はじめに
いよいよミニプロジェクトの時間です! これまで、画面に点を打つ (PSET
)、線 (LINE
) や円 (CIRCLE
) を描く方法を学びましたね。今回は、これらの知識を組み合わせて、画面上で図形が動くような「シンプルなグラフィックデモ」を作成します。プログラミングの楽しさを実感できるステップですよ!
1. 画面の準備:グラフィックモードへ切り替えよう
まず、グラフィックを描画するためには、画面をテキストモードからグラフィックモードに切り替える必要があります。多くの場合、SCREEN
命令を使用します。どのモード番号を使うかは、使用しているBASIC処理系によって異なりますが、ここでは一般的な例を示します。
SCREEN
モードを確認しましょう。FreeBASICでは高解像度モードを指定できる SCREENRES
が推奨されることが多いです。QBasicなどでは、SCREEN 13
(320×200, 256色) がよく使われます。
2. 図形を描画して動かす:円のアニメーション
画面の準備ができたら、図形を描いてみましょう。ここでは、画面中央に円を描き、それを左右に動かす簡単なアニメーションを作成します。
必要な要素は以下の通りです。
- 円を描画する:
CIRCLE (x, y), 半径, 色
- 動きを作る: ループ処理 (
DO...LOOP
やFOR...NEXT
) を使って、円の中心座標x
を少しずつ変える - 座標を保持する変数: 円の中心座標 (
x
,y
)、移動方向 (dx
) などを変数で管理する - ちらつきを防ぐ(簡易版): 描画する前に前の円を背景色で消す
- 速度調整: 処理を一時停止する命令 (
SLEEP
など) を使う
- 上記のコードは特定のBASIC処理系(QBasicやFreeBASICなど)を想定した例です。変数宣言の
AS INTEGER
やSLEEP
命令など、お使いの環境に合わせて調整が必要な場合があります。 - 座標の範囲 (
319
や199
) は、SCREEN
で選択したモードの解像度に合わせてください。 - 色の番号(
circleColor = 14
,bgColor = 0
)も、選択した画面モードによって使える色や番号が異なります。 - より滑らかなアニメーションを実現するには、ダブルバッファリングなどの高度なテクニックがありますが、ここでは基本を理解するためにシンプルな方法を採用しています。
3. 発展:色々な図形や動きを試してみよう!
基本の動きが作れたら、さらに工夫してみましょう。アイデア次第で様々なデモが作れます!
- 図形の変更:
CIRCLE
の代わりにLINE
やPAINT
を使って、線や四角形を動かしてみる。 - ランダムな動き:
RND
関数を使って、図形の位置、色、移動方向をランダムに変えてみる。星が瞬くようなデモなどが作れます。 - カラフルに: ループの中で
COLOR
命令(または描画命令の色指定部分)を変えて、図形の色を変化させる。 - マウスやキー入力への反応:
INKEY$
やマウス入力関数(処理系による)を使って、ユーザーの操作で図形を動かしたり、描画パターンを変えたりする。 - 複数の図形を動かす: 配列を使って複数の図形の座標や色を管理し、それぞれを動かす。
例えば、画面上にランダムな位置にカラフルな点を打ち続けるデモは、PSET
と RND
、ループ処理だけで簡単に作れます。
まとめ
今回は、シンプルなグラフィックデモの作成を通して、SCREEN
, CIRCLE
, PSET
, COLOR
といった描画命令と、DO...LOOP
などの制御構文、変数や条件分岐を組み合わせる実践的な方法を学びました。自分のアイデアを形にする楽しさを感じていただけたでしょうか?
これでミニプロジェクトのステップは完了です! BASICプログラミングの基礎から応用まで一通り学習を進めることができました。この経験を活かして、さらに面白いプログラム作りに挑戦してみてくださいね!
参考情報
より詳しい情報や他のテクニックについては、以下のリソースも参考にしてみてください。
- FreeBASIC Wiki (Graphics): https://www.freebasic.net/wiki/wikka.php?wakka=FBWiki (FreeBASICのグラフィック関連ドキュメント。英語ですが情報が豊富です。)
- QB64 Wiki (Graphics): https://github.com/QB64Official/qb64/wiki#graphics (QBasic互換のQB64に関するグラフィック情報。
SCREEN
モードや各描画命令の使い方が参考になります。) - Pete’s QBasic Site (Graphics Tutorials): https://petesqbsite.com/sections/tutorials/graphics/ (QBasic/QuickBasicのグラフィックチュートリアル集。基本的な描画からアニメーションテクニックまで解説されています。)