64ビット整数のオーバーフロー判定についてのメモ

Czt3ey3UkAAmhWb

こんにちは。

去年の暮れに素数をつないで落ちつくんだ〜簡単!素因数分解で「京」を目指せという iOS/Android アプリをリリースしたのですが、その際、64ビット整数 (long型) 同士の掛け算の結果がオーバーフローしているかどうかの判定をする必要がありました。

これが思ったより悩ましかったので、その時の調べたり試したことをまとめてみました。

オーバーフローとは?

Wikipedia によると以下のような現象のことです。

デジタルコンピュータにおいて、演算結果がレジスタの表せる範囲や記憶装置上の格納域に記録できる範囲を超えてしまう現象、またはその結果レジスタ等に格納される値を意味する。オーバーフローは、本来演算結果を格納する場所とは違う場所に格納される場合がある。「溢れ」とも言う。 (算術オーバーフロー – Wikipedia)

要は計算の結果が大きすぎて、エラーになってしまった状態です。ゲーム内の得点の計算などでこれが発生すると、せっかくの記録が台無しになってしまうので、大問題です。

以下では、このオーバーフローの防ぎ方を考えていきます。なお、ここでは符号つき整数の場合を考えます。

加算(+)の場合

整数 a と整数 b の足し算の結果(和)がオーバーフローしていないかの判定を考えます。ここで、正の64ビット整数の最大値を LONG_MAX とし、a も b も正の値だとします。

I. 処理系依存の方法

これはC言語として保証されていない(と思う)方法ですが、符号付き整数がオーバーフローしてその最大値 LONG_MAX (9223372036854775807) を1超えると、逆に最小値 LONG_MIN(-9223372036854775808)になってしまう処理系がほとんどです。それを利用して「加算の結果が負になったらオーバーフローだった」と判定します。実用的にはこれでいいんじゃないですかね。

うちでは動作する加算オーバーフロー判定

II. 正攻法

処理系に依存しない方法を考えます。
a と b の和が LONG_MAX を超えるには、少なくとも a か b のどちらか一方が LONG_MAX/2 以上である必要があるので、

(1) a と b どちらも LONG_MAX/2 未満の場合、オーバーフローはしない

(2) a のみが LONG_MAX/2 以上の場合、a – LONG_MAX/2 + b がLONG_MAX/2 以上の場合、オーバーフローする

     b のみが LONG_MAX/2 以上の場合、b – LONG_MAX/2 + a が LONG_MAX/2 以上の場合、オーバーフローする

(3) a と b どちらも LONG_MAX/2 以上の場合、オーバーフローする

LONG_MAX は実際には奇数ですので、計算の際はそれを意識してコードを書く必要があるかもしれません。

処理系にほとんど依存しない加算オーバーフロー判定

[2017.03.02 追記]
上記のような方法を取らざるを得ないと思っていたのですが、コメント欄にご指摘をいただきました。

