SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ゲームエンジン「ngCore」最速チュートリアル(AD)

ngCoreによるゲーム開発入門
~ ステップバイステップで理解する開発の流れ

ゲームエンジン「ngCore」最速チュートリアル 第3回

  • このエントリーをはてなブックマークに追加

コード解説

 ステップごとに丁寧にコードを解説していきます。

  • LIST1の1~2行目)require関数でUIパッケージやLocalGameListクラスの読み込みをしています。LocalGameListクラスはゲームを再起動させるために呼び出しています。また、このrequire関数はngCore独自の関数です。
  • LIST1の4行目)処理の起点となるmain関数の定義をしています。
  • LIST1の5行目)ボタン表示位置を決めるため画面の高さを取得しています。UI.Window.outerHeightで端末画面の高さを取得できます。iPhone4だと960、Nexus SやGALAXY Sだと800になります。単位はピクセルです。
  • LIST1の6~18行目)UI.Buttonオブジェクトを生成しています。コンストラクタでプロパティを設定していますが、各プロパティが描画や挙動にどのように作用するかは表1を参照してください。
    表1:UI.Buttonのプロパティ
    プロパティ 説明
    frame UIオブジェクトの表示位置とサイズを指定します。[表示位置X,表示位置Y,幅,高さ]となります。
    backgroundColor 背景色をARGB値で指定します。
    normalText 通常時に表示されるテキストを指定します。
    pressedText ボタンが押された時に表示されるテキストを指定します。
    textSize テキストサイズを指定します。
    textColor テキストカラーをARGB値で指定します。
    textGravity テキストの水平配置、垂直位置を指定します。[0,0]とすると左寄せ、上寄せ、[0.5, 0.5]とすると共に中央寄せ、[1,1]とすると右寄せ、下寄せとなります。
    touchable タッチ可能な要素かどうか指定します。
    onClick タッチイベントのコールバック関数を指定します。ボタンが押されるとここで指定された関数が実行されます。UI.Buttonクラス特有のプロパティです。
  • LIST1の19行目)ボタンオブジェクトを画面に描画します。

プロパティ設定方法

 UIオブジェクトはいくつかの方法でプロパティを設定できます。ボタンを表示させるコードではコンストラクタで値を指定していましたが、個別のsetterメソッド、setAttributeメソッド、setAttributesメソッドを使うこともできます。

 画面に「GAME OVER」とテキストを表示するコードでその方法を示します。

個別のsetterメソッドを使う
var x = (UI.Window.outerWidth - 200) /2;
var y = (UI.Window.outerHeight - 50) / 2;
var label = new UI.Label();
label.setFrame([x, y, 200, 50]);
label.setText("GAME OVER");
UI.Window.document.addChild(label);
setAttributeメソッドを使う
var x = (UI.Window.outerWidth - 200) /2;
var y = (UI.Window.outerHeight - 50) / 2;

var label = new UI.Label();
label.setAttribute(
  "frame", [x, y, 200, 50]);
label.setAttribute("text", "GAME OVER");

UI.Window.document.addChild(label);
setAttributesメソッドを使う
var x = (UI.Window.outerWidth - 200) /2;
var y = (UI.Window.outerHeight - 50) / 2;

var label = new UI.Label();
label.setAttributes({
  "frame": [x, y, 200, 50],
  "text" : "GAME OVER"
});
UI.Window.document.addChild(label);

UIパッケージの探索

 非常に簡単でしたが、UIパッケージの説明は終了です。ここでは紹介できませんでしたが、UIパッケージには様々なUIパーツが用意されています。興味のある方は、SDKのSamplesディレクトリや、NGCore/Client/UIディレクトリを探索してみて下さい。

次のページ
GL2パッケージによる描画

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ゲームエンジン「ngCore」最速チュートリアル連載記事一覧

もっと読む

この記事の著者

古田 暁(フルタ サトル)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6325 2012/03/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング