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

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

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

 

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

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

前回の宿題の解答例

 

問題

前回の宿題の記事はこちらになります。

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

 ①解答例 
BASIC_MANUAL87

 

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

グラフィックス設定命令

Gr.set.antialias {{<lexp>}{,<paint_nexp>}}

アンチエイリアスをオンにするかオフにするかを設定します。lexpが0ならオフに、lexpが0以外ならオンになります。1ピクセル幅の線を引きたい場合は、オフにする必要があります。パラメーター無しでこの命令を使用すると、設定が切り替わります。(オンならオフに、オフならオンに)

アンチエイリアスとは:コンピューターでは画像をピクセルという点の集まりで表現します。その時、斜めの線を描画した時などにギザギザに見えてしまいます。それを軽減する手法がアンチエイリアスです。BASIC!では標準でオンになっています。

Gr.set.stroke {{<nexp>}{,<paint_nexp>}

線の幅を指定します。nexpを0指定すると、アンチエイリアスがオフの場合一番細い線(1ピクセル幅)を引くことができます。アンチエイリアスがオンの場合は、2x2ピクセルで線が引かれます。

Gr.orientation <nexp>

スクリーンの向きを制御できます。指定するnexpの値により以下の様になります。
-1 : センサーにより自動
0  : 横方向に固定
1  : 縦方向に固定
2  : 逆横方向に固定
3  : 逆縦方向に固定

Gr.statusbar {<height_nvar>} {, showing_lvar}

ステイタスバーの情報が返されます。height_nvarにはステイタスバーの高さが、showing_lvarにはGr.openでステイタスバー無しを指定していれば0、有りを指定していれば0が返されます。

Gr.screen width, height{, density }

スクリーンの幅と高さが返されます。densityはオプションでスクリーンのdpiが返されますが、通常不要です。スクリーンのオリエンテーションを変更した場合は、この値は正しくありません。

Gr.scale x_factor, y_factor

全ての描画コマンドを、x_factorとy_factorの倍率で描画します。使われている端末の画面の大小に関わらず、同じ画面を表示するために使います。プログラムを高さ480、幅800のスクリーンサイズで作成した時に、使っている端末の高さが960、幅1600の場合は、Gr.scale 2,2 と記述する事で正しく表示されます。

Gr.cls

グラフィックスクリーンのクリアーします。描画した内容は全て削除されます。Gr.colorやGr.textで指定した設定は全てリセットされます。クリアーした結果を表示するにはGr.render命令が必要です。

Gr.close

グラフィックモードを終了します。プログラムは終了しません。グラフィックスクリーンが消されて、テキストスクリーンが表示されます。

Gr.front flag

グラフィックスクリーン、テキストスクリーンのどちらを最前面に表示する(ユーザーに見せる)か指定します。flag=0であれば、テキストスクリーンが最前面になり、flagが0以外であればグラフィックスクリーンが最前面に表示されます。

Gr.brightness <nexp>

グラフィックスクリーンの明るさを設定します。nexpが0.01が一番暗く、1.0が一番明るくなります。

グラフィックスオブジェクト作成命令

前の記事で、四角と円を描く命令を紹介しました。ここでは、それ以外の命令を紹介します。

Gr.point <obj_nvar>, x, y

xとyで指定した座標に点を描画します。obj_nvarにはオブジェクトリストのオブジェクトナンバーが返されます。点のサイズはGr.set.strokeとGr.set.antialiasの設定によります。Gr.modifyのパラメーターはxとyです。

点を描くプログラム例:
BASIC_MANUAL88
実行結果:
BASIC_MANUAL89

Gr.line <obj_nvar>, x1, y1, x2, y2

座標(x1、y1)から座標(x2、y2)へ線が引かれます。obj_nvarにはオブジェクトリストのオブジェクトナンバーが返されます。線の太さはGr.set.strokeとGr.set.antialiasの設定によります。Gr.modifyのパラメーターはx1、x2、y1、y2です。

線を引くプログラム例:
BASIC_MANUAL90
実行結果:
BASIC_MANUAL91

Gr.oval <obj_nvar>, left, top, right, bottom

楕円形を描画します。obj_nvarにはオブジェクトリストのオブジェクトナンバーが返されます。塗りつぶすかどうかは、GR.colorのスタイルで指定します。Gr.modifyのパラメーターはleft,、top、 right、 bottomxです。

楕円形を描くプログラム例:
BASIC_MANUAL92
実行結果:
BASIC_MANUAL93

Gr.arc <obj_nvar>, left, top, right, bottom, start_angle, sweep_angle, fill_mode

円弧状の形を描画します。obj_nvarにはオブジェクトリストのオブジェクトナンバーが返されます。left,top,right,bottomで指定された4角の中心から、start_angleで指定した角度でsweep_angleの度数分円弧を描きます。

円弧を描くプログラム例①(start_angleを変更、sweep_angleは一定):
BASIC_MANUAL94
実行結果(分かりやすいように青で四角も描画してあります。):
BASIC_MANUAL95

円弧を描くプログラム例②(start_angleは一定、sweep_angleを変更):
BASIC_MANUAL96
実行結果(分かりやすいように青で四角も描画してあります。):
BASIC_MANUAL97

グラフィックステキスト命令

gr.text.draw命令が唯一のテキストを描画する命令です。その他のtext命令は描画しようとするテキストの属性を決めたり、確認する命令です。

Gr.text.draw <object_number_nvar>, <x_nexp>, <y_nexp>, <text_object_sexp>

ディスプレイリストに、テキストオブジェクトを挿入します。x_nexpとy_nexpの座標を起点にtext_object_sexpで指定したテキストが描画されます。この命令前に、以下の命令でテキストの属性を指定します。

Gr.text.align {{<type_nexp>}{,<paint_nexp>}}

Gr.text.draw命令で指定したx、yの位置にテキストを描画しますが、その時左寄せ(type_nexp=0)、真ん中(type_nexp=1)、右寄せ(type_nexp=2)に描画するか指定します。

文字を、左寄せ、センター、右寄せで描画する例:
BASIC_MANUAL98
実行結果:
BASIC_MANUAL99

Gr.text.bold {{<lexp>}{,<paint_nexp>}}

描画するテキストを太字にすることができます。lexpが0で太字オフ、0以外で太字オンになります。lexpを指定しないと、太字オンならオフに、オフならオンに切り替わります。

Gr.text.size {{<size_nexp>}{,<paint_nexp>}}

描画するテキストの大きさをピクセルで指定します。

Gr.text.skew {{<skew_nexp>}{,<paint_nexp>}}

描画するテキストをイタリック体(斜字体)にします。一般的なイタリック体に近い指定は、skew_nexpを-0.25に指定します。

Gr.text.strike {{<lexp>}{,<paint_nexp>}}

描画するテキストに打消し線を追加します。lexpが0なら打ち消し線無し、0以外なら打ち消し線有です。指定しない場合は、オンオフが切り替わります。

Gr.text.underline {{<lexp>}{,<paint_nexp>}}

描画するテキストに下線をつけることができます。lexpが0なら下線無し、0以外なら下線有りです。指定しない場合は、オンオフが切り替わります。

太字、イタリック体、打消し、下線のプログラム例:
BASIC_MANUAL100
実行例:
BASIC_MANUAL101

グラフィック命令その2は以上です。ここまででグラフィックスクリーンに様々な図形と文字を描画することができます。サンプルプログラム例を参考にご自分で色々試してみてください。次の記事では、描画した図形とビットマップを動かす命令について紹介します。

 

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

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

BASICカテゴリの最新記事