Section 3.1 ウィンドウを作る

今回から第3章、ネイティブクラス編だよ。
ネイティブクラスって?
ネイティブクラスってのは、吉里吉里本体に組み込まれてるクラスのこと。
つまり、定義しなくても元々使えるクラスだね。
今までにも色々使ってきたよね。
それって、System クラスとか Date クラスとかのこと?
そーそー。
ネイティブクラスには他にもウィンドウ関係とか、レイヤ関係とか、サウンドの再生関係とかの KAG でもお馴染みのクラスがあるから、この章ではそういうクラスについて見ていこうと思うんだ。
あ、そういうのも元々使えるクラスなんだ。
うん。ウィンドウとかを一から自分で作ろうと思ったら大変だからね。
そっか、それもそうだよね。
じゃあ、今回はまずウィンドウを作ってみるね。
作るって…ウィンドウのクラスって元々あるんでしょ?
あー、ここで言う「作る」ってのは、ウィンドウのクラスを継承して新しいクラスを作って、機能の拡張とかをしようってこと。
あ、なるほど。そういうことね。
で、ウィンドウを作ったり管理したりするクラスは、Window クラスって言うんだ。
そのまんまだねぇ。
まぁね。
じゃあまずは、一番シンプルなウィンドウを作ってみるね。
うん!

<一番簡単なウィンドウ>

class SimpleWindow extends Window
{
    // コンストラクタ:スーパークラスのコンストラクタを呼び出します
    function SimpleWindow()
    {
        super.Window();
        visible = true;  // ウィンドウを表示状態にします
    }

    // デストラクタ:スーパークラスのデストラクタを呼び出します
    function finalize()
    {
        super.finalize();
    }
}

var win = new SimpleWindow();  // ウィンドウを作ります

Window クラスを継承してるだけで、他にはほとんど何もやってないみたいだね。
コンストラクタの中の visible っていうのは?
visibleWindow クラスのプロパティの一つで、 true にするとウィンドウが見えるようになるんだ。
じゃあ false にすると見えなくなるってこと?
そ。ちなみにデフォルトは false だから、 最初に visibletrue にしとかないと、実行しても何も表示されないんだ。
ふぅん、そうなんだ。
んじゃ、とりあえず実行してみて。
うん。

<実行結果>

表示されたウィンドウ

おー、ちゃんとウィンドウが表示された〜。
まぁ、設定はほとんどデフォルトのままだし、まだ何の機能も追加してないから、ホントにシンプルなウィンドウだけどね。
じゃあこれから色々設定したり、機能を追加したりするの?
うん。機能を追加するのはまた後でやるとして、今回はウィンドウのプロパティを見ていこっか。
うん、りょーかい。
じゃあまずは width プロパティと height プロパティからね。
それってどんなプロパティなの?
width はウィンドウの幅、height はウィンドウの高さを取得したり設定したりするプロパティだよ。
だから、こうすると…

<ウィンドウの幅と高さを設定するスクリプト>

var win = new SimpleWindow();  // ウィンドウを作ります
win.width = 640;   // ウィンドウの幅を 640 ピクセルに設定します
win.height = 480;  // ウィンドウの高さを 480 ピクセルに設定します

ウィンドウの幅と高さが 640×480 ピクセルになるよ。
ちょっと実行してみて。
はーい。

<実行結果>

表示されたウィンドウ

あ、ほんとだ。ウィンドウがおっきくなった。
あと幅と高さにはもう一組、innerWidth プロパティと innerHeight プロパティっていうのもあるんだ。
それって widthheight とどう違うの?
innerWidthinnerHeightクライアント領域の幅と高さを取得したり設定したりするプロパティなんだ。
クライアント領域って?
ウィンドウ内部のこの赤い部分の領域のことだよ。

<クライアント領域>

クライアント領域

つまり、クライアント領域はレイヤを表示できる領域ってことだね。
あ、そうなんだ。
じゃあ、Config.tjs で設定する画面サイズってクライアント領域のサイズなの?
ん、そうそう。
Config.tjs で設定できる scWidthscHeight がそれぞれ innerWidthinnerHeight に対応してるよ。
なるほどね〜。
あと、ウィンドウの幅と高さを設定できるメソッドもあるんだ。
幅と高さを両方設定する時は、プロパティで別々に設定するより、メソッドを使って一度に設定した方が効率的なんだ。
へぇ、そうなんだ。
それってどんなメソッドなの?
ウィンドウの幅と高さは setSize メソッドで設定できるよ。
第1引数に width、第2引数に height を指定するんだ。

<ウィンドウの幅と高さを設定する setSize メソッド>

