日曜ゲームクリエータの日記

2012年 02月 02日

Webゲーム試作のサーバ連携を作っています。

Webゲーム試作（http://rakuda-factory.sakura.ne.jp/smph/02rpg_test/index.html）のサーバ連携部分の作りこみをはじめました。

サーバ部分の実装はGoogleAppEngineで行う予定です。
ただ、作り込みが完了してもサーバ負荷によって
無料リソースを使い果たすようであれば
一般公開するか微妙ですが・・・

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2012-02-02 22:48 | Google App Engineの勉強 | Trackback | Comments(0)

2012年 01月 25日

Webゲーム試作をIE9で動作するようにしました。

Webゲームのフロントエンド部分にあたるenchant.jsで
作成した試作画面を公開しています。
IE9で動作しない不具合がありましたが、解消しました。

こちらからどうぞ
http://rakuda-factory.sakura.ne.jp/smph/02rpg_test/index.html

enchant.js自体はIE9以上も動作対象となっています。
今回はPC用ブラウザとスマホ用ブラウザ共用としたいため
jQueryも併用してレイアウトを切っています。
（この辺は以前書いた記事を参照してください）

この状態でenchant.jsを実行するとIEでは実装されていない
window.scrollXおよびscrollYを参照して
Gameインスタンスの_pageX、_pageYを作成するため
値がNaNになってしまっていたために、マップのスクロールが行えなくなっていました。

Gameインスタンスのonloadイベントで
_pageX、_pageYがisNaNメソッドでTrueだった場合、
0に再設定する処理を追加したところ
IE9でも正常に動作することを確認しました。

また、Androidでも正常に動作する処理も追加しました。
AndroidSDKのエミュレータでは正しく動作したので
多分、大丈夫だと思います。

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2012-01-25 22:45 | プログラム(ゲーム) | Trackback | Comments(2)

2012年 01月 24日

ExciteのOpenIDのページがスマホ対応していない？

iPod touchで前回作成したOpenIDテストページで
ExciteのOpenIDを利用してみたのですが
スマホ対応していないようでPCと同じページが表示されました。

他のOpenID認証サーバーの仕様がどうなっているのか
試していないのですが、スマホ対応していないと
認証周りの画面が不便になるかなぁとちょっと心配しています。

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2012-01-24 22:38 | Google App Engineの勉強 | Trackback | Comments(0)

2012年 01月 20日

@IT でjQuery Mobile入門の連載が始まったようです。

@ITでjQuery Mobile入門の連載が始まったようです。

私もスマホ用Webアプリ「コミコミ☆スイーツ」を作成した際
勉強のため、jQuery Mobileを使用しました。

使用した個人的な感想ですが、
独特な属性をタグに追加することやjavascriptの機能追加による兼ね合いなど
工夫したい場合など、少し苦労しました。

ゲーム系Webアプリを作る場合は使用すると逆に足枷になるかもしれません。
ツール系Webアプリだとちょうどいいのかもしれませんね。

にほんブログ村

# by kazenetu | 2012-01-20 22:57 | プログラム（その他） | Trackback | Comments(0)

2012年 01月 17日

Webゲーム試作をちょこっとバージョンアップしました

前回公開したWebゲーム試作を少しバージョンアップしました。

画面右上にヘルプをおいたり、
スマホを横向きにすると「縦にしてください」とか注意が出たりと
システムだけのバージョンアップです。

ゲーム的なバージョンアップはありません。

画面の横サイズでPCか、スマホかを単純に反映しているため
Androidでは正しく画面が表示されないようです。
（AndroidSDK付属のエミュレータで確認しました）
こちらで多分、大丈夫だと思います。
http://rakuda-factory.sakura.ne.jp/smph/02rpg_test/index2.html

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2012-01-17 23:53 | プログラム(ゲーム) | Trackback | Comments(4)

2012年 01月 10日

Webゲーム試作を公開しました。

JavaScriptゲームライブラリenchant.jsを使用して
HTML5ベースのWebゲームのフロントエンドを作ってみました。

マップをドラッグするとマップがスクロールし
村や街、城のマップチップ（アイコン）をクリックすると
そこに向かってキャラクタが移動します。

【2012/01/11 21:15 追記】
URLを公開するのを忘れました。
http://rakuda-factory.sakura.ne.jp/smph/02rpg_test/index.html

ゲーム素材は
・enchant.jsの素材と
・ぴぽや　http://piposozai.blog76.fc2.com/を使用しています。

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2012-01-10 23:43 | プログラム(ゲーム) | Trackback | Comments(0)

2012年 01月 03日

enchant.js用マップエディタを拡張してみる

enchant.js用のマップエディタ「enchantMapEditor」を拡張してみました。

enchant.jsで作成するWebアプリのフロントエンド部分では、
マップエディタで作ったデータはMapクラスでロードせず
画像ファイルとして使いたいと考えています。

○イメージ出力というボタンを追加しました。

○output_image.jsボタンを押すとimgタグに全体マップを出力します。
　ブラウザの画像ファイルダウンロード機能で画像をダウンロードできます。

拡張した箇所は以下のとおりです。

【output_image.js】☆新規作成

