「３日でプロトタイプ作る」とツイッターで宣言したらやばかった

2015年6月29日 TOME One comment

こんにちは。

先日勝手にひとりで修羅場を迎えていて、かなりやばい状態でした。顛末をまとめました。

宣言 – 6/23(火) 20:00

先日ブログにて『さいたま市の創業相談会に行ったら「まず会社作らなくていいからゲーム作りなさい」と言われた』と報告したところ、Twitter／Togetter 上で予想以上の反響（炎上？）をいただきました。

そこで勢いで、以下のようにTwitterで、３日以内にプロトタイプを公開しますと宣言してみました。

【予告】6/26(金) 20:00 にアプリのプロトタイプ公開しますので、興味のある方は見に来てください。詳細はこのツイッターで告知します

— TOME (@shinhirota) 2015, 6月 23

この時点で全く何もできていませんでした。

複雑な気持ちなのですが、結構リツイート（１４リツイート）していただきました。それで「あ、皆さんに認識された」と言う感じがしました。この感じがあとで重くのしかかることになろうとは・・・。

このときの計画

７２時間しかないので、午後8時にツイートした直後から、全力疾走が始まりました。「３日あるから明日からやるかあ〜」なんて言ってられません。

このときに考えていた大まかなスケジュールは以下のとおり：

6/23 20:00
　〜6/24 20:00 基本システムがざっくり動作するようにする
　〜6/26 20:00 時間のある限り改善

最初の24時間で、基本的な部分は作ってしまうつもりでした。

手を広げすぎると全体的に中途半端な印象になってしまうので、規模は小さくても整っているものを目指すため、このような時間配分を考えました。

内容は？

正直、作ろうと思っているゲームは何種類かあるので、宣言するまで確定していませんでした。しかしもう迷っている時間はないので、一番やりたかった過去作品（PRINCIPIA）のリメイクに決めました。

この選択が正しかったかどうかはわかりませんが、ゲーム開発はどうせやってみないとわからない要素が大きいので、これ以上悩んでいたら悩みすぎだと感じていました。

今回の宣言が契機になって前に進めたのは自分にとっては良かったです。

最初は調子良かった

タイトル画面作った #principia_perfectus pic.twitter.com/EHSmX0iiN4

— TOME (@shinhirota) 2015, 6月 23

ゲーム中の画面はこんな感じ。素材ないので手書きとネットからぱくってきた。 #principia_perfectus pic.twitter.com/uzZkxtTIG2 — TOME (@shinhirota) 2015, 6月 23

ゲーム始まるようになった。が、ここからが大変だな・・・ #principia_perfectus pic.twitter.com/1fIejkWZct

— TOME (@shinhirota) 2015, 6月 24

時間とともによぎる不安 – 6/24(水) 20:00

最初のざっくりとした計画のとおり、最初の24時間で基本システムを動くように突き進んでいました。過去作品プリンキピアに、スマホゲーム的な科学者コレクション的な要素を取り入れようとしていました。が、メイン画面を作ってみて、

「あれ、これ、思ったより面白くないんじゃないか・・・・」

と感じ始めてしまいました。ここからがやばいです。元職業プログラマーなので、仕様が決まっていればとりあえず動くものを作るのはそれほど大変ではないです。しかしそもそものゲームシステムについて悩み始めてしまったら、最悪、永遠に悩み続けることができるレベルの話です。それを、明後日公開すると宣言しているものに対して悩み始めてしまったら、普通、無理です。この時点で、だいたい24時間経過していました。 72時間しかないのに、24時間かけて作ったものを捨てて、さらにいままで数ヶ月（ぼんやりと）考えていたシステムの修正を行い、48時間で作り上げなくてはならなくなりました。これは正直不可能です。このときは「どうやってあやまろうかな・・・」と考え始めていました。

方針転換

