当サイトは2020年小学生のプログラミング必修化に向けて、関連する情報を纏めています。サイトリニューアルしました。

子供のプログラミング BASIC!を使ってみよう 6

子供のプログラミング BASIC!を使ってみよう 6

 

当サイトで紹介して、私が日本語化したアンドロイドアプリBASIC!のマニュアルの日本語版です。今回はグラフィックス命令についてです。尚、原文をそのまま訳すのでは無く、分かりやすく変更したり、実例の追加などをしていきます。

BASIC!MLの詳しい導入手順と初めての使い方はこちらの記事を参照してください。英語版のマニュアルはこちらにあります。

BASIC!のマニュアル グラフィックス命令

 

グラフィックス命令の概要
 グラフィックスウインドウとグラフィックスモード 

グラフィックス(画像、絵など)は、Print命令等が出力されるテキストウインドウとは別のグラフィックスウインドウに出力されます。グラフィックスウインドウからテキストウインドウを表示するには、『戻る』キーかGr.front命令を使います。(Gr.front命令は、グラフィックスウインドウとテキストウインドウを入れ替える命令です)

Gr.open命令でグラフィックスウインドウが開かれ、BAISC!がグラフィックモードになります。グラフィック関係の命令を使うには、まずGr.open命令でグラフィックスモードにしておく必要があります。グラフィックスモード以外でグラフィックス命令を使うと、実行時エラーになります。グラフィックスモードを終了(グラフィックスウインドウを閉じる)するには、Gr.close命令を使います。『戻る』か『メニュー』をタップすると、グラフィックスモードは終わりテキストウインドウが表示されますが、プログラムは終了しません。

グラフィックスウインドウが開かれると、テキストウインドウは隠されます。もし、実行時エラーが発生した時は、ブッブッとスマホ、タブレットが振動しますので、『戻る』キーでテキストウインドウを開いてエラーメッセージを確認してください。

プログラムが終わると、グラフィックスウインドウは閉じてしまいますので、残しておきたい時は、『プログラムループを使って何かのキーを押したら、プログラムが終わる』などしてプログラムで対応してください。

 Disply List(ディスプレイリスト) 

グラフィックス命令で描かれるオブジェクト(線、円、テキストなど)は、オブジェクトリストと呼ばれるリストに保管されます。グラフィックス命令には、オブジェクトナンバー(オブジェクトポインター)が返されます。このオブジェクトナンバーは、プログラム実行中にオブジェクトを変更する為に使えます。Gr.mofify命令を使って、オブジェクトリストにあるどのオブジェクトのパラメーターでも変更できます。この機能により、オブジェクトリスト内のオブジェクトを作り直す事なく(無駄な負荷なく)、アニメーションを作ることができます。

グラフィックススクリーンにグラフィックスオブジェクトを描画するために、ディスプレイリストは使われます。ディスプレイリストには、グラフィックスオブジェクトのポインターが保管されています。グラフィックスオブジェクトがオブジェクリストに加えられると、そにオブジェクナンバーがディスプレイリストにも追加されます。グラフィックスオブジェクトは、ディスプレイリストにある順番でグラフィックスウインドウに描画されます。ディスプレイリストにあるオブジェクトは、Gr.render命令を実行するまでグラフィックスウインドウに描画されません。

Gr.NewDL命令で、ディスプレイリストを自分で変更したディスプレイリスト配列で置き換えることができます。変更したディスプレイリスト配列には、元のディスプレイリストの1部(又は全部)が含まれます。例えば、オブジェクトのzオーダー(どのオブジェクトを1番上に描画する等)を変更するなどに使えます。サンプルプログラムのf24_newedl.basにGr.NewDLの使用例があります。

 描画座標 

描画されるオブジェクトの大きさと場所は、ピクセル(pixel)単位で指定します。画面の左上端がx=0(水平位置)、y=0(垂直位置)になります。座標値は、画面の左から右、上から下に向かって増加します。最大座標は画面の大きさに依存します。アンドロイドステイタスバーを表示すると、その部分に描画されたものは、ステイタスバーで上書きされます。

 ビットマップ描画 

ウインドウに直接オブジェクトを描画する以外に、ビットマップに描画できます。ビットマップに描画する場合は、Gr.bitmap.drawinto.start命令を使います。この命令で、BASIC!はビットマップ描画モードになります。このモードで描画されたオブジェクトは、オブジェクトリストに含まれません。この命令で返されるオブジェクトナンバーは正しくなく、Gr.modify命令などで使用してはいけません。ビットマップ描画モードを終わるには、Gr.bitmap.drawinto.end命令を使います。その後の描画命令では、オブジェクトはオブジェクトリストに、オブジェクトナンバーはディスプレイリストに保管されます。ビットマップ描画モードで描いたオブジェクトをウインドウに描画するには、Gr.bitmap.draw命令を使います。ビットマップ描画モードの内容は、いつでもウインドウに描画できます。

 色 