var win = new SimpleWindow();  // ウィンドウを作ります
win.setSize(640, 480);  // ウィンドウの幅と高さを 640×480 ピクセルに設定します

あと、クライアント領域の幅と高さを設定する時は setInnerSize メソッドを使うんだ。
第1引数が innerWidth で、第2引数が innerHeight だよ。

<クライアント領域の幅と高さを設定する setInnerSize メソッド>

var win = new SimpleWindow();  // ウィンドウを作ります
win.setInnerSize(640, 480);  // クライアント領域の幅と高さを 640×480 ピクセルに設定します

ちなみに、ウィンドウのサイズを設定するとクライアント領域のサイズが自動的に決まるし、 クライアント領域のサイズを設定するとウィンドウのサイズが自動的に決まるから、どっちか片方だけ設定すれば OK だよ。
それじゃ、次は left プロパティと top プロパティ。
それってもしかしてウィンドウの位置を設定するプロパティ?
ん、そうだよ。
left プロパティがウィンドウの左端、top プロパティが上端の位置を取得したり設定したりするプロパティなんだ。
ウィンドウの位置ってどこが基準になってるの?
left は画面の左端から何ピクセル右にあるかで、 top は上端から何ピクセル下にあるかだから、 画面の左上の点が基準になってるってことだね。
そっか。
うん、わかった。
だから、例えばウィンドウを画面の真ん中に表示したい時には、こんなふうにすればいいんだ。

<ウィンドウを画面の中央に表示するスクリプト(その1)>

var win = new SimpleWindow();  // ウィンドウを作ります
win.setInnerSize(640, 480);  // クライアント領域の幅と高さを 640×480 ピクセルに設定します
win.left = (System.screenWidth - win.width) \ 2;
win.top = (System.screenHeight - win.height) \ 2;

System.screenWidthSystem.screenHeight って?
System.screenWidth は画面の幅を取得できるプロパティで、 System.screenHeight は画面の高さを取得できるプロパティだよ。
画面の幅からウィンドウの幅を引いて2で割った位置に left を設定して、 画面の高さからウィンドウの高さを引いて2で割った位置に top を設定すると、 ウィンドウが画面の真ん中に表示されるんだ。
なるほどね〜。
あと、ウィンドウの位置の設定は setPos っていうメソッドを使ってもできるよ。
第1引数が left で第2引数が top ね。

<ウィンドウを画面の中央に表示するスクリプト(その2)>

var win = new SimpleWindow();  // ウィンドウを作ります
win.setInnerSize(640, 480);  // クライアント領域の幅と高さを 640×480 ピクセルに設定します
win.setPos((System.screenWidth - win.width) \ 2, (System.screenHeight - win.height) \ 2);

やっぱり lefttop を一度に設定したい時は、 setPos メソッドを使った方がいいの?
うん、その方が効率的だね。
じゃ、最後は caption プロパティね。
これはウィンドウのタイトルを取得したり設定したりするプロパティ。

<ウィンドウのタイトルを設定するスクリプト>

var win = new SimpleWindow();  // ウィンドウを作ります
win.caption = "うぃんどう";  // ウィンドウのタイトルを設定します

実行してみるね?
うん。

<実行結果>

表示されたウィンドウ

タイトルバーのところに「うぃんどう」って表示されたね。
うん。
ちなみに、caption を設定しても、タスクバーの表示は変わらないから注意してね。
タスクバー…って、画面の下の方に並んでるののことだよね?
確かにタスクバーには「うぃんどう」じゃなくて「吉里吉里」って表示されてるね。
タスクバーの表示は System クラスが管理してるから、 設定したい時は System クラスの title プロパティを使うんだ。

<ウィンドウ&タスクバーのタイトルを設定するスクリプト>

var win = new SimpleWindow();  // ウィンドウを作ります
win.caption = "うぃんどう";  // ウィンドウのタイトルを設定します
System.title = win.caption;  // タスクバーのタイトルをウィンドウのタイトルと同じ文字列に設定します

ほんとだ。こうするとタスクバーの表示がウィンドウのタイトルと同じになったね。
でしょ。
あと、Window クラスには他にもメソッドやプロパティがあるんだけど、とりあえず今回はこれくらいにしとくね。
Window クラスのメソッドやプロパティは、吉里吉里2リファレンスの『Window クラス』の項目に載ってるから、 詳しくはそっちを参照してね。
リファレンスには Window クラスのメソッドやプロパティがいっぱい載ってるねぇ。
さすがに全部は説明できないと思うけど、今回説明してないメソッドやプロパティは、必要になった時に改めて説明するね。
うん、わかったよ。
それじゃ、今回はここまで。
また次回ね。


前へ | TOP | 次へ