ああ、あんなこと宣言するんじゃなかった、と思い始めましたが、実は今年１月くらいからぼんやりと（だらだらと）期限がないから真剣に考えていなかったことを、今回期限を区切ったことで、やっと真剣に考え始めただけのことでした。 そもそも会社辞めてまでやろうとしてることは何だっけ？とか自分会議が始まってしまいました。悩んだ結果、最大の目標は自分の作品を公開することであり、たとえそれが事業的に失敗してもそれは別の問題。そもそも絶対に事業として成功する作品など、経験不足の自分に作れるはずがないので「むしろ自然体で作るべきだ」との考えに至りました。

ホーム画面やっぱこういう方がいいな・・・。走りながら考える・・・ #principia_perfectus pic.twitter.com/9UxCnffilk — TOME (@shinhirota) 2015, 6月 25

あぶなかった。自分を見失うところだった・・・

— TOME (@shinhirota) 2015, 6月 25

宣言した期限は伸ばせない・・

そもそも上司と約束したのでもなく、まして顧客と契約書を交わしたわけでもないので、この作ります宣言は法律的な効力は何もないです。あやまってしまうこともできました。しかしそれをやってしまうと、今後の発言（ツイートなど）への信頼性が著しく落ちてしまうはずなので、それは絶対に避けるつもりでした。 ただ、そもそも自分のツイートなんて誰も見てないに等しいので、そこまできにする必要もなかったかもしれませんが、宣言を結構リツイートされていたので、潜在意識的には「すごい見られている」と思っていたんだと思います。

最終日 – 6/26(金)

見積もりが甘くて思ったほど作れてない・・

これは会社員時代から同じだったので、一生治らないのかもしれませんが、自分は見積もりが甘いです。会社員時代は、自分の感覚の２倍の期間の見積もりを出してだいたい当たっていました。 正直、３日間あればもっと作り込めると思っていましたが、だめでした。ちょっと人様に見せられるようなレベルには到達していませんでしたが、宣言を守ることを重視して、公開に踏み切りました。

見切り発車で公開 – 20:00

そんなこともあり、当初イメージしていた規模からすると50%くらいで、完成製品版の5%くらいしか作れませんでしたが、公開に踏み切りました。

先日予告した通り、企画中のアプリのプロトタイプ？を公開しました！！ああ、もう時間切れで見切り発車・・・(T_T)／年内リリースを目指して企画中のアプリの導入部分を公開します http://t.co/3Gy3Zt5298 @shinhirotaさんから — TOME (@shinhirota) 2015, 6月 26

プロトタイプと呼べるかどうかはさておき、企画の意図を伝えるには役に立つものができたと思います。

↓現在も公開中ですので、興味がある方は以下のリンクからどうぞ

年内リリースを目指して企画中のアプリの導入部分を公開します

感想

「まあ大変だろうな」と予想はしていましたが、途中で悩み始めたことで修羅場が待っていました。この３日間はよく眠れませんでした・・・。

24時間全力で頑張るのは結構できるのですが、今回のような宣言をすると72時間全力で頑張れてしまうので、相当きついです。３倍ではなく３x３＝９倍くらいきつかった気がします。

しかしいままでずっと真剣に考えてこなかった企画の部分を集中的に検討できたので、ものすごい前進しました。

自分で目標を立てて、ツイッターで宣言すると、実際どれだけ見られているかどうかは不明ですが、ものすごいプレッシャーになりました。逆境に身を置きたい方にはオススメです。

ゲーム開発

年内リリースを目指して企画中のアプリの導入部分を公開します

2015年6月26日 TOME One comment

経緯

皆様

先日ブログにて

さいたま市の創業相談会に行ったら「まず会社作らなくていいからゲーム作りなさい」と言われた

と報告したところ、Twitter／Togetter 上で予想以上の反響（炎上？）をいただきました。

耳が痛いアドバイスを多数頂き、そのなかで「動作するプロトタイプを作るべき」というものがありました。

そこで勢いで、以下のようにTwitterで、３日以内にプロトタイプを公開しますと宣言してみました。