BASIC!で使用する色は、赤(R)、緑(G)、青(B)の混合色で表現されます。各R、G、Bの数値は0〜255です。黒は、3つの値がすべてゼロの場合です。白は、3つの値がすべて255の場合です。赤は、Rが255で、GとBが0の場合です。

色にはアルファチャンネルと呼ばれる値があります。アルファチャンネルは、色の不透明度を表します。アルファ値255は完全に不透明で、アルファ値が0の場合、オブジェクトは非表示になります。

 ペイントオブジェクト 

BASIC!は、グラフィックスオブジェクトの色、フォントサイズ、スタイルなどの情報をペイントオブジェクトに保管し、ペイントオブジェクトはペイントリストに保管されます。訳者注:この内容は上級者用ですので基本編では説明を省きます)

グラフィックス設定命令抜粋
 Gr.open {{alpha}{, red}{, green}{, blue}{, <ShowStatusBar_lexp>}{, <Orientation_nexp>}} 

グラフィックスウインドウを開き、グラフィックスモードになります。指定する色の値は背景色です。ディフォルトは乳白色(α=255,R=255,G=255,B=255)です。ShowStatusBar_lexpが真なら、アンドロイドステイタスバーが表示されます。Orientation_nexpはGr.orientationのパラメーターと同じです。このパラメーターを指定しないと画面は横方向になります。

 Gr.color {{alpha}{, red}{, green}{, blue}{, style}{, paint}} 

基本:これ以降のグラフィックスオブジェクトは、この命令で指定された色やスタイルで描画されます。
上級:paintパラメーターを使用しますが、基本編では省略します。

1度Gr.colorで指定したパラメーターは、次のGr.color命令で指定しなければ、前の値が使われます。例えば、Gr.color 255,0,0,0と最初に指定し、次にGr.color ,255と指定した場合はGr.color 255,255,0,0 と指定した事と同じです。スタイルパラメーターについては、改めて詳しく説明しますが、0=アウトライン、1=フィル、2=アウトラインとフィルです。

 Gr.render 

現在のディスプレイリストにあるオブジェクトを描画します。次のグラフィックスウインドウが更新されるまで、そのまま表示されます。

 Gr.close 

グラフィックススクリーンが閉じてグラフィックスモードが終了し、テキストスクリーンが表示されます。

グラフィックスオブジェクト作成命令抜粋
 Gr.rect <ob_nvar>, left, top, right, bottom 

指定した場所に四角形を描画します。塗りつぶすかどうかは、GR.colorのスタイルで指定します。塗りつぶす場合は、場合は1を指定します。

 Gr.circle <obj_nvar>, x, y, radius 

指定した場所に円を描画します。塗りつぶすかどうかは、GR.colorのスタイルで指定します。塗りつぶす場合は、場合は1を指定します。

ここまでの命令でグラフィックスウインドウプログラムを作る

以下が、円を描くプログラム例です。
BASIC_MANUAL81

実行結果1:まず、次にグラフィックスウインドウで円を描きますのメッセージを表示されますので、OKをクリックします。
BASIC_MANUAL82

実行結果2:白い背景に赤い円が2秒表示されます。
BASIC_MANUAL83

実行結果3:次に塗りつぶした赤い円を描きますメッセージを表示しますので、OKをクリックします。
BASIC_MANUAL84

実行結果4:白い背景に赤く塗りつぶした円が2秒表示されます。これでプログラムは終了です。
BASIC_MANUAL85

やってみよう

下のような日本の国旗を緑の背景で描いてみてください。大きさとかバランスは好みで良いです。
BASIC_MANUAL86

回答例は次の記事で紹介します。次回もグラフィックス関係の命令の続きです。

クロームブラウザーをご使用の方へ

当サイトへの訪問ありがとうございます。その際、グーグルクロームブラウザーをお使いの方にお知らせです。グーグルクロームブラウザーでは、2018年7月から、サイトにより以下の表示がブラウザーのアドレスバーに表示されます。当サイトでも表示されますが、心配ありませんのでご安心ください。
SSL案内1
これは、SSLと呼ばれるWebサイトとそのサイトを閲覧しているユーザとのやり取り(通信)を暗号化するための仕組みを使用していないためです。ネットショッピング、銀行サイトではパスワードやクレジットカードの情報を扱いますので、必須の仕組みです。当サイトでは、そのような情報を扱っておりませんので、暗号化は必須ではありませんが、訪問される方により安心していただけるように、SSL化を予定しております。このメッセージはSSL化完了まで念のため表示します。

BASICカテゴリの最新記事