確かに a < LONG_MAX – b の判定ならオーバーフローを起こさずに可能ですので、a + b がオーバーフローするかどうか計算前に検知することができます。今後はこの方法でやろうと思います。(^^;

III. ハードウェア情報を読み取る

そもそもC言語などの高級言語ではオーバーフローと呼ばれる現象は、機械語(アセンブリ言語)の世界では単なるキャリーフラグを伴った加算なので、キャリーフラグを読み取ればオーバーフローしたかどうか判定できます。しかしこの方法は完全な処理系依存になってしまうので、ここでは扱いません。

乗算(×)の場合

本記事を書こうと思ったきっかけになったケースです。整数 a と整数 b の掛け算の結果(積)がオーバーフローしたかどうかの判定を考えます。

I. 処理系依存の方法

上述の加算の場合、LONG_MAX を超えると負の値になりました。乗算の場合も、積が LONG_MAX を超えたら負の値になってくれるような期待をしていた時期が自分にもありました。
しかし実験の結果、

なんと、結果は正になったり負になったりで、オーバーフロー判定には使えないようでした。

仕方ないのでいろいろ考えたのですが、掛け算した結果を a で割って b と等しくなれば計算できている(オーバーフローしていない)と判定してみることにしました。

うちでは動く乗算オーバーフロー判定

いくつかのケースを試しましたが、正しく判定できたので、実装もシンプルなので上記のアプリはこの方法でオーバーフロー判定してます。

この方法(実装は Unity なので C#ですが)で、正しく64ビット整数の最大値 922京3372兆368億5477万5807 のカウンターストップが達成されたスクリーンショットがこちらw。(あいしさん、ここまでプレイしていただいてありがとうございます)

64ビット整数の最大値でちゃんと止まってます

II. 正攻法

乗算の処理系に依存しない判定方法が難しい。
加算の時と同じように考えると、以下のようになると思います。

a と b の積が LONG_MAX を超えるには、少なくとも a か b のどちらか一方が √LONG_MAX 以上である必要があるので、

(1) a と b どちらも √LONG_MAX 未満の場合、オーバーフローはしない

(2) a のみが √LONG_MAX 以上の場合、a ÷ √LONG_MAX × b が √LONG_MAX 以上の場合、オーバーフローする

     b のみが √LONG_MAX 以上の場合、b ÷ √LONG_MAX × a が √LONG_MAX 以上の場合、オーバーフローする

(3) a と b どちらも √LONG_MAX 以上の場合、オーバーフローする

しかしこのロジックをコンピューター上で正確に実行するのは困難です。なぜなら(2)の計算の途中に小数が入り込み、誤差が生じる余地があるからです。というわけで、積の正攻法判定はとりあえずあきらめました。

どなたか良い方法があれば教えてください…。(–;

[2017.03.02 追記]
コメント欄に良い方法をいただいてしまいました。

 「a < LONG_MAX / b が成り立つ場合、a * b はオーバーフローしない」と判断できそうです。今後はこの方法でやろうと思います。(^^;

減算(ー)、除算(÷)の場合は?

a も b も正の値だとすると、減算で(符号の逆転はあるにせよ)オーバーフローするケースはありません。

また除算でも(切り捨て誤差が発生するにせよ)オーバーフローするケースはありません。

まとめ

  • 64ビット整数演算のオーバーフロー判定は、処理系依存のコードであれば上記のような簡単な方法で記述できる。実用上はそんなに問題ないはず。
  • 符号付き64ビット整数の乗算オーバーフロー時、答えが負の数になると思ってはいけない。
  • とりあえず「積を元の数で割ってみて元に戻るか」で判定してみた iOS/Android アプリをリリースしていますが、今の所NGケースは見つかっていません。
  • [2017.03.02 追記] 乗算の判定に関してコメント欄で「a < LONG_MAX / b が成り立つ場合、a * b はオーバーフローしない」というやり方を教えていただきました。このやり方のほうが、環境依存しないという意味で、よさそうですのでお勧めいたします。(^^;

『Unity1週間チャレンジ』と称してアプリを作ってみた結果をご覧ください

cyuyfscuuaaoc8d

こんにちは。

メインコンテンツの1つが Cocos-2d-x/JS である当ブログにこう言った記事を書くべきかどうか悩みましたが、書きました。Unity、使いやすいです。(笑)

背景

最近、Cocos2d-x の最大の競合と目されていた Unity が気になっていました。Unity については、まだ無料版の機能が大きく制限されていたバージョン4のころにちょっとさわってみただけで、ほとんど使ったことはありませんでした。

また、最近はメインをPC/Mac用の作品にしており、アプリが全然リリースできていなかったこともあって、ネタさえあれば小規模なアプリ1本作ってリリースしたいなあと思っていました。

そんなときに1つのアイデアがひらめきました。

 

『数字を叩いたら、素数に分裂したら面白いかも』

 

これなら綺麗なグラフィックとかなくてもそれっぽくできそうだし、短期間でリリースできるかも・・・。

気がついたら以下のようなツイートをしていました。ツイートで自分を追い詰めるスタイルは昔から変わっていないようです。

これが 11月21日(月)PM4時なので、1週間後の 11月28日 PM4時が期限の目安です。

Unity 自体はこの2日前の11月19日にダウンロードしていて、チュートリアルをやっていたので、この時点では Unity 歴2日でした。

誰も見てないとは思いつつ、さっきのツイートをツイッターのプロフィールページに固定して自分にプレッシャーをかけてチャレンジスタートです。

1日目(〜11/22)

本気で何かを勉強するなら参考書を買ったほうがいいと思っているので、なにか買うことにしました。どうせ買うなら今アプリ業界で話題の、アプリ和尚こといたのくまんぼうさん監修の本(通称:和尚本)を買ってみました。この本にはお世話になりました・・・。

帰宅後、開発環境をセットアップしました。

  • Java Development Kit (JDK1.7)※後に1.8に変更
  • Android Studio (2.2.2)
  • Unity(5.4.3)

この日は Unity の使い方の勉強というよりも、環境構築がメインだったので、サンプルプログラムが実機(Android)で動作すればいいかなあという感じでした。Android の端末も1年ぶりにひっぱりだして、まずはシステムアップデートさせられる有様。

試行錯誤のすえ、初日に和尚本のサンプルプログラムを動作させることができました。

ここまでは順調か・・・?

2日目(〜11/23)

朝から地震があって、福島県に津波警報が出たりしてましたが、埼玉なので安全でした。

この日から自分のアイデアを実装です。まずは「数字をたたいて分解できる」ところまで作って、それを触りながらゲームのシステムを考えようと思っていました。走りながら考える。

サンプルプログラムのボールが落ちてくるところをそのまま使わせていただき、それっぽい雰囲気にするため、画像を消してワイヤーフレームにし、テキストを追加しました。(それも初心者なので結構苦労しましたが・・・)

数字がタップされたことの判定は、Cocos2d-x よりやりやすかった気がします。(自分が Cocos2d-x を使いこなせてなかっただけかもしれませんが)

そのあと、数字が震える表現を Unity の Animation で表現しようとしていたのですが、ツイッターを見ていたアプリ開発者のねこバタ会議さんに教えて頂いた DOTween というもの使いました。アドバイスありがとうございます。

結果、開始からだいたい48時間で、当初のイメージが一応動くようになりました。

このツイートを結構リツイートや「いいね」をしていただき、モチベーションがさらに上がってしまいました。(「いいね」の力は怖いです)

3日目(〜11/24)

前日までで、とりあえずはリリースまでいけることを確信し、この日はまず広告の実装をしました。(使用させていただいたのは nend 様の広告)

Unity での広告実装は、もちろん初めてだったのですが、Cocos2d-x よりかなり簡単な気がしました。どうしようw。

ただ元々 JDK の1.7 を使っていたのですが、nend SDK がうまく動作しなかったので、JDK 1.8 にする必要がありました。詳しい理由は不明ですが、今回はスピード重視開発なので動いたら気にしません。

4日目(〜11/25)

2日目に、数字が素数に分解できるようになったものの、この時点でどうやって素数を消すか決めていませんでした。いろいろ候補はあったのですが、ツイッターを見ていたアプリ開発者のめるくまさんのアドバイスに心を惹かれてしまいました。

あまり悩んでいる時間もないので、とりあえず「素数をスワイプでつなぐ」というのを実装してみることにしました。

結構ゲームっぽくなってきました。

5日目(〜11/26)

週末もがっつり仕事してると家族崩壊しそうなので、週末は家族優先を心がけています。

この日は土曜日なので、作業できる時間は限られていたのですが、細々と作業してました。(そういう意味ではまだまだ余力があるのか?)

ツイートにあるように、ゲームとしての体裁を整えるべく、点数が入るようにしたり、ゲームオーバーになるようにしたりしました。

機能はしませんが、シェアボタン、ランキングボタンもつけました。

6日目(〜11/27)

日曜日です。この日も家族の目を盗んで開発。

風邪気味だったのと、ツイートが残ってないので、作業内容の詳細は失念しました。

7日目(〜11/28)

ついに運命の最終日。PM4時までにリリースできるのか・・・?

アプリとして最低限「ヘルプ機能」「シェア機能」「ランキング機能」は実装したいと思っていたので、それまではリリースできません。
ヘルプ機能は Unity のプレハブ機能などを使って30分くらいで作りました。

SocialConnector というプラグインを導入したところ、画像つきシェア機能が一瞬で実装できました。Cocos2d-x ではこうはいかない・・・。

ランキング機能は、Lobi というサービスを使わせていただきました。Lobi の導入は、Unity のバージョンが新しかったせいか、結構苦労しました。

そうこうしているうちに時間切れ。1週間でアプリをリリースなんて…無理だったんだ…。

8日目(ロスタイムw)

目標時刻は過ぎてしまいましたが、ここまで来たらリリースしておきましょう。

最後、アイコンを用意したり、プレイ動画用意したり、Google Play のストアページを準備したりして、準備完了。Android アプリは事後審査なので、とりあえずリリースできるのが魅力です。

というわけで、アイデアを思いついてから8日4時間で Android アプリをリリースしました!

この短期間で、それなりの形になったアプリがリリースまでいけて一安心です。昔はこれくらいのペースでアプリを量産していた開発者の方がたくさんいたようですが、最近はアプリ業界の競争が激しくなってきていて、採算がとれないようですね・・・。自分も今回は採算度外視です・・・。

所感

なかなか腰が重くて Unity 始められていませんでしたが、いざ使ってみると、噂通り素晴らしいツールに思えました。プラグイン(アセット)の導入が比較的簡単なのも印象的でした。

Cocos2d-x は、オープンソースでコードでガシガシ書けるのが魅力ではありますが、「統合開発環境」ではない点で、Unity に遅れを取っている気がしました。(Cocos Creator に期待ですかね)

さいごに

これで自分も Unity の基本は学ぶことができたので、スキルシートに『Unity 経験あり』と書いていいですか?

現在、お仕事募集中ですので、興味のある方は連絡下さいw。


Yahoo!ニュースのトップ記事にブログ名が載った!!これはアクセス数爆上げだろ!!→結果は?

Screen Shot 2015-08-13 at 3.47.39 PM

こんにちは。
最近アプリ開発をさぼってブログばかり書いている者です。そろそろ真剣にやばい。

先日書いたブログ記事『アプリが勝手に中国語化されてリリースされていると聞いて調べてみたら、想像以上にやばかった』がSNSなどを通じでだいぶ拡散していただきました。

それが ITmedia さんに話題として取り上げていただくに至り、そのヘッドラインがなんと Yahoo!JAPAN のトップページに表示されるという幸運に恵まれました。ありがとうございます!!

天下の Yahoo!JAPAN様のトップページに載った記事にブログ名が掲載された、その集客効果はいかに??

どんな感じに掲載されたのか

 

記念のスクリーンショット

Screen Shot 2015-08-13 at 3.47.39 PM

2015年8月13日PM3時ごろ「日本製アプリ勝手に中国版?」という見出しの記事がこのようにYahoo!JAPANのトップページに!まぶしい!

そこをクリックし、記事詳細を開くと、

Screen Shot 2015-08-17 at 9.22.41 AM

日本製アプリ 勝手に中国版? – Y!ニュース (2015年8月13日(木)掲載)
http://news.yahoo.co.jp/pickup/6170529

 

個人開発者のTOMEさんのサイト「tomeapp」』きた〜!!

 

しかし残念ながら直リンクはなかったです。(ここで直リンクになっていたら・・・・)

いちおう ITmedia 様の元記事へのリンクはあって、そこをクリックすると以下のページへ

Screen Shot 2015-08-17 at 9.30.17 AM

日本製アプリを「完全コピー」? 中国の独自マーケットに海賊版が続出 「パクられた」の声多数 – ITmedia ニュース http://www.itmedia.co.jp/news/articles/1508/13/news069.html

 

こちらには直リンク貼っていただきました!ライターの方には足向けて眠れません!

集客効果はどれくらいあったのか?

 

分析の元データ収集にはいつものように神ツール Google アナリティクスを使っています。

まずはブログへのページビュー(PV)の推移です。

Screen Shot 2015-08-17 at 10.10.36 AM

8月12日に例の記事を公開し、それが Twitter や Facebook などで拡散され、それまで毎日100程度だったPVが、1439まで上昇しました。

8月13日には ITmedia 様に記事を紹介していただき、それが Yahoo!ニュースに掲載されるなどして PV2442(新記録!)まで上昇しました。

その後14日に一旦落ち着きますが、15日に再び2000PVを回復したりして興味深いです。

ここで、8月12日から8月16日の tomeapp を訪れていただいた方の参照元をみてみます。

Screen Shot 2015-08-17 at 10.31.49 AM

 

t.co は Twitter だったり、Facebook は m.facebook.com だったり l.facebook.com だったりするのでまとめてみると。

 

Screen Shot 2015-08-17 at 10.50.37 AM

割合としてはこの様な感じでした。

意外なことに、ブログまで来ていただいている方の多くは Twitter と Facebook のリンクからです。

ITmedia さんの記事には直リンク貼っていただいてたのですが、参照元が ITmediaのアクセスは 60件程度どまりでした。ITmedia さんの PV がわからないので正確な数字はわかりませんが、おそらく ITmedia の記事を読んだ大多数の方は、その記事の元となったブログには興味をもってもらえなかったのでしょう。わざわざ元記事をたどった方はごく少数だったようです。(泣)

Google/Yahoo!検索から 265件のアクセスがあったので、その大部分はYahoo!ニュースを見て「tomeapp」って何者だ?と検索してたどり着いていただいた方だと思われます。Yahoo!ニュースには直リンク貼られていなかったのに、件数としては ITmedia さんの4倍以上です。

「月間100億PV」と言われるYahoo!ニュースに名前が載ったにしてはちょっと寂しい結果に。これで直リンクがあったらなあ・・・。

ブログが話題になっている件をメディアに取り上げてもらっても、ブログ記事まで見に来てくれる人はごく一部、ということでしょうか。そのことは「さいたま市の創業相談会に行ったら「まず会社作らなくていいからゲーム作りなさい」と言われた」が、Togetter のまとめが2万PV超えていてもブログへのアクセスがそれほどでもなかったことに似てますね。(泣)

で、アプリのダウンロードは増えたんですか?

 

1つ忘れていましたが、このブログは自作アプリのプロモーション活動の1つでした。

ブログ右上のアプリ紹介、これが大事!

Screen Shot 2015-08-17 at 11.23.06 AM

ダウンロード数の推移はこんな感じです。

Screen Shot 2015-08-17 at 11.28.12 AM

もうほぼダウンロードされなくなっていた「ねずみハンター キャシー」ですが、8/14からちょろっとダウンロードされました。10 DLくらいですけど・・・。

Yahoo!ニュースにブログ名がアプリと関係ない話題で載ってもだめですね。「こんなアプリが話題です!」のようなニュースに載らないとだめなんだと思います。

まとめ

 

ではまとめです。

  • ブログが話題になっている件をメディアに取り上げてもらっても、ブログ記事まで見に来てくれる人はごく一部。
  • Yahoo!ニュースと言えど、ブログ名がアプリと関係ない話題で載ったりしても集客効果はそれほどない。「こんなアプリが話題です!」のようなニュースで載りたい。
  • 拡散効果は大部分が Twitter と Facebook、あと はてなブックマークも少々。そこで拡散されそうなことを書くべき。

こんなところですかね。

はやくアプリで有名になりたい・・・。


アプリが勝手に中国語化されてリリースされていると聞いて調べてみたら、想像以上にやばかった

https---www.pakutaso.com-assets_c-2015-05-UNI_MONV15002722-thumb-1000xauto-14713

こんにちは。

中国の人の著作権に対する意識は最近だいぶ改善してきたのかなあと思っていましたが、アプリ業界ではまだまだ課題があるようです。

きっかけはポケットガールの作者、Zabosama@ハルシオン様のこのツイートです。

 

 

「そんなあからさまにパクられることあるのかー」などと思い、さっそく中国のほうのサイトを見てみました。すると想像以上に画面はオリジナルにそっくりで、もうパクリというか「中国語版ポケットガール」といったほうが近いような印象でした。

 

Screen Shot 2015-08-12 at 3.51.24 PM Screen Shot 2015-08-12 at 3.44.51 PM
本物 パクリ(?)

 

 

いくら著作権意識の薄い中国とはいえ、ここまであからさまなパクリはやらないのでは?と思って、何が起こっているのか調べてみました。

 

調査開始

 

まずはこの中国のサイトをよく見てみると、

Screen Shot 2015-08-12 at 3.58.34 PM

「美少女育成-永恒的錬金術師 中国語化版」「【中国語化】当乐 and 扑家 共同 1st release」などと書かれています。

なるほど、彼らはこれはパクリではなく「中国語版」として公開しているようです。

で、翻訳したのは何者かも堂々と書いてあります。「当乐」とはこのサイトですが「扑家」とは何者でしょうか・・・。

 

「中国語版」制作元のサイトを発見

 

扑家」ぐぐってみると、いろいろなサイトがヒットします。で、以下のサイトが彼らの本拠地のようでした。

 

扑家吧
http://www.pujia8.com

Screen Shot 2015-08-12 at 4.15.19 PM

いきなり「乖離性ミリオンアーサー」の中国語版のようなトップ画像なので、これが無許可だとは考えられないですが・・・。

で、しばらくトップページを見ていたら、

Screen Shot 2015-08-12 at 12.17.21 AM

ポケガ、キターー(無許可)

ここまで堂々とやっているので、自分はこう考えました。

「彼らはボランティアでローカライズを行っている、熱烈な日本のゲームファンなのだ。だからこんなに堂々とできるのだ。」

そう。

メッセージ、画像を、なんらかの方法で差し替えてローカライズして公開するだけなら、広告収入モデルのアプリの場合、元の開発者に広告収入はそのまま入るので、むしろありがたいはず。

広告を確認してみた

 

百聞は一見にしかずですので、実際にこのサイトからアプリをダウンロードし、自分も Android 端末にインストールしてみました。幸い自分は Android SDK を持っているので  “adb install XXX.apk” とやるだけでインストールできます。いわゆる root 取得 などは不要でした。

これで、ゲーム内容だけが中国語化されていて、広告がオリジナルのままでるのなら、彼らは熱烈な日本のゲームファンだと確認できます。

で、起動してみたところ、

 

device-2015-08-12-142721

 

 

device-2015-08-12-142721

 

うーん、最終的にはハルシオンさんに聞いてみないと確信がもてませんが、この ADVIEW というのは中国系のアドネットワークのようなので、おそらくローカライズだけでなく、広告の差し替えを行っていると思われます。これはまずい。

AdView
http://www.adview.cn

これをやられてしまうと本来オリジナルの作者に入るはずだった収入が丸々持っていかれます。やばい。中国市場をまじめに検討しているアプリ開発者は、容易に apk ファイルをデコードできなくするなどの対策を練った方がよいかもしれません。

 

なぜこのように大胆にできるのか?

 

まず以前ブログにも書きましたが、中国には Google Play がありません。ですので、Android ユーザーは、キャリアが提供するアプリストアからアプリをダウンロードするか、もしくは(おそらく)root権限をなんらかの方法で取得し、様々な非公式のサイトからアプリをダウンロードする習慣がついているのが1つの理由のようです。

もう一つは、以前より改善したとはいえ、やはりまだまだ中国の方々は知的所有権を尊重する意識に欠けていることが大きそうです。

特に海外の作品に対しては「良い作品を見つけたらそれを中国国内で広めるのは、見つけた者の権利だ」と思っているように感じます。

以下のページの注意書きに、

Screen Shot 2015-08-12 at 4.59.41 PM

「この中国語化は私たちのグループが行った物であり、許可のない盗用は厳禁です」

と書いてあります。

うーん、その前にまず中国語化の許可をとらないと・・・。

まとめ

 

今回わかったことをまとめると。

 

  • 中国では、海外の開発元に許可なく中国語化してそれを公開することが日常的に行われている。
  • 広告の差し替えを行っているので、悪意がある。
  • 中国市場を真剣に考えているアプリ開発者は対策したほうがよさそう。

 

といったところでしょうか。

幸い、ポケットガールのケースの場合、広告収入の一部はハルシオン様のところに入ってきているようで、そんなに悲惨なケースではなさそうです。

 

 

中国政府とGoogle が仲直りして、Google がびしっと取り締まってくれると良いのですが・・・。

 


アプリストアに必要なスクリーンショットをリサイズで一気に作成するコマンド

Screen Shot 2015-06-05 at 8.08.22 PM

こんにちは。

前回アプリを公開したとき(2015年4月)に使った小技ですので、いま有効かどうか未確認ですが、サイズの異なるスクリーンショットを一気に作るコマンドの紹介です。

使用した環境

OS: Mac OS X 10.10.3

準備するもの

自分の場合はiPhone6 に合わせて 750×1336 pixel で、元となるスクリーンショットを5枚作成しました。(今考えると、640×1136 pixel で作っておけば、十分だったかもしれませんが、iPhone6 で 640×1136 のみ対応のアプリを動かすと、ピクセルが拡大されているのが見てわかってしまうので、こだわってしまいました。

 

機種 画面サイズ [Pixel] 必須? 備考
iPhone4s 640×960 必須 そろそろサポートしなくてもよくなるらしい。(もうなっているかも)
iPhone5/5s 640×1136 必須
iPhone6 750×1336 オプション
iPad 1536×2048 iPad対応アプリには必須 とりあえず左記のサイズを用意したら、iPad対応としてサブミットできた。

 

例えば、ss1.png 〜 ss5.png という名前の 750×1336 のスクリーンショット画像を、iphone6という名前のディレクトリに置きます。

Screen Shot 2015-07-24 at 2.23.16 PM

コマンド実行

 

この状態で、ディレクトリ丸ごと、iphone4, iphone5, ipad という名前でコピーします。

 

Screen Shot 2015-07-24 at 2.32.46 PM

サイズの変換には sips コマンドを使います。iPhone6 -> iPhone5 のサイズ変換は、アスペクト比がほぼ等しいので、sips の -z オプションでサイズを指定するだけです。

 

 

iPhone4 や iPad へのサイズ変換は、アスペクト比が異なるので、まず -z オプションでアスペクト比を保つようなサイズに変換したのち、-p オプションでゼロうめをしてサイズを合わせます。こうしないと、単純な引き伸ばしになってしまいます。

 

 

結果

 

プレビューなどで結果を確認します。

ss1 ss1 ss1 ss1

これで、一応は各サイズ用のスクリーンショットが用意できました!(サイドの黒塗りが気になる方は、何か別の手段を使う必要がありますが)

 


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

curie128

こんにちは。

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

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

Screen Shot 2015-06-15 at 11.15.58 AM

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

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

参考

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

 


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

curie128

こんばんは。

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

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

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

Screen Shot 2015-06-15 at 12.46.22 AM

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

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

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

遊び方

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

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

今後の予定

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

 

 


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

img-cocos2djs

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

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

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

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

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

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

app.js

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

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

実行結果

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

Screen Shot 2015-06-10 at 8.58.30 PM

※ 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

 


いまさらながら Eclipse + ADT の Android 開発環境を作る

eclipse-800x188

ちまたでは Android Studio 1.3 が発表され、今後 Android アプリ開発は Google の強力なプッシュにより Android Studio で行うのが主流になっていくと思われます。

そうは言っても、過去の遺産にしばられるのがソフトウェアの常なので、ビルドができるうちは Eclipse + ADT (Android Developer Tools) 勢力も残っていくと思います。

Cocos2d-JS で作成したプロジェクトも、2015年6月の最新版 v3.6.1 でも Eclipse + ADT 用の設定ファイルしか出力しないので、Cococs2d-JS を使うなら、今のところは Eclipse + ADT で行くのが早いです。

使用した環境

OS: Mac OS X 10.10.3
Eclipse: Eclipse Luna Service Release 2 – Version 4.4.2
ADT: 23.0.6

インストール手順

下調べ

バージョン不整合で痛い目を見ないために、まず ADT の公式ページで要件を調べます。

http://developer.android.com/tools/sdk/eclipse-adt.html

Screen Shot 2015-06-07 at 1.30.16 PM

2015年3月に ADT 23.0.6 がリリースされており、依存関係は以下のとおり:

  • Java 7 以降 (Android 5.0 以上のビルドを行う場合)
  • Android SDK Tools r24.1.2
  • Eclipse Indigo (Version 3.7.2) 以降

順番に確認し、必要に応じてインストールします。

Java および Android SDK Tools のインストール

こちらの記事「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、コマンドラインベースの Android 開発環境を構築しておいてください。

Eclipse のインストール

以下のページから最新版の Eclipse (2015年6月8日現在 Eclipse Luna – Version 4.4.2) をダウンロードします。いろいろ種類がありますが、Android アプリ開発に必要なものは一番上の Eclipse IDE for Java Developers に含まれています。

https://eclipse.org/downloads/

Screen Shot 2015-06-08 at 4.44.12 PMインストーラーは特に無いので、ダウンロードしたファイル (eclipse-java-luna-SR2-macosx-cocoa-x86_64.tar.gz) をダブルクリックで解凍し、作成される eclipse というディレクトリを丸ごと /Applications に移動させるのがオススメです。

最初の起動時は「インターネットからダウンロードしたファイルは実行できません」と怒られますが、ファインダー上で右クリックメニューから開けば実行できます。

Android Development Tools (ADT) のインストール

http://developer.android.com/sdk/installing/installing-adt.html

ADT は Eclipse のプラグインとして提供されているため、Eclipse 上で追加することができます。

Eclipse を起動し、 メニューの [Help]→[Install New Software…] を選びます。

Screen Shot 2015-06-08 at 6.48.45 PM

プラグイン管理のウインドウが開くので [Add] を押し、レポジトリを指定します。Screen Shot 2015-06-08 at 6.50.47 PM

公式ページに書かれている “https://dl-ssl.google.com/android/eclipse/” をLocation に指定し、[OK] を押します。

Screen Shot 2015-06-08 at 6.51.24 PM

ポップアップが閉じると “Developer Tools” が選べるようになっているので、それを選択して [Next>] を押します。

Screen Shot 2015-06-08 at 6.52.03 PM

少し時間がかかって依存性が解決され、実際にインストールされるパッケージのリストが表示されたら再度 [Next>] を押します。

ライセンス情報が表示されたら、内容をすべて理解するのはかなりハードル高いのでどうするかはお任せします。自分は理解せずに “I accept …”  を選びました。

Screen Shot 2015-06-08 at 7.03.13 PM

そして [Finish] を押すとインストールが始まります。

もしかしたら Security Warning が表示されるかもしれませんが、その時どうするかはお任せします。自分はレポジトリの URL が google.com だったので、Google を信じて [OK] で進めてしまいました。

Screen Shot 2015-06-08 at 7.07.57 PM

インストールが終わると Eclipse の再起動が求められるので、再起動します。

再起動後、Android SDK の場所を求められるので入力します。「Cocos2d-JS のサンプルを動かしてみる (Android編)」の通り作業してあれば、/opt/android-sdk-macosx がそれになります。

Screen Shot 2015-06-08 at 7.10.20 PM

自分の場合ここで何か xml ファイルが読めないようなエラーメッセージが出ましたが、そのまま進めてしまいました。

これでインストールは完了です。

動作テスト

確認として、空の Android アプリを作成して動作させてみます。

Eclipse メニューの [File]→[New]→[Project…] を選びます。

Screen Shot 2015-06-08 at 7.21.32 PM

新規プロジェクトウイザードが開始するので [Android]→[Android Application Project] を選んで [Next>] を押します。

Screen Shot 2015-06-08 at 7.22.16 PM

アプリ名などを適当に入力します。ここでは「Test」と言う名前のアプリ名/プロジェクト名にしました。SDK のバージョンをなどを聞かれますが、デフォルトのままにして [Next>] を押します。

Screen Shot 2015-06-08 at 7.22.32 PM

Activity をどうするか聞かれるので “Blank Activity” を選んで [Next>] を押します。Activity と言うのは iOS で言うところ View Controller のようなものです。Screen Shot 2015-06-08 at 7.23.06 PM

あとはすべてデフォルトのまま進み、最後に [Finish] を押します。

これで空の Android プロジェクトができたので、実行してみます。左側の Package Explorer で先ほどのアプリ (ここでは “Test”) を選んだ状態で、ツールバーのデバッグアイコンのプルダウンから [Debug As]→[Android Application] を選びます。

Screen Shot 2015-06-08 at 7.25.56 PM

うまくいけば、シミュレーター (AVD) が起動し、空のアプリが起動します!!

Screen Shot 2015-06-08 at 7.31.03 PM

これで Cocos2d-JS の Android プロジェクトを IDE で開発する準備が整いました!

 


ねずみハンター キャシーの開発に使用したツール

Cathy256

こんにちは。

聞かれてもないですけど自主的に『ねずみハンター キャシー』の開発に使用したツールの紹介をします。音楽と一部のグラフィック以外は個人開発なので、これから小規模のアプリを開発しようと考えている方の参考になれば幸いです。

機材

PC: Macbook Pro 13インチ 2.4GHz Core i5 メモリ8GB SSD 256GB
Screen Shot 2015-06-06 at 10.34.08 AM

2014年の前半に買った Macbook Pro で2015年6月現在いまでもストレスなく動作しています。

ツール

Cocos2d-JS

無償の商業利用可能なアプリ開発プラットフォームです。Cocos2d-x に比べてイマイチ普及していませんが、JavaScript でブラウザ、iOS、Android などで動作するアプリが開発できる優れものです。日本語どころか英語の情報も最新のバージョンのものはあまり揃っていませんが、ソースがあるので大抵なんとかなります。

http://www.cocos2d-x.org/products(英語)

http://jp.cocos.com/products (日本語)

WebStorm

有償のWebサイト構築に特化したIDE(統合開発環境)です。IDEといっても自分はテキストエディタと認識しています(使いこなせてないのかな)。

Screen Shot 2015-06-06 at 12.18.46 PM

JavaScript のコード補完について、いろいろなソフトを試しましたが WebStorm が一番でした。JavaScript が動的型付けのオブジェクト指向なスクリプト言語なので、コードの補完を実装するのは大変なんだと思いますが、WebStorm はその辺りをうまく実用的なレベルにまで作り込んでくれているようでした。

https://www.jetbrains.com/webstorm (英語サイト)

Tiled

無償の商業利用可能なマップエディタです。TMX形式で出力すれば Cocos2d-JS で読み込みことが可能です。

Screen Shot 2015-06-06 at 12.21.50 PM

各ステージの背景は、マップチップを PNG ファイルで作成したものを Tiled で読み込み、TMX ファイルを作成しました。

http://www.mapeditor.org (英語サイト)

Photoshop

説明不要の有償画像加工ツールです。

主にタイトルロゴ、アイコン、スクリーンショット画像の作成に使用しました。

http://www.adobe.com/jp/products/photoshop.html

App Icon template (for Photoshop)

アプリ開発経験がある方はご存知だと思いますが、iOSのアイコンは様々な大きさのものを用意する必要があって、非常に面倒です。

このサイトにあるテンプレートを使うと、必要なサイズのアイコンを一気に作成してくれます!超便利でした!

http://appicontemplate.com/ios7

CLIP STUDIO PAINT PRO

有償のイラスト制作ソフトです。通称クリスタ。グラフィックを専門にされている方にとっては有名どころだと思います。自分はプログラマーなのでよくわかっていませんが。。

LINE スタンプが流行った時に、自分でも描いてみようと思ってクリスタ買ってしまいました。頑張って40枚描いたスタンプはリジェクトされてお蔵入りしましたが、それはまた別のお話。

Mac 用のドットエディターがいいのが見つからなかったので、今回はこれでドット打ちました。正直、ドットを本格的に打つには適していないと思います。Windows では EDGE とか D-Pixed とかあるんですけどね。。

http://www.clipstudio.net

Audacity

無償のオープンソースのサウンドデータ加工ツールです。

今回、効果音は素材サイトで探したり、自分の過去の作品で使用した音を使いまわしたりしましたが、Audacity でいろいろなエフェクトをかけたりトリミングしたり形式変換したりできるので、使いました。

BGMに関しても、ループ再生の際、微妙に無駄な間があったりすると聞き心地を損なうので、Audacity で微調整しました。

http://sourceforge.net/projects/audacity (英語サイト)

Chrome

無償のブラウザです。かなりブラウザとして有名なのですが、実は強力な JavaScript デバッグの機能を持っています。

Screen Shot 2015-06-06 at 12.28.13 PM

今回は、Cocos2d-JS の JavaScript 部分の簡単なテスト/デバッグはほとんど Chrome 上で行いました。Chrome 上である程度動作が確認できた後、iOS 上で最終確認を行っていました。

https://www.google.co.jp/chrome/browser/desktop/index.html

MAMP

Webサーバー。Chrome 上で JavaScript を実行させる際に使いました。OS X や Cocos2d-JS 自体に Webサーバー機能が含まれているので、なくてもいいのですが、GUIで制御できるので個人的にはあると便利でした。

有償版もありますが、無償版で十分でした。

https://www.mamp.info/en/

Xcode

iOS アプリを作成するには必須の、Apple 純正の IDE (統合開発環境) です。Cocos2d-JS で動作するプロジェクトを、iOS デバイス/シミュレーター上で動作させるには必要です。

https://developer.apple.com/jp/xcode/downloads

Eclipse + ADT プラグイン

Android アプリ制作に特化した IDE は Eclipse +ADTプラグインか、Android Studio の2択になると思いますが、Cococs2d-JS が生成するプロジェクトに含まれているのは Eclipse 用の設定ファイルなので、Eclipse の方を使用しました。

しかし2015年6月現在、Android Stdio のほうも以前よりかなり使える様になってきているようなので、今から環境をつくるならどちらがよいかわかりません。要確認です。

ADT Plugin for Eclipseのインストール – Android入門 (JavaDrive様のサイト)
http://www.javadrive.jp/android/adt

何か抜けがあるかもしれないですが、思い出したら追加します!


1 2