【予告】6/26(金) 20:00 にアプリのプロトタイプ公開しますので、興味のある方は見に来てください。詳細はこのツイッターで告知します

— TOME (@shinhirota) 2015, 6月 23

この時点で全く何もできていませんでした。まじで。

ですので、それから今までほぼ自宅にこもって72時間作業していました・・・・。一度でかけましたが。

ともかく72時間で作ったものなので、完成するはずもないですが、どういうゲームを作りたいかは伝わってくれるとうれしいです。

ゲーム情報

タイトル：PRINCIPIA PERFECTUS (プリンキピア・ペルフェクトゥス）

↓こちらをクリックするとゲームがブラウザ内で起動します↓
PRINCIPIA PERFECTUS

説明：17世紀のヨーロッパを舞台にした科学者シミュレーションゲームです。15年前に公開したゲーム「PRINCIPIA」の「完全版」として、当時盛り込めなかった要素の追加、グラフィック・音楽の一新を行い、現在のスマートフォンアプリとして市場価値のあるレベルまで作り上げます。

動作環境：本プロトタイプはブラウザ上で動作しますが、最終的にはスマートフォンアプリになる予定です。

素材について：画像はインターネット上でダウンロードしてきたものと、手書きのものがあり、製品レベルではないですがご容赦ください。

効果音は一部魔王魂様のサイトからダウンロードしたものを使用しています。

今後

2015年中にリリースするべく活動をしていく予定です。とくにグラフィックをどのように調達するかいま検討中ですが、がんばっていきます。

ゲーム開発

Cocos2d-JS で広告を表示する (iOS編) その２

2015年6月21日 TOME Leave a comment

Cocos2d-JS で広告を表示する (iOS編) その１で単純な表示の方法を紹介したので、今回は位置の調整、表示／非表示を行う手順をまとめます。

Cocos2d-JS が生成するプロジェクトファイルは Interface Builer / Storyboard を使用していないので、ここでも使用しませず、ソースコードのみで実現します。

使用した環境

OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1
Google Mobile Ads SDK iOS: 7.3.1

位置の調整

固定の位置で良い場合は、GADBannerView の frame プロパティを設定すれば反映されます。以下は、画面の下部中央に配置する場合の例です。

<./ios/AppController.mm>

    {
        GADBannerView *gadView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];

        gadView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";  // Official Test ID
        gadView.rootViewController = viewController;
        [gadView loadRequest:[GADRequest request]];

        [viewController.view addSubview:gadView];

        // gadView を画面下部の中心に配置
        CGRect contentFrame = viewController.view.bounds;
        CGRect bannerFrame = gadView.frame;
        bannerFrame.origin.y = contentFrame.size.height - bannerFrame.size.height;
        bannerFrame.origin.x = contentFrame.size.width / 2 - bannerFrame.size.width / 2;
        gadView.frame = bannerFrame;
    }

ただし画面回転に対応したり、親ビューがレイアウトを変更したりする場合、ビューコントローラーの viewDidLayoutSubviews メソッドをオーバーライドするなどの対処が必要ですが、ここでは省略します。

うまく動作すれば、広告が画面の下部中央に表示されます。

実行結果

表示／非表示

やっと Cocos2d-JS 特有の話になります。

ゲームなどで、タイトル画面では広告を表示し、ゲーム中は広告を非表示にしたりしたいことがあると思います。そのために、まずは JavaScript から C++ の関数を呼ぶ必要があります。Cocos2d-JS では JavaScript 側に jsb.reflection.callStaticMethod という関数が用意されています。名前の通り、スタティックメソッドしか呼びだせません。

C++側

まずC++側で、任意のクラスのスタティックメソッドを用意します。

そのためのクラスを作っても良いですが、ここでは変更を少なく抑えるため既存のクラス AppController に isAdVisible と setAdVisible というスタティックメソッドを追加します。

