SHOEISHA iD

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

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

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

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

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

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

サーバーとの連携

 ソーシャルゲームを作る上で、重要な要素の1つにサーバーとの連携があります。ngCoreではHTTPプロトコルを使って通信を行うことができます。ここからngCoreの通信機能について説明していきます。

Twitterのタイムラインを取得

 ここではngCoreの通信機能を説明するために、TwitterのAPIをお借りして、任意のアカウントのタイムラインをHTTPで取得してみます。LIST6のコードはDeNAPRアカウントのタイムラインから最新の1件を表示します。

LIST6:Twitterのタイムラインを取得する
 1: var XHR = require('../NGCore/Client/Network/XHR').XHR;
 2:
 3: function main() {
 4:   var url = 'http://twitter.com/statuses/user_timeline/DeNAPR.json';
 5:   request('GET', url, {
 6:     success: function(request){
 7:       var data = JSON.parse(request.responseText);
 8:       (new UI.Toast({text: data[0].text})).show();
 9:     }
10:   });
11: }
12:
13: function request(method, url, opts) {
14:   opts = opts || {};
15:   var default_opts = {
16:     success : function(){},
17:     error : function(){},
18:   };
19:   for (var key in default_opts) {
20:     opts[key] = opts[key] || default_opts[key];
21:   }
22:   var _request = new XHR();
23:   _request.onreadystatechange = function () {
24:     if (_request.readyState === 4) {
25:       if (_request.status === 200) {
26:         opts.success(_request);
27:       } else {
28:           NgLogD("Error:" + _request.error);
29:           //NgLogD(JSON.stringify(_request));
30:           opts.error(_request);
31:       }
32:     }
33:     //NgLogD("onReadystatechange:" + _request.readyState);
34:   };
35:   _request.open(method, url);
36:   _request.send();
37: }

コードを実行する際の注意点

 このコードを実行する際に2つの注意点があります。まずWebブラウザ環境では正しく動きません。クロスサイトドメインへの通信がうまく処理できないためです。次にTwitter APIの制限として、1クライアントからのアクセスは1日150回までとなっているので、150回を超えてTwitter APIへリクエストを送るとエラーが返されます。

request関数

 13ステップ目から定義されているrequest関数ですが、ブラウザ環境でXMLHttpRequestを扱うケースとほぼ同じような処理で、ngCore特有の話題ではないので、ここでは特に解説しません。

 また、このrequest関数をより高機能化したモジュールなど、ゲーム開発に便利なライブラリをDeveloperサイトで公開しています。このセクションの文末に記載したURLをご覧ください。

コード解説

 ではコードを順に説明していきます。

  • LIST6の1行目)HTTPプロトコルで通信するためにはXHRクラスを使います。
  • LIST6の4行目)今回はDeNAPRアカウントのタイムラインを取得していますが、他のアカウントのタイムラインを取得したければ「DeNAPR」の部分を任意のTwitterアカウント名に書き換えます。
  • LIST6の5行目)request関数を用いてGETメソッドでHTTPリクエストをしています。
  • LIST6の6行目)リクエストが成功した場合のコールバック関数を指定しています。HTTPリクエストが適切なレスポンスを返した場合、この関数が呼ばれます。
  • LIST6の7行目)このTwitter APIからのレスポンスはrequest.responseTextに入ります。このレスポンスはJSON形式のテキストですので、JSON.parse関数でJavaScriptのオブジェクト化をしています。
  • LIST6の8行目)いかにもJavaScript的な書き方になっていますが、分解するとこのようになります。
var toast = new UI.Toast(
  {text: data[0].text});
toast.show();

 UI.Toastクラスを使ってレスポンス内容を画面に表示しています。

デバッグ時に応用

 UI.Toastクラスを使うと画面上部に数秒間テキストを表示させることができます。数秒後に自動的に消えますので、開発時にはプリントデバッグの手段として使うこともできます。

実行結果

 このサンプルをiPhone Simulatorで実行すると図9のように表示されます。DeNAPRアカウントのタイムラインから最新の1件が表示されているのが分かります。

図9:iPhone Simulatorでの表示
図9:iPhone Simulatorでの表示

ゲームAPIとの連携

 今回はTwitter APIをお借りしてngCoreの通信機能を説明しました。実際にソーシャルゲームを作る場合は、自分たちが管理するAPIサーバーと通信を行うことになります。その際はケースに応じて、ユーザー認証やセッション管理などを行う必要があります。

次のページ
サンプルゲーム

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

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

もっと読む

この記事の著者

古田 暁(フルタ サトル)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング