MCPE Modders

GUIとは、グラフィカル・ユーザー・インターフェース(Graphical User Interface)の略で、グーイやジーユーアイなどと呼ばれています。
ユーザーとコンピュータ間で情報をやり取りする方法をUI:ユーザー・インターフェース(User Interface)と言い、その中でもパッと見で(グラフィカルに)使えるように工夫されたものがGUIです。
AndroidOSを使うとき、機能のほぼすべてがGUIで構成されています。
例えばPEの場合、ジャンプボタンや、スニークボタン、インベントリやHPなどなど、殆どがGUIです。

GUIで使える要素は数多くあります。
これらのGUIの要素は、View(ビュー)やWidget(ウィジット)と呼ばれるGUI用のライブラリで、GUIコンポーネントと呼ばれています。

画像	名前	説明
	テキストビュー android.widget.TextView	文字を表示します
	エディットテキスト android.widget.EditText	文字入力が出来る領域を表示します
	イメージビュー android.widget.ImageView	画像を表示します
	ボタン android.widget.Button	ボタンを表示します
	チェックボックス android.widget.CheckBox	選択するとチェックが入るボタンです
	ラジオボタン android.widget.RadioButton	グループの中から一個だけ選択するボタンです
	トグルボタン android.widget.ToggleButton	ON/OFFが入れ替えられるボタンです
	プログレスバー android.widget.ProgressBar	待ち時間を表示します
	シークバー android.widget.SeekBar	度合を選択できます

また、表示させる方法にもいくつか種類があります。
用途に応じて使い分けましょう。

画像	名前	説明
	ポップアップウィンドウ android.widget.PopupWindow
	ダイアログ android.app.Dialog
	アラートダイアログ android.app.AlertDialog

では早速GUIを表示してみましょう。

まずは例１のコードを開いて、ザッとで良いので見てみてください。
この例１のコードでは、棒で叩く度にボタンが表示されたり消されたりするように書かれています。

この後、各コードで何をしているのか、詳しく解説していきます。

アクティビティとは、Androidアプリの画面そのもので、パソコンで言う所のウィンドウにあたります。
ウィンドウには拡大縮小の機能がありますが、アプリの画面は全画面表示が基本です。

Viewを作る時、Viewが何に関連したViewなのか、
また、スレッドを建てる時に何と一緒に動作すれば良いのかという情報が必要になります。
この情報はコンテキストと呼ばれ、アクティビティから取得できます。

PEのGUIを作りたいのですから、PEのアクティビティからコンテキストを取得します。
それを行っているのが下のコードになります。

 //PEのアクティビティからコンテキスト(ctx)を取得。
var ctx = com.mojang.minecraftpe.MainActivity.currentMainActivity.get();

コンテキストの取得はGUIの基本です。
取得したコンテキストを元にして、GUIを構築していきます。

次に、ボタンを作ります。
new演算子を用いて、ボタンのコンストラクタを呼び出します。
コンストラクタの引数には、先ほど取得したコンテキストを渡します。

 //ボタンを作成
var button = new android.widget.Button(ctx);

これでボタンが作れた訳ですが、このままではただのタップ出来る灰色の領域でしかありません。
そこで、ButtonクラスのメソッドであるsetTextを用いて、ボタンの上に表示する文字列を設定します。

 //ついでに文字を設定する。
button.setText("ボタン");

次に、作ったボタンを表示させる方法を選択します。
今回はポップアップウィンドウを使います。

今回使うコンストラクタには、表示するViewと一緒に、ポップアップウィンドウのサイズをint型で指定します。
第二引数がポップアップウィンドウの横の長さで、第三引数が縦の長さになります。

 //ポップアップウィンドウを作成。これがボタンを表示する画面になる。
var popupWindow =  new android.widget.PopupWindow(button, 350, 200);

350, 200と渡しているので、横幅が350、縦幅が200になります。

さて、ボタンを表示させる方法も決めたので、表示させましょう。
その方法がshowAtLocationメソッドです。
その名の通り、(指定した)場所(Location)で表示(show)する関数です。

 //showAtLocationメソッドの引数