C++側では、戻り値、引数として BOOL, 数値 (NSNumber), 文字列 (NSString) が使用できます。ただし現在の Cocos2d-JS の実装の制限として、BOOL の引数を受ける場合、NSNumber* で受けて boolValue に変換しないとうまく動作しないので注意してください。（将来改善されるかもしれません）

<./ios/AppController.h>

@interface AppController : NSObject <UIAccelerometerDelegate, UIAlertViewDelegate, UITextFieldDelegate,UIApplicationDelegate>
{
    UIWindow *window;
    RootViewController    *viewController;
}

// 追加
+ (void) setAdVisible:(NSNumber*) isVisible;
+ (BOOL) isAdVisible;

@end

<./ios/AppController.mm>

// gadView をローカル変数ではなくスタティック変数にする
static GADBannerView* gadView = nullptr;

@implementation AppController
 :
(中略)
 :
+ (void) setAdVisible:(NSNumber*) isVisible {
    gadView.hidden = ([isVisible boolValue] == false);
}

+ (BOOL) isAdVisible {
    return gadView.hidden == false;
}

@end

JavaScript側

Cocos2d-JSのサンプルのメニューボタンを押したときに、先ほど作成したC++ のメソッドを呼び出し、表示／非表示をトグルできるようにします。

<./src/app.js>


var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;

        // add a "close" icon to exit the progress. it's an autorelease object
        var closeItem = new cc.MenuItemImage(
            res.CloseNormal_png,
            res.CloseSelected_png,
            function () {
                cc.log("Menu is clicked!");

                // 現在の表示状態を取得
                var isVisible = jsb.reflection.callStaticMethod(
                    "AppController",
                    "isAdVisible"
                );

                // 表示／非表示を設定
                jsb.reflection.callStaticMethod(
                    "AppController",
                    "setAdVisible:",
                    isVisible == false
                );

            }, this);
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

うまくいけば右下のメニューボタンを押すたびに広告の非常／非表示が切り替わります！

参考

HOW TO CALL OBJECTIVE-C FUNCTIONS USING JS ON IOS/MAC
http://cocos2d-x.org/docs/manual/framework/html5/v3/reflection-oc/en

Cocos2d-JS で広告を表示する (iOS編) その１

2015年6月20日 TOME One comment

こんにちは。Cocos2d-JS で広告を表示したときの手順をまとめます。

概要

今回は、とりあえず AdMob を表示するまでをまとめます。実際のアプリに組み込む場合、位置の調整、表示・非表示などの制御が必要だと思いますが、それについては次回以降。

使用した環境

OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1
Google Mobile Ads SDK iOS: 7.3.1

手順

ただ単にバナー広告をずっと表示していればよい場合は、JavaScript 側ではなにもせず、iOS 上の Objective-C++ 側の View に AdMob の GADBannerView を貼り付ければよいです。

JavaScript (Cococs2d-JS) とは関係のない話になってしまいますが、以下のように AdMob を組み込みます。

AdMob SDK をダウンロード

以下のページから googlemobileadssdkios.zip をダウンロードし、解凍します。

Downloads | Mobile Ads SDK | Google Developers
https://developers.google.com/mobile-ads-sdk/download?hl=ja#downloadios

zip の中身はこのようになっています。

Xcode プロジェクトに追加

広告を表示したい Cocos2d-JS プロジェクトに含まれる Xcode プロジェクトに、ダウンロードした SDK を追加します。

（参考：Cocos2d-JS のサンプルを動かしてみる (iOS編))

Xcode でプロジェクトを右クリックし、[Add Files to “xxxx”…] を選びます。

先ほどダウンロードし、展開しておいた GoogleMobileAds.framework を選びます。この際、Copy items if needed のチェックはON、Added folders は Create groups、Add to targets は xxxxx iOS のみチェック、にします。

Framework の追加

AdMob 公式ページの最新の手順では @import 文を使えば Framework は自動的に追加されると書かれていますが、Cocos2d-JS/x のプロジェクトでは Objective-C++ (.mmファイル) を使っているからわかりませんが、@import がうまくいきませんでした。

ここでは手動で Framework を追加する方法でやります。以下の Framework をプロジェクト設定からリンク対象に追加します。

SystemConfiguration
StoreKit
MessageUI
EventKitUI
EventKit
AdSupport
CoreTelephony
CoreMedia

AdView 表示コードを追加

最低限、AppController.mm に以下のコードを追加すれば AdMob 広告が表示されます。

./ios/AppController.mm

#import "GoogleMobileAds/GADRequest.h"    //追加
#import "GoogleMobileAds/GADBannerView.h" //追加

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    // didFinishLaunchingWithOptions 内に以下のコードを追加
    {
        GADBannerView *gadView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];

        gadView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";  // Official Test ID
        gadView.rootViewController = viewController;
        [gadView loadRequest:[GADRequest request]];

        [viewController.view addSubview:gadView];
    }

}

実行結果

うまくいけば画面左上部に AdMob のテストバナーが表示されます。

次回「状況に応じて表示／非表示を切り替える場合」についてまとめる予定です。

参考

AdMob iOS ガイド　(オフィシャルドキュメント)
https://developers.google.com/mobile-ads-sdk/docs/admob/ios/quick-start?hl=ja

さいたま市の創業相談会に行ったら「まず会社作らなくていいからゲーム作りなさい」と言われた

2015年6月18日 TOME 13 comments

こんにちは。

会社辞めてゲーム作家になろうとしている者です。

収入はないですけど、毎日が新しい。

本日（2015年6月18日）さいたま市主催の創業相談会に参加してきました。高い住民税納めてるんだから住民サービスは受けないと損ですよね。

さいたま市では毎月第三木曜日に創業相談会を開催しているそうで、毎月ポストに入っている「市報さいたま」で見つけました。会社員時代はこんなの読んでる時間ぜんぜんなかったですけど市報とか読んでみるもんです。

なんか２つ似たようなのがあって「二重行政」の感じもしなくもないですがとりあえず左のやつに受付開始初日の６月３日（水）の朝一で電話してみました。

すると、難なく予約をゲットできました。

目的

自分の企画したゲームを世に送り出すのが目的です。よく言えばクリエイター志向ですかね・・・。他のことは手段でしかないです。なので「IT社長になって大儲けしたい」というような起業家志向ではないです。

準備

とりあえず本買いました。挿絵のない本は読めない性分なので漫画です。

主人公のはるかちゃんが「おばあちゃんの漬物をみんなに食べてもらいたから居酒屋を始める」という熱いストーリーです。

はるかちゃん・・・アツい・・・。

いろいろ似たような本も読んだのですが、この手の本は「自分の店を出したい」という話が多いです。おそらく毎月の出費、売上などが読みやすくて事業計画などが立てやすいからのようです。自分のようなゲームアプリを作って売る、のような場合、売上が全く読めないので事業計画を立てるのがかなり難しいと感じました。というか、ゲーム売るなんて、ギャンブルですよね？

そうは言っても何も準備しないと、せっかくの相談会で話も弾まないと思い、事業計画書はでっちあげて持って行きました。

ざっくり言うと書いたのは以下のようなこと。

ゲーム作りたくて、熱い思いで会社辞めました
第一弾として、４人x４ヶ月でスマホアプリを製作する資金を調達したい
製作には自信あり、プロモーションなど事業運営は自信ない

テンプレートは以下のサイトから無料でダウンロードできました。

bizocean（ビズオーシャン）-すべてのビジネスコンテンツを無料に！

http://www.bizocean.jp/

当日

指定されたさいたま中央図書館（浦和駅のパルコ８階）に行くと、１０人くらい入れそうな会議室に、中小企業診断士の方１名と、さいたま市の職員と思われる方２名が、自分の話を聞いてくれました。相談料無料。お得。