var imageButton = (function() {
    var element = document．createElement('input');
    element.type = 'button';
    element.id = 'imageButton';
    element.value = 'イメージ出力';
    element.onclick ＝ function() {
        //imageCanvasを取得
        var imageCanvas = document．getElementById('imageCanvas');
        imageCanvas.width = app.mapWidth*16;
        imageCanvas.height = app.mapHeight*16;
        var imageContext = imageCanvas.getContext('2d');

        //マップデータを書き出し
        var _data = app.maps.bgMap._data;
        for (var index = 0, l = _data.length; index < l; index++) {
            for (var y = 0, ll = _data[0].length; y < ll; y++) {
                for (var x = 0, lll = _data[0][0].length; x < lll; x++) {
                    var n = _data[index][y][x];
                    if (n >= 0) {
                        var row = app.maps.bgMap._image.width /16 | 0;
                        var sx = (n % row)*16;
                        var sy = (n / row | 0)*16;
                        imageContext.drawImage(app.maps.bgMap._image._element, sx, sy, 16, 16,
                            x * 16, y * 16, 16, 16);
                    }
                }
            }
        }
        
        //imgタグに出力
        var targetImage = document．getElementById('targetImage');
        targetImage.src = imageCanvas.toDataURL("image/png");
    };
    return element;
})();

※セキュリティエラーになるため、以下の修正を入れています。
　・「document．」のピリオドが全角
　・「element.onclick ＝」のイコールが全角

【mapeditor.html】コード追加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>enchant MapEditor</title>
        <script type="text/javascript" src="enchant.js"></script>
        <script type="text/javascript" src="plugins/extendMap.enchant.js"></script>
        <script type="text/javascript" src="drawing.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <script type="text/javascript" src="mapeditor.js"></script>

        <script type="text/javascript" src="output_image.js"></script>
    </head>
    <body>
    <div id="enchant-stage" style="width: 640px; height: 480px; float:left"></div>
    <div id="edit" style="width: 360px; margin-left: 640px"></div>
    
    <canvas id="imageCanvas" style="display:none;"></canvas>
    <image id="targetImage" style="display:block;" />
    </body>
</html>

【main.js】コード追加(82行目）

start(wv, hv, iv, ev);
edit.innerHTML+= '矢印キーでスクロール (Push Arrow Key to Scroll)';
editorTabs.initialize();
edit.appendChild(editorTabs.element);
edit.appendChild(icons.create());
var d = document．createElement('div');
d.appendChild(palette);
edit.appendChild(d);
var d2 = document．createElement('div');
d2.appendChild(geneButton);
d2.appendChild(loadButton);
d2.appendChild(imageButton);//Add!
edit.appendChild(d2);
palette.loadImage(app.image);

Canvasやマップエディタが作成するデータの構成を調べていたら
時間が思いの外かかってしまいました・・・orz

にほんブログ村

# by kazenetu | 2012-01-03 00:50 | プログラム(ゲーム) | Trackback | Comments(0)

2011年 12月 25日

jspでjsonを実装してみる

jspでjsonを実装したかったので、ちょっとしたサンプルを作りました。
jqueryでpostとjsonデータの受信と処理を行っています。

1.ボタンクリックイベントなどで「call.js」のcallJsp()を呼び出し。

2.callJsp()はデータ「ID」を「test.jsp」に送信。

3.「test.jsp」は受け取ったデータ「ID」に"!"を付加して
　msgとしてjson形式で返す。

4.callJsp()は受け取ったjsonデータのmsgをダイアログで
　表示する。

【test.jsp】


<%@ page contentType="text/html;charset=UTF-8" language="java" %>

{
"msg":"<%= request.getParameter("ID") %>!"
}

【call.js】


function callJsp(){
  $.post("test.jsp",{ID:"aaa"},function(json){
    alert⟨"JSON Data:" + json.msg);
  },"json");
}

※alertはexciteでは禁止されているため、一部htmlエスケープしています。

参考になれば幸いです。

にほんブログ村

# by kazenetu | 2011-12-25 22:35 | Google App Engineの勉強 | Trackback | Comments(4)

2011年 12月 25日

Webアプリのフロントエンドにenchant.jsを採用したい

Webアプリのフロントエンドにゲーム系Javascriptライブラリ「enchant.js」を採用するため
簡単な技術検証を行なっていますが、
ゲーム画面の画面サイズがブラウザのクライアント画面のサイズに依存しているようです。

一画面まるごとゲーム画面であれば、画面サイズの自動設定により
ブラウザいっぱいに表示されます。
しかし、ユーザ名やメニュー項目など、別の要素を表示した上でゲーム画面を表示しようとすると
FireFoxでは横スクロールバーが表示されるなどうまく表示されません。

ブラウザの画面サイズに依存せず、
等倍でゲーム画面を表示する方法を探しました。

gameクラスの初期化で「enchant-stage」というidのdivが存在するか
確認する処理がありました。
このdivが存在しなければ、divを動的生成します。
ではこれがすでに存在していれば・・・

<div id='enchant-stage' style='width:320px;height:320px;'></div>
※「var game = new Game(320, 320);」の時

これで等倍の画面サイズで表示されるようになりましいた。
jqueryなどで動的にこのタグも自動生成するようにすれば
いろいろ応用が効きそうです。

・・・今後のバージョンアップで使えなくなるかもしれないし、非公式な方法なので
ゲーム画面の中にメニューなどを入れたほうが正解でしょうね・・・

よかったらクリックしてください。

にほんブログ村

# by kazenetu | 2011-12-25 21:59 | Google App Engineの勉強 | Trackback | Comments(0)

2011年 12月 18日

【解決】むむむ.../_ah/login_requiredのハンドラがよくわからない・・・

先日の「むむむ.../_ah/login_requiredのハンドラがよくわからない・・・」ですが、
解決しました。

以前書いた以下の記事で解決しました。
【多分、解決】GoogleAppEngineにデプロイした内容が反映されない？

同じことを何度繰り返すんだ・・・orz

にほんブログ村

# by kazenetu | 2011-12-18 18:47 | Google App Engineの勉強 | Trackback | Comments(0)

< 前のページ

次のページ >