popupWindow.showAtLocation (Parent, Gravity, X, Y)

このメソッドの引数を順に説明します。

• showAtLocationの引数

型	引数	説明
View	Parent	ポップアップウィンドウの親となるViewの情報です。 これはコンテキストからViewを取得する、ctx.getWindow().getDecorView()というコードで渡しています。
int	Gravity	画面のどこを基準にするかの情報です。 横の位置｜縦の位置で指定します。 位置は、それぞれandroid.view.Gravityの定数で指定します。
int	X	横方向のズレを指定します。 正で右側に、負で左側に表示領域をずらします。
int	Y	縦方向のズレを指定します。 正で下側に、負で上側に表示領域をずらします。

• 第二引数 Gravity に利用可能な定数

利用可能な定数のリスト
android.view.Gravity.TOP	上
android.view.Gravity.CENTER	中央
android.view.Gravity.BOTTOM	下
android.view.Gravity.LEFT	左
android.view.Gravity.RIGHT	右

実際に値を入力したコードが以下になります。

    //スレッドが実行された時、ポップアップウィンドウを表示させる。
    popupWindow.showAtLocation(ctx.getWindow().getDecorView(), android.view.Gravity.CENTER|android.view.Gravity.CENTER, 0, 0);

表示したボタンを消したい場合は、dismissメソッドを使います。

    //スレッドが実行された時、ポップアップウィンドウを消す
    popupWindow.dismiss();

ポップアップウィンドウの表示の仕方も、消し方も判りました。
ですが実は、これらのメソッドはGUI用のスレッドの中で動かさないと機能しません。

次は、スレッドについて説明していきます。

プログラムは通常、１つ１つの処理を上から順番に実行していきます。
途中で処理を追加して、あれもやりながらこれもやる、といった風に２つの事を同時に処理出来る様には作られていません。
そこで、２つ以上の事を同時に処理出来るように作られた仕組みがスレッドです。

スクリプトmodのコードは一回こっきりの処理です。
Enableした時やBlockLouncherを起動した時に処理され、そして終わります。

スクリプトmodでGUIを表示させる場合、ゲーム内の動きに合わせてGUIも動く仕組みを用意する必要があります。
そこでスレッドが必要になってくるのです。

今回はGUI入門なので、ユーザーインターフェース用のスレッドを紹介します。
runOnUiThreadメソッドは、スレッドを立ち上げると同時に実行します。
引数には、スレッドの中で稼働させたい処理を持ったRunnableインターフェースを渡します。

   //PEのコンテキスト(ctx)にユーザーインターフェースを扱うスレッドを立てる。
   //スレッドの中でランナブルを稼働させる。
  ctx.runOnUiThread(runnable);

スレッドの立て方、実行の仕方はこれだけです。

では次に、スレッドの中身、Runnableインターフェースについて説明していきます。

Runnableインターフェースは、スレッドを作るためのインターフェースです。
ランナブルのコンストラクタには、runメソッドを持ったオブジェクトが必要です。
このrunメソッドの中の処理が、スレッドの中で動く処理になります。

 //ランナブルを作成。ランナブルは、スレッドが処理する内容を持つ。
var runnable = new java.lang.Runnable(
  //ランナブルの引数に、runメソッドを持つオブジェクトを渡す。
  //runメソッドが、スレッドで動く処理になる。
 {run:function(){
/* スレッドの中で動かしたい処理を書く */
 }}
);

以上が、例１のコードの説明です。

例１のコードでやっている事を大まかにまとめると...

1. コンテキストを取得する。
2. ボタンを用意する。
3. ボタンを表示するポップアップウィンドウを用意する。
4. スレッドの中身であるランナブルを用意する。
   1. runメソッドに、ポップアップウィンドウの表示/非表示の処理を書く。
5. useItemの中に、棒で叩いたらスレッドを起動させるコードを書く。

といった流れになります。

ただ、このままでは、ボタンは表示されているだけで何の機能もありません。
ボタンを押して、何かさせたい場合、リスナーという機能を使います。
次は、このリスナーについて説明していきます。

【戻る】　【リスナー編→】