とりあえず自己紹介などしつつ、自分のゲームに対する熱い思いを語り、すでに会社を退職して活動していることなどを説明したあと、「とりあえず第一弾として、４人x４ヶ月の規模でアプリを作って勝負したい。その為の資金が欲しい」ようなことを伝えました。

すると中小企業診断士の先生から帰ってきた答えは「銀行はそんなに簡単にはお金を貸さない。特に実績面があまりないようなので、まずは小規模で開発して結果を出してからの方がよい」と言ったものでした。（実際にはもっといろいろ会話があったのですが、結論としてはこんな感じだったと思います。）

また「会社を作るメリットも、今の時点ではあまりなさそう。まずは全力でゲームを作って、実績にするのがよいのでは」とも言われました。

まとめると「まず会社作らなくていいからゲーム作りなさい」というメッセージでした。

orz

いや、なんというか、的確すぎるアドバイス。

感想

ゲームを作る為に会社作ろうと思っていろいろ調べていましたが、ゲームを売るのは当たり外れの激しい世界で、誰にでもできることではありません。なので、実績がないのにやる気だけをアピールしても世間は理解してくれません。

正直自分は15年くらい前にコンテストで入賞したことがあるだけの過去の人なので、いまから参入しようとしたらゼロからのスタートです。

なんとなく会社作ったらどこからともなくお金がやってくると思っていましたが、そんなことはありません。

こつこつ実績を積み上げるしかない。

明日くらいから本気出します。

起業

人生で初めてサッカーの試合観てきた

2015年6月17日 TOME Leave a comment

こんにちは。

会社辞めてから時間だけはあるので、人生初のサッカー観戦に行ってきました。観に行ったのは2015年6月16日埼玉スタジアムで行われた『日本代表vsシンガポール代表（2018ロシアW杯アジア２次予選）』です。

チケット

５日前の日本代表対イラク代表の試合を観ている時に思い立ってネットで買ってみたら買えました。JFA (日本サッカー協会) のページでオンライン購入してセブンイレブンで発券しました。

チケットJFA
http://ticket.jfa.or.jp/top.jsp

座席

埼玉スタジアム２００２の場合の話になりますが、席の種類がカテゴリー１〜５に分かれていて初心者にはハードル高くて一番悩みました。

ネットで調べてわかったこと、後日観戦してわかったことをまとめると大体以下のような感じです。

メインスタンド／バックスタンド

メインスタンドとバックスタンドに分かれていますが、テレビ中継のときの映像はメインスタンド側から撮られています。初心者にはメインスタンド側が無難なようです。

カテゴリー

カテゴリー１〜５にわかれていて、１〜４に関しては、カテゴリー１が近くて見やすい席で、カテゴリー４が一番遠くて見にくい席です。カテゴリー１〜４は指定席です。

カテゴリー５だけは別格で、サポーターズシート（後述）と同じ雰囲気でした。初心者には敷居が高いです。カテゴリー５は自由席です。

初心者は予算に合わせてカテゴリー１〜４の範囲で選ぶと良さそうです。自分はメインスタンド側カテゴリー２（南門側）のチケットを購入しました。

サポーターズシート

真剣に応援する人の席です。試合中ずっと「ニッポン！ニッポン！」と叫び続けなければなりません。野球観戦で言えばライトスタンドに相当する場所のようです。にわかサポーターにはお勧めできません。

ユニフォーム

