▲前のページへ
次のページへ▼

チャットを作る(1) GUIと画面遷移の実装


【目次】
GUIと画面遷移の実装
最初に起動するシーンをNameEntryScene に設定する
プログラム解説(NameEntryScene)
プログラム解説(ChatScene)


GUIと画面遷移の実装

 シンプルなエコー送受信を用いて、シンプルなチャットを作ってみましょう。
 まずは簡素なGUIを用意するところから始めてみましょう。

■ シーン用ソースファイルの追加
  現在使用しているサンプルのうち、cocos2d-xのシーン情報は EchoSampleScene.cpp および
  EchoSampleScene.h に格納されていますが、今回新たにチャットを導入するにあたり、
  新規にシーン情報管理ソースファイルを追加しましょう。

  eclipse のパッケージエクスプローラ内に、以下の4つのファイルを新規作成してください。
  

■ 基本的なGUI制御の実装
  cocos2d-x の GUI プログラムは少々長いプログラムになります。
  こちらであらかじめ組み込んでいるものを用意いたしましたので、
  以下のプログラムをコピー&ペーストで組み込み、基本的なGUIの流れを組み込んでおきましょう。

    NameEntryScene.h 全文
    NameEntryScene.cpp 全文
    ChatScene.h 全文
    ChatScene.cpp 全文


最初に起動するシーンをNameEntryScene に設定する

 続けて、上記に記述したGUI制御に対し、最初に起動するシーンを
 EchoSampleScene から NameEntryScene に変更しましょう。

 AppDelegate.cpp を開き、以下の赤枠2箇所を変更してください。
  


プログラム解説(NameEntryScene)

 上記でコピー&ペースト組み込んだプログラムを簡単に説明します。
 まずは NameEntryScene.cpp からです。

■ GUI表示部分の制御
  最初に表示させる GUI 表示部分は、NameEntry::init 関数の以下の場所にまとめられています。
  

  これを実行することにより以下のウィンドウを端末に出力することができます。
  

■ チャット開始ボタン押下後のシーン遷移
  [ チャット開始 ] ボタンをクリックした後、NameEntry::menuStartChatCallback 関数が呼び出されます。
  ここでは名前入力欄の文字が1文字以上であれば ChatScene に切り替えるように組み込んでいます。
  


プログラム解説(ChatScene)

 続けて ChatScene.cpp について簡単に解説します。

■ GUI表示部分の制御
  [ チャット開始 ] ボタンをクリックした後に表示される GUI 表示部分は、NameEntry::init 関数の以下の場所にまとめられています。
  

  これを実行することにより以下のウィンドウを端末に出力することができます。
  


■ 発言するボタン押下後の文字列送信
  [ 発言する ] ボタンをクリックした後、Chat::menuStartChatCallback 関数が呼び出されます。
  ここでは発言内容入力欄の文字が1文字以上であればサーバへ送信するようにします。
  ただし、送信処理自体については現在のところ" // TODO " として掛かれていますが、次のページから導入します。
  



▲前のページへ
次のページへ▼