服に関してネット通販は不安だったので、直接買えそうな店舗を調べたところ、サッカーショップKAMO が有名そうだったので、池袋まで買いに行きました。一緒に行く人が４番（本田）のを買ったので自分はよくわからないので名前を知っている１０番（香川）のを買いました。(^^;

レプリカユニフォームとオーセンティックユニフォーム（本物？）とあるのですが、レプリカで十分と思います。

レプリカユニフォームが 6,728円だったのに会計時に10,000 円くらいで、あれ？と思ったら背番号のマーキング料が4,000円くらいかかるとのこと。もっとわかりやすく表示しといてほしかった・・・。(>_<)

というわけで事前に買いに行ったのですが、当日埼玉スタジアムでも応援グッズは売っていたので、わざわざ事前に買わなくてもよかったかもしれません。しかし店舗で買うと試着も可能だったりするので、お目当の選手のものを確実に手に入れたい場合は店舗で買ったほうがよいかもしれません。

しかしユニフォーム着るとテンションが上がります。自分はそういう事ないと思ったんですけど、上がりました。コスプレイヤーの気持ちが少しわかりました。

当日

野球観戦ではビールが欠かせないですが、テレビのサッカー中継を見ている限りあんまりスタンドでビール飲んでる人がいないくて「サッカー観戦にビールは無用なのだろうか？」と心配していました。

しかしそんな事はなくて安心しました。

埼玉スタジアム入る前からすでにお店が所狭しと出ており、やすやすとビールをゲット出来ました。値段は観光地価格（1杯600円）です。

スタジアムの中にも売店があり、飲み物も食べ物も売ってました！良かった！

ここはいいところだ。

肝心の試合のほうですが、ご存知の通り格下シンガポール代表に対して「０対０」の引き分けでした・・・。

ハリル日本、アジア2次予選は前途多難なスコアレスドロー発進（ＡＦＰ＝時事） – Yahoo!ニュース http://headlines.yahoo.co.jp/hl?a=20150617-00000002-jij_afp-socc

まあかなり盛り上がって楽しかったんですけど、これで点が入っていればもっとすごい事になってたと思うとちょっと残念でした。

試合後、突然の豪雨でスタジアムに１時間以上足止めされるなどありましたが、それはそれ。

ちょっと不安だった応援も、カテゴリー５とかサポーターズシートに座らなければビール片手に落ち着いて観られる事が判明したので大収穫です。

またビール飲みに行きます。

その他

Cocos2d-JS で画面サイズを変更する

2015年6月16日 TOME Leave a comment

ブラウザ上のキャンバスサイズ

HTMLの canvas 要素として指定します。Cocos2d-JS のサンプルでは ./index.html で指定されているので、所望のサイズに変更します。

./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

Cocos2d 内部のデザイン画面サイズ（ピクセル解像度）

Cocos2d 内部でピクセルデータを処理する際に使用される画面サイズです。

Cocos2d-JS のサンプルでは ./main.js で cc.EGLView.setDesignResolutionSize() メソッドによって指定されています。ほとんどの場合、さきほどブラウザ上のキャンバスサイズに指定したものと同じサイズを指定することになると思います。このメソッドの第3引数 Resolution Policy については以下で説明します。

./main.js

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, disabled by default to improve performance
    cc.view.enableRetina(false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

Resolution Policy

Cocos2d-JS は内部のデザイン画面サイズと表示先（ブラウザ上のキャンバスサイズが異なる場合の解決ポリシーを以下から選択できます。基本的には SHOW_ALL にしておけば大抵よいと思います。

EXACT_FIT
NO_BORDER
SHOW_ALL
FIXED_HEIGHT
FIXED_WIDTH
UNKNOWN

EXACT_FIT

全体表示：◯
縦横比：×
余白なし：◯
ドットバイドット：×

キャンバスいっぱいに拡大縮小されます。縦横比率は保持しません。余白を作りたくない場合に使えるかもしれません。

NO_BORDER

全体表示：×
縦横比：◯
余白なし：◯
ドットバイドット：×

高さか幅の大きい方に合わせて拡大縮小されます。縦横比は保持しますが、全体が表示されないことがあります。余白を作りたくない場合に使えるかもしれません。

SHOW_ALL

全体表示：◯
縦横比：◯
余白なし：×
ドットバイドット：×

常に全体が表示されるように拡大縮小されます。縦横比は保持されます。全体表示しつつ縦横比が保持されるので個人的にはほぼこれの一択だと思います。

FIXED_HEIGHT

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に上端は上端に、下端は下端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

FIXED_WIDTH

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に左端は左端に、右端は右端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

UNKNOWN

全体表示：×
縦横比：◯
余白なし：×
ドットバイドット：◯

拡大縮小が発生しません。名前からするとちょっとハッキング的な使い方なのですが、ピクセル（ドット）の一つ一つを等間隔で表示したいドット絵マニアの方にとっては使いどころがあるかもしれません。

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

Cocos2d-x/JS

ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

2015年6月15日 TOME One comment

こんにちは。

先日ブラウザ版を公開した「ラジウム・クリッカー」ですが、Cocos2d-JS の普及およびブログの宣伝のためにソースコードを公開しました！

ラジウム・クリッカー（ブラウザ版）ソースコード – GitHub
https://github.com/shinhirota/radiumclicker

Cocos2d-JS にならいラジウムクリッカーはMIT ライセンスでの公開です。一言で言うと、著作権表示さえすれば、無制限に使用して構いませんが、作者はいかなる責任も負わないというものです。

今年１月ごろ作成したコードですが、そのあと比較的しっかりとしたアプリである「ねずみハンターキャシー」の制作でがっつり Cocos2d-JS を使ったせいか、今見ると結構恥ずかしい実装が随所にありますが、それは割り切りました。(^^;

参考

ラジウム・クリッカー (ブラウザ版)
http://tomeapp.jp/apps/radiumclicker/

ラジウム・クリッカーのブラウザ版を公開しました

2015年6月15日 TOME Leave a comment

こんばんは。

今年2月にCocos2d-JSで制作し、iOS/Androidアプリとしてリリースした「ラジウム・クリッカー」でしたが、せっかく JS で作っていたのでブラウザ版を公開します。

元祖リケジョの星、キュリー夫人になりきってラジウムを抽出しましょう！
インストール不要ですぐ遊べます！

↓ラジウム・クリッカー (ブラウザ版) ↓
http://tomeapp.jp/apps/radiumclicker/

ブラウザ版の特典として、キーボード入力もクリックと見なすようにしておきました！ (^^;

「ブラウザ版があれば、iOS/Android からもブラウザ経由から実行できるから、アプリ版もういらないじゃん！」と思われるかもしれませんが、アプリ版は SpiderMonkey という C++ で JavaScript を解釈するプラットフォームで動作しているので、かなり軽いです。このゲームくらいではあまり差が出ませんが、もっと多くの処理を行いたい場合は、やはりアプリ版をビルドし、使用すべきです。

その辺の紹介も時間があればしてみたいです。

遊び方

マウスまたはキーボードでひたすら石を叩いてください。ただそれだけです。すみません。。。

１万回くらい叩くとノーベル賞がもらえますのでがんばってください。

今後の予定

ソースコードも MITライセンスで~~公開しようと思っています。~~[2015年6月15日追記] ↓GitHub上でソースコードを公開しました！↓
ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

Cocos2d-JS で文字列を表示する

2015年6月11日 TOME Leave a comment

Cocos2d-JS で文字列を表示する方法です。

（「Cocos2d-JS の開発環境を構築する」の手順が完了しているものとして話を進めます）

文字列を表示するには主に２つの方法があります。

LabelTTF クラスを使用する。
LabelBMFont を使用する。

今回は LabelTTF を使用して文字列表示をためしてみます。

./src/app.js に文字列を表示するコードを追加します。

app.js

github に必要な修正がまとめてあります。

https://github.com/shinhirota/cocos2djs-sample/commit/006c62e3d39c9c3c6e8aed786847e340fbc4047f

実行結果

うまくいけば Hello World の上に先ほどの文字列が表示されています！！

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

参考

COCOS2D-X-3.0で改善されたラベル
http://www.cocos2d-x.org/docs/manual/framework/native/v3/label/ja

1 2 »