tag:crieit.net,2005:https://crieit.net/tags/cocos2d-JS/feed
「cocos2d-JS」の記事 - Crieit
Crieitでタグ「cocos2d-JS」に投稿された最近の記事
2018-10-25T05:49:42+09:00
https://crieit.net/tags/cocos2d-JS/feed
tag:crieit.net,2005:PublicArticle/14257
2017-05-14T08:37:15+09:00
2018-10-25T05:49:42+09:00
https://crieit.net/posts/cocos2d-x-fbx-conv-linux
cocos2d-xのfbx-convをlinuxで実行
<p>cocos2d-xはlinuxにもインストールできる。<br />
しかし、一緒にインストールされる3Dモデルのコンバートツールであるfbx-convはWindows用とmac用のものしか付属していない。</p>
<p>wineで動くと良いかと思ったがうまく動かないのでlinuxでビルドを試してみた。OSはLinux Mint18</p>
<p>基本的には下記のとおりだが、順番や不足があるので補足してみる。</p>
<p><a target="_blank" rel="nofollow noopener" href="http://discuss.cocos2d-x.org/t/fbx-conv-tool-source-code/15920/9">Fbx-conv tool source code - Extensions - Cocos2d-x Forums</a></p>
<h3 id="FBX SDKをインストール"><a href="#FBX+SDK%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">FBX SDKをインストール</a></h3>
<p>前提としてFBX SDKが必要なので、下記でダウンロード。</p>
<p><a target="_blank" rel="nofollow noopener" href="http://usa.autodesk.com/adsk/servlet/pc/item?id=24314456&siteID=123112">Autodesk | 3D Design, Engineering & Entertainment Software</a></p>
<p>付属のテキストに書かれているように、インストールするパスを指定して実行するだけ。</p>
<pre><code class="bash">./fbx20160_fbxsdk_linux /usr/local/lib/fbx-conv
</code></pre>
<h3 id="fbx-convをビルド"><a href="#fbx-conv%E3%82%92%E3%83%93%E3%83%AB%E3%83%89">fbx-convをビルド</a></h3>
<p>下記をclone</p>
<p><a target="_blank" rel="nofollow noopener" href="https://github.com/cocos2d-x/fbx-conv">GitHub - cocos2d-x/fbx-conv</a></p>
<pre><code>export LD_LIBRARY_PATH=/usr/local/lib/fbx-conv/lib/gcc4/x64/release/libfbxsdk.so
export FBX_SDK_ROOT=/usr/local/lib/fbx-conv/lib/gcc4/x64/release
</code></pre>
<p>src/modeldata/Node.hに下記を追加</p>
<pre><code class="c">#include <algorithm>
</code></pre>
<p>src/modeldata/FileIO.cppに下記を追加</p>
<pre><code class="c">#include <string.h>
</code></pre>
<p>あと実際の実行時にもライブラリへのパスが通っていないといけないので、<br />
/etc/ld.so.conf.d/fbx-conv.confを作成して</p>
<pre><code>/usr/local/lib/fbx-conv/lib/gcc4/x64/release
</code></pre>
<p>を書いておく。<br />
このconfファイルを作成したら</p>
<pre><code>ldconfig
</code></pre>
<p>で設定を反映させる。</p>
<p>Makefileを作成するため、</p>
<pre><code>./generate_makefile
</code></pre>
<p>するとbuild/gmake/fbx-conv.makeが作成されるので、この中の最初のCFLAGSを下記に書き換える。</p>
<pre><code>CFLAGS += $(CPPFLAGS) $(ARCH) -g -w -std=c++11
</code></pre>
<p>あとはbuild/gmakeフォルダでmake。するとcloneしたフォルダの直下にfbx-convが作成される。<br />
ここに実行パスを通しておけば良い。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14259
2017-04-30T07:04:12+09:00
2018-10-16T16:46:29+09:00
https://crieit.net/posts/cocos2d-js-Invalid-Native-Object
cocos2d-jsでInvalid Native Object
<p>cocos2d-jsにて、androidでrunしてみると、真っ黒で何も表示されない。<br />
FPS表示は動いているのでうごいてはいるらしい。</p>
<p>android studioのログを見てみると下記のようなログが出力されていた。(抜粋)</p>
<pre><code>js_cocos2dx_Node_isRunning : Invalid Native Object
(evaluatedOK == JS_FALSE)
JS: assets/script/jsb_prepare.js:254:Error: js_cocos2dx_Node_isRunning : Invalid Native Object
Evaluating main.js failed (evaluatedOK == JS_FALSE)
</code></pre>
<p>main.jsの評価に失敗しているということなので、<br />
もしかすると何かしらwebでしか動かない構文があるのではないかと細かく調べてみたが、見つからない。</p>
<p>次にInvalid Native Objectを調べてみると、どうも実行時だけにでるエラーとのこと。<br />
androidでのJavaScriptの実行時だけ何かエラーが出ているらしい。</p>
<p>最終的に、sceneに定義しているrunningメソッドをgoingという名前に変更したら動いた。<br />
どうもSpriteクラスのメソッドを上書きしていておかしくなっていたらしい。</p>
<p>webだと単にJavaScript上でメソッドを上書きするだけだが、<br />
実機だとc言語側でエラーが出るのでエラー時の挙動が変わってしまうようだ。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14332
2015-09-08T11:09:19+09:00
2015-09-08T11:09:19+09:00
https://crieit.net/posts/Cocos-code-IDE
Cocos code IDEの必要性
<p>Cocos code IDEを使う必要性は現在皆無だと思う。</p>
<p>すぐデバッグができるが、WEB、実機共に実際のリリース環境で動作するものとは<br />
プログラム自体が違うため使う理由が無い。<br />
関係ない不具合などもある。<br />
そのため、基本的にデバッグに使用することはできず、<br />
使用するところはエディタ部分しか無い。</p>
<p>また、リソースファイルの記述などをしようとすると<br />
オートコンプリートにかなり時間がかかり使いづらい。</p>
<p>結局、フリーであればBracketsやNetbeansを使うことで<br />
全く同じというか、それ以上の環境を手に入れることができる。<br />
更にプラグインなどによりもっと使いやすくなるし軽い。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14334
2015-06-23T14:06:44+09:00
2018-10-31T20:38:21+09:00
https://crieit.net/posts/cocos2d-js-Assets-Manager
cocos2d-jsでAssets Managerを使用する
<p>cocos2d-jsでAssets Managerを使用しようと思ったのだが、<br />
どうもドキュメントもサンプルも説明が少なく、<br />
ネット上にも情報が少ないので色々試さなければならなくなったのでメモ。</p>
<p>公式のマニュアルは下記。<br />
<a target="_blank" rel="nofollow noopener" href="http://www.cocos2d-x.org/docs/manual/framework/html5/v3/assets-manager/en" target="_blank">http://www.cocos2d-x.org/docs/manual/framework/html5/v3/assets-manager/en</a><br />
(githubかなんかのどこかに日本語もあった)</p>
<p>この情報に加え、ライブラリのサンプルに入っている<br />
samples/js-tests/src/ExtensionsTest/AssetsManagerTest/AssetsManagerTest.js<br />
を見ることで対応できるのだが、どうも上手くいかなかった。</p>
<p>上記の情報を元にすると、Assets Managerはそもそも下記のような動作をする。</p>
<p>・まず、アプリのmanifestとサーバー上のmanifestを比較し、更新されたものをダウンロードして端末に保存。<br />
・保存後、cc.game.restartでリスタートする。<br />
・次回からのアプリ起動時、main.jsにてjsb.fileUtils.setSearchPathsを呼び出して<br />
端末内に保存されているjsやリソースを読み込むように変更する。</p>
<p>上記で試してみたのだが、更新された際にcc.game.restartして再起動してからのプレイは、<br />
途中でフリーズしてしまう。<br />
一度アプリを完全に終了してから再度起動してみるとうまくいくのだが、<br />
更新時に毎回フリーズはさすがにまずいのでこの方法はダメだった。</p>
<p>cc.game.restartのかわりにcc.director.restartやrestartVM等を試してみたがどれもダメ。<br />
そもそもcc.game.restartが内部的にどうなっているのかすぐにはよくわからないので、<br />
この命令を使うこと自体がちょっと怖い。<br />
せっかくAssetsManager自体は上手く動いているのにほんとうにもったいない。</p>
<p>結局成功法はどうもダメのようなので、<br />
<a target="_blank" rel="nofollow noopener" href="http://galapagosit.hatenablog.com/entry/2014/10/08/162819" target="_blank">http://galapagosit.hatenablog.com/entry/2014/10/08/162819</a><br />
にかかれているように、jsListを別にして別途読み込む形で対応することにした。</p>
<p>この方法だとリスタートができないので、アプリ起動中にデータ更新が行われると<br />
一度ゲームを中断して再起動してもらうしかない。<br />
そのため、それを避けるには一つ前のバージョンのサーバーやりとりにも対応して<br />
中断せずプレイできるように運用していく必要がある。</p>
<p>あと、AndroidとiOSでコンパイルした人は気づいただろうが<br />
アプリ内に含まれるjsファイルは、iOSはjsのままなのだがAndroidはjscに変換したもの。<br />
そのためAndroid側でもjsで対応しているとプログラムが書き換えられないので注意が必要。<br />
面倒だ。<br />
大した容量じゃないが、気になる場合はmanifestも別にしなければならない。<br />
(jsListのファイル名は同じで良い)</p>
<p>あと、manifestのsearchPathsが、結局良く分からなかった。<br />
例えばres/をrespathにしてリソースをロードする場合、<br />
manifestのsearchPathsの方にもresを入れておいたほうが良さげ。<br />
問題はそんな起きないと思うので、気になるパスはとりあえず入れておくと良い。</p>
<p>その他。<br />
・miproj等、サイズ0のファイルが混じっているとサーバーによってはエラーになることも。<br />
・開発中で保存されているデータがぐちゃぐちゃになってると、正しくてもエラーになる場合があるので<br />
そういう時は一度アプリを削除したほうがいい。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14336
2015-04-24T20:04:29+09:00
2015-04-24T20:04:29+09:00
https://crieit.net/posts/cocos2d-js-BEAD
cocos2d-jsプロジェクトにBEAD広告でリンクエラー
<p>cocos2d-jsプロジェクトにBEADを導入したらリンクエラーが出るようになった。<br />
-ObjCのリンクオプションあたりが原因だと思うが、<br />
まずBuild PhasesのLink Binary With Librariesに<br />
たしかGameController.frameworkを追加した。</p>
<p>なんか-ObjCを使うとエラーの出たものを追加していかなければならないらしい。<br />
あとは_mainが重複している、というエラーが出たので<br />
cocos2d_libs.xcodeprojのmain関数をまるまる削除した。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14338
2015-03-21T09:00:00+09:00
2015-03-21T09:00:00+09:00
https://crieit.net/posts/cocos2d-js-nifty-mBaaS
cocos2d-jsでniftyのmBaaSを使用する
<p>cocos2d-jsのjs側でniftyのmBaaSを使用してみた。<br />
java側でも別にいいのだが、いちいちjava側にいろいろな処理を書いていたのでは<br />
せっかくjsで作っているメリットが薄れてしまうと思うので<br />
なんとかjsだけで完結できないか試してみた。</p>
<p>Androidのみのテストで、全ての機能を試したわけではないが、<br />
最終的に後述ソースのような形で匿名会員でのログイン、オブジェクトの更新ができた。</p>
<p>特記するところとしては、最初のNCMB.localStorageにcocosのlocalStorageを代入しているところ。<br />
どうも実機だとここがうまく参照されずエラー停止してしまうのでわざわざ入れてあげている。</p>
<p>それ以外のプログラムはNCMB.AnonymousUtils.logInでの匿名会員ログイン。<br />
明示的なユーザー登録は離脱率が多くなるとのことなので、<br />
明示的に登録しなくてもゲームが進められるように匿名会員でのログインが良いと思う。</p>
<p>logInというメソッドだが、どうも新規会員を毎回作成してしまうようなので<br />
NCMB.User.current()を使ってログイン済みかどうかをチェックする。<br />
(localStorageにログイン状態が保存されているので2回目以降の起動でもcurrentでデータが取れる)</p>
<p>これでそのうちゲームを気に入って機種変等のために正規会員になりたいと思った人のために<br />
会員用のデータを入力してもらって埋めればいいのだと思う。(よく調べてはいないが)</p>
<blockquote>
<p>|javascript|<br />
NCMB.localStorage = cc.sys.localStorage;<br />
NCMB.initialize("APP_KEY", "CLIENT_KEY");</p>
</blockquote>
<p>var user = NCMB.User.current();<br />
if (user != null && user.getUsername != undefined) {<br />
var label = new cc.LabelTTF(NCMB.User.current().getUsername(), 'Arial', 24);<br />
label.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);<br />
layer.addChild(label);<br />
user.set('comment', 'aiueo');<br />
user.save(null, {<br />
success: function(user2Again) {<br />
},<br />
error: function(user2Again, error) {<br />
}<br />
});<br />
return true;<br />
}</p>
<p>NCMB.AnonymousUtils.logIn({<br />
success: function(user) {<br />
var label = new cc.LabelTTF('匿名ユーザーでログイン成功', 'Arial', 24);<br />
label.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);<br />
layer.addChild(label);<br />
},<br />
error: function(error) {<br />
var label = new cc.LabelTTF("匿名ユーザーでログイン失敗: " + error.message, 'Arial', 24);<br />
label.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);<br />
layer.addChild(label);<br />
}<br />
});<br />
||</p>
<p>ほんとはGoogle Playゲームサービスの方でこういう機能を提供してくれた方がいいんだけどなぁ。<br />
匿名会員的なものだけでもいいから…。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14339
2015-03-06T10:03:57+09:00
2018-10-31T17:35:32+09:00
https://crieit.net/posts/cocos2d-js-In-app-billing
cocos2d-jsでIn-app billingの文字化け対策
<p>cocos2d-jsを使ったAndroidアプリで、<br />
In-app billingのアイテムデータを取得して価格を表示しようとしたら<br />
思い切り文字化けしていた。(円マークが全角だったので)<br />
どうもJavaからjavascript側にデータを渡す際に文字化けを起こしてしまうらしい。</p>
<p>In-app billingで取得したJSONをそのまま渡していたのだが、<br />
よく見るとこれは全角文字がunicodeエスケープされていない。<br />
他のアプリではunicodeエスケープされていると問題なかったので<br />
下記<br />
<a target="_blank" rel="nofollow noopener" href="http://qiita.com/sifue/items/039846cf8415efdc5c92" target="_blank">JavaのUnicode文字列の変換用メソッド</a><br />
で紹介されているメソッドを改造して、<br />
JSONの全角文字だけをエスケープする関数を作ってjs側に渡したら問題なく動くようになった。</p>
<blockquote>
<p>|javascript|<br />
private static String convertToUnicode(String original)<br />
{<br />
StringBuilder sb = new StringBuilder();<br />
for (int i = 0; i < original.length(); i++) {<br />
int code = Character.codePointAt(original, i);<br />
if (code < 256) {<br />
sb.append(original.charAt(i));<br />
} else {<br />
sb.append(String.format("\u%04X", Character.codePointAt(original, i)));<br />
}<br />
}<br />
String unicode = sb.toString();<br />
return unicode;<br />
}<br />
||</p>
</blockquote>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14340
2015-03-02T10:03:04+09:00
2015-03-02T10:03:04+09:00
https://crieit.net/posts/cocos2d-js-firefox-LabelTTF
cocos2d-jsにてfirefoxでLabelTTFがずれる
<p>firefoxだとLabelTTFの文字が全部上にずれて上端が切れていて愕然とした。<br />
ただ、WEB版のいいところはjsが完全に独立しているため<br />
どんなに弄ってもAndroidやiPhoneの動作に全く影響を与えない所。</p>
<p>というところで処理を追ってみたところ、<br />
下記のようにオフセットを弄るとそれなりの表示になった。<br />
(修正後、jsがキャッシュされていると反映されないのでうまいことやってください。<br />
動的読み込みなのでしつこいほどキャッシュされます。<br />
自分はパラメータを付けてキャッシュされないようにしてチェックしました)</p>
<p>frameworks/cocos2d-html5/cocos2d/core/labelttf/CCLabelTTFCanvasRenderCmd.js<br />
の234行目あたり。</p>
<blockquote>
<p>|javascript|<br />
if (this._isMultiLine) {<br />
var locStrLen = this._strings.length;<br />
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM)<br />
yOffset = lineHeight - transformTop * 2 + locContentSizeHeight - lineHeight * locStrLen;<br />
else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_CENTER)<br />
yOffset = (lineHeight - transformTop * 2) / 2 + (locContentSizeHeight - lineHeight * locStrLen) / 2;</p>
</blockquote>
<pre><code>for (var i = 0; i < locStrLen; i++) {
var line = this._strings[i];
var tmpOffsetY = -locContentSizeHeight + (lineHeight * i + transformTop) + yOffset;
// ↓ここと、
if (cc.sys.browserType == 'firefox') {
tmpOffsetY += 5;
}
if (locStrokeEnabled)
context.strokeText(line, xOffset, tmpOffsetY);
context.fillText(line, xOffset, tmpOffsetY);
}
</code></pre>
<p>} else {<br />
if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM) {<br />
//do nothing<br />
} else if (locVAlignment === cc.VERTICAL_TEXT_ALIGNMENT_TOP) {<br />
yOffset -= locContentSizeHeight;<br />
} else {<br />
yOffset -= locContentSizeHeight * 0.5;<br />
}<br />
// ↓あとここです。<br />
if (cc.sys.browserType == 'firefox') {<br />
yOffset += 5;<br />
}<br />
if (locStrokeEnabled)<br />
context.strokeText(node._string, xOffset, yOffset);<br />
context.fillText(node._string, xOffset, yOffset);<br />
}<br />
||</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14341
2015-02-28T16:02:25+09:00
2015-02-28T16:02:25+09:00
https://crieit.net/posts/cc-sys-localStorage-getItem
cc.sys.localStorage.getItemのデフォルト値
<p>Windowsだとnullでチェックできたのだが、Androidだと上手く動かなかった。<br />
調べてみるとtypeofがstringなのでどうも空文字らしい。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14342
2015-02-26T09:00:00+09:00
2015-02-26T09:00:00+09:00
https://crieit.net/posts/cocos2d-js-BGM
cocos2d-jsでのBGMの扱い
<p>cocos2d-jsでWEBでプレイする場合はいいのだが、<br />
androidの場合はやはりメモリの圧迫が気になる。</p>
<p>しかしどうもBGMを解放するためのメソッドが見つからない。<br />
effectの方はあるようなのだが。<br />
cocos2d-jsの場合、ライブラリのプログラムを見て無理やり実装しても<br />
WEBでは動作してAndroidでは動作しない、ということがよくあるので<br />
あまり時間をjsを解析しても意味が無い。</p>
<p>cocos2dxのマニュアルを見てみても見つからないし、<br />
勝手にアンロードしてくれるのだろうか、と思いつつcc.audioEngineを見ていたら<br />
cc.audioEngine.stopMusicの引数にBoolean releaseDataという記述を見つけた。<br />
jsのプログラムを見るとどうもリソースを開放しているらしい。</p>
<p>Android側でも正しく動作するかは分からないが、<br />
とりあえずこれで良さそう。</p>
<p>Windowsの場合は最初のプリロードでBGMを全部読み込んで、releaseDataは全部false。<br />
Androidの場合は最初にプリロードしなくても動くので、<br />
遅延なども気にせずplayMusicで同時に読み込ませ、<br />
停止(他のBGMに切り替える)時にreleaseDataを全てtrueで実行する形にした。</p>
<p>(Android側でちゃんとリリースされているかは未検証)</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14343
2015-02-25T09:00:00+09:00
2018-08-24T15:23:09+09:00
https://crieit.net/posts/cocos2d-js-out-of-memory
cocos2d-jsでout of memory
<p>ブラウザで確認しつつ作成したゲームをAndroidで確認したら<br />
どうもOut of memoryエラーが出ているようだった。<br />
位置を確認してみるとどうやらJSON.parseのところで出ているようだった。</p>
<p>楽をするためにデータをjs上に定義せず、<br />
サーバーのDB上でjsonにして取得したものを使用していたのだが、<br />
どうやらこれが300KBくらいになると<br />
JSON.parseではメモリを使いすぎてエラーになってしまうらしい。</p>
<p>可能なところは必要なところで順次取得にして巨大なjsonになるのを防ぎ、<br />
あとは面倒だがサーバーからデータをjs形式でエクスポートできるようにして<br />
直接jsファイルに書き込むようにしたら動くようになった。</p>
<p>あと、JSON.parseは改行が入っているとエラーになる。<br />
なんでだよ…。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14344
2015-02-20T09:00:00+09:00
2015-02-20T09:00:00+09:00
https://crieit.net/posts/cocos2d-js-ccui-ListView
cocos2d-jsのccui.ListViewを使う
<p>cocos2d-jsのccui.ListViewを使う。<br />
これもcocos studioのために使われているクラスで、<br />
要素を追加していくと自動的に並べてフリックでスクロールできるようにしてくれるすごい便利アイテム。</p>
<blockquote>
<p>|javascript|<br />
var list = new ccui.ListView();<br />
list.setDirection(ccui.ScrollView.DIR_VERTICAL);<br />
list.setBounceEnabled(true);<br />
list.setAnchorPoint(cc.p(0, 0));<br />
list.setItemsMargin(4);<br />
list.setContentSize(winSize.width, winSize.height - mainUI.getHeaderHeight());<br />
||</p>
</blockquote>
<p>要素を追加するのは</p>
<blockquote>
<p>|javascript|<br />
list.pushBackCustomItem(text);<br />
||</p>
</blockquote>
<p>pushBackCustomItemには、LabelTTFとかは使えない。<br />
同じくcocos studioの例えばccui.Textやccui.Buttonとかなら大丈夫。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14345
2015-02-06T16:02:23+09:00
2018-09-20T17:56:05+09:00
https://crieit.net/posts/cocos2d-js-PageView
cocos2d-jsのPageView
<p>cocos2d-jsにはccui.PageViewというものがある。<br />
Cocos stuidoでも追加できる、フリックでページ切り替えができるとても便利な要素。</p>
<p>ページの追加</p>
<blockquote>
<p>|javascript|<br />
view.addPage(ui);<br />
||</p>
</blockquote>
<p>ページの移動</p>
<blockquote>
<p>|javascript|<br />
view.scrollToPage(0);<br />
||</p>
</blockquote>
<p>のような感じで操作できる。<br />
イベントハンドラもあるのだが、ドキュメントを見ると<br />
addEventListener<br />
addEventListenerPageView<br />
の2つがある。</p>
<p>いろいろ試してみると、両方同じ様に使うことができるのだが、<br />
どうもaddEventListenerPageViewはAndroidではエラーになる。<br />
そのためどっちもで動かしたい場合はaddEventListenerを使う。</p>
<blockquote>
<p>|javascript|<br />
view.addEventListener(this.onPageViewEvent, this);<br />
||</p>
<p>|javascript|<br />
onPageViewEvent: function(layout, type) {<br />
if (type == ccui.PageView.EVENT_TURNING) {<br />
var page = layout.getCurPageIndex();<br />
}<br />
}<br />
||</p>
</blockquote>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14346
2015-02-06T15:02:41+09:00
2018-10-30T12:18:27+09:00
https://crieit.net/posts/cocos2d-js-ccui-Button
cocos2d-jsでccui.Buttonを使う
<p>cocos2d-jsでccui.Buttonを使った。<br />
これは何かというと、Cocos Studioで配置したボタンのために使われるクラス。<br />
それをそのまま使ってしまう方法。</p>
<p>なぜそのような方法を使うかというと、<br />
通常ボタンを使うためにはMenuItemを使うのだが、<br />
タップを有効化することを考えるとScrollViewに入れる際に<br />
どういった処理を書けばいいかわからない(調べるのも面倒)。<br />
そのため、addTouchEventListenerでできてしまう<br />
このクラスを使うと非常にプログラムが簡単になる。</p>
<blockquote>
<p>|javascript|<br />
var button = ccui.Button.create();<br />
button.setTouchEnabled(true);<br />
button.setScale9Enabled(true);<br />
button.loadTextures('image.png', null, null);<br />
button.setSize(cc.size(160, 150));<br />
button.addTouchEventListener(this.onClick, this);<br />
this.addChild(button);<br />
||</p>
</blockquote>
<p>setScale9EnabledとsetSizeでScale9も勝手にいい感じにしてくれた。</p>
<p>そもそも、本来であればCocos studioで作ったUIをそのまま使えばいいのだが、<br />
なぜ今回ボタンのクラスを直接使おうかと思ったかというと<br />
ボタンのみのUIだったのだがそれだけでも数十個画面上に追加すると<br />
UIの作成の合計時間がかなり増えて画面が一瞬固まったようになってしまった。<br />
(計測したら完全にUI作成の部分だけで時間がかかっていた)</p>
<p>大量に同じUIを配置するところはjsonをそのまま使わず<br />
プログラムで書いた方が良さげ。<br />
(ただし、時間は短縮できるが、やはりそれなりに時間はかかる)</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14347
2015-02-06T11:02:05+09:00
2015-02-06T11:02:05+09:00
https://crieit.net/posts/cocos2d-js-android
cocos2d-jsにてandroidでサウンドの再生
<p>cocos2d-jsのプロジェクトにBGM等を対応したのだが、<br />
どうもまたリソースのパスの扱いが画像など違うみたいで上手く再生されなかった。</p>
<p>Windowsの場合</p>
<p>・preloadは画像と同じで良い<br />
・再生時はダメ。cc.loader.resPathを自分で付加しなければならない。</p>
<p>Androidの場合</p>
<p>・プログラム上は上記のWindowsと同じで良い。<br />
・proj.androidのサウンドファイルの位置は、画像と違ってassetsの直下ではなく<br />
assetsの下にcc.loader.resPathのフォルダを作って配置しなければならない。</p>
<p>挙動揃えてくれよ…。<br />
(外国人ならここでpull requestを出すのだろう)</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14348
2015-02-04T12:02:24+09:00
2015-02-04T12:02:24+09:00
https://crieit.net/posts/cocos2d-js-ScrollView
cocos2d-jsのScrollViewをマウスホイールでスクロール
<p>cc.ScrollViewをWindowsの場合はマウスホイールでスクロールさせた方がいいと思うが、<br />
存在するメソッドはscrollToPercentVerticalという絶対位置指定だけなので、<br />
残念ながら現在希望を満たす機能は無い。</p>
<p>Windowsだけであれば他の端末の動作に影響などもないので、<br />
適当にプログラムを書けるため下記のような形で実現は可能。<br />
(list = ccui.ScrollView)</p>
<blockquote>
<p>|javascript|<br />
if (cc.sys.os == 'Windows') {<br />
var event = new cc._EventListenerMouse();<br />
event.onMouseScroll = function(event) {<br />
var minY = list._contentSize.height - list._innerContainer.getContentSize().height;<br />
var h = -minY;<br />
var current = list._innerContainer.getPositionY() - event.getScrollY();<br />
var per = (current - minY) * 100 / h;<br />
list.scrollToPercentVertical(per, 0.1, true);<br />
};<br />
cc.eventManager.addListener(event, this);<br />
}<br />
||</p>
</blockquote>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14349
2015-01-26T17:01:14+09:00
2015-01-26T17:01:14+09:00
https://crieit.net/posts/cocos2d-js-javascript
cocos2d-jsでjavascriptファイルだけをコンパイルする
<p>cocos2dx-jsでAndroidにて実機確認をする場合、<br />
jsをjscにコンパイルする必要があるのだが、<br />
cocos compileで全部コンパイルすると時間もかかるし<br />
eclipseのプロジェクトのライブラリプロジェクト等の更新をして<br />
参照解決などもしなくてはいけないしいちいち面倒。</p>
<p>なんとかjsファイルだけをコンパイルする方法がないかと調べてみるとあった。<br />
cocos jscompile -s src -d frameworks/runtime-src/proj.android/assets/src<br />
バッチファイルにでもしとくと良いと思う。</p>
<p>cocos compileで生成されるファイルのサイズとなんか違う気がするが<br />
問題なく動いているので大丈夫そう。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14350
2015-01-25T20:01:56+09:00
2018-08-21T15:10:17+09:00
https://crieit.net/posts/cocos2d-js-Android-java-javascript
cocos2d-jsのAndroidでjavaからjavascriptを呼び出す
<p>マニュアルを見ると、javascriptからjavaを呼び出す説明ページの一番下に<br />
さらっと当たり前のように逆の方法もできますよ、ということが書かれているが、<br />
実際やろうとするとそのクラス名が解決できないと言われる。</p>
<p>使いたければ手動で設定しろという感じのようなので、<br />
frameworks\js-bindings\bindings\manual\platform\android\java\src\org\cocos2dx\lib<br />
の<br />
Cocos2dxJavascriptJavaBridge.java<br />
をlibcocos2dxのプロジェクトに入れておけば良い。</p>
<p>ちなみにテストでrunsceneを行ってみるとエラーになった。<br />
ほかは大丈夫そうだがダメなパターンもありそうな感じがする。<br />
多分マニュアルの通りちゃんとrunOnGLThreadで実行すれば大丈夫だと思う。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14352
2015-01-19T18:01:24+09:00
2018-10-10T13:09:55+09:00
https://crieit.net/posts/cocos2d-js
cocos2d-jsのアクションのエフェクトを初期化する
<p>cocos2dxにはNodeGridを使うことで色々なエフェクトをかけられるエフェクトがある。<br />
それとフェードを合わせて非表示にして、再度表示して使いまわそうとしたら<br />
エフェクトがかかって表示が崩れている状態のままだった。</p>
<p>cc.StopGridのアクションを使うことで表示をもとに戻すことができた。</p>
だら@Crieit開発者
tag:crieit.net,2005:PublicArticle/14353
2015-01-11T10:01:44+09:00
2015-01-11T10:01:44+09:00
https://crieit.net/posts/cocos2d-js-google
cocos2d-js用のデータをgoogleスプレッドシートで管理する
<p>別にエクセルで管理してcocos studioで出力したjsonでも良いのだが、<br />
cocos2dx-jsはhtml5用としても作成できるため、<br />
その場合jsonファイルが個々のファイルとしてリソースになってしまい、<br />
メインの圧縮されたjsに組み込まれず<br />
jsonファイルの分だけサーバーにリクエストが行ってしまう。</p>
<p>しょぼいサーバーで運用したい場合などはあまりリクエストも来てほしくないため、<br />
なるべく全てのデータをjsファイルとしてまとめて欲しい。</p>
<p>そのためデータをgoogleのスプレッドシートで管理し、<br />
jsファイルとして出力できるスクリプトを作成した。</p>
<p>最初にindexというシートを作成し、<br />
A1に変数名のプレフィックス<br />
(例えばDataというクラスにデータを保存したいのであれば「Data.」)<br />
A2は「名前」というテーブルタイトルにしたので<br />
A3からデータ名を縦に羅列していく。<br />
(簡単にするためデータ名=シート名=変数名として扱う)</p>
<p>itemsというデータを作成したい場合、itemsというシートを作成。<br />
1行目は項目名にし、2行目からデータを並べていく。</p>
<p>あとはメニューに「まくろ」というメニューが追加されているので<br />
そちらで実行すればjsonが画面上に表示される。<br />
それをプロジェクトのjsを直接開いて更新する。</p>
<p>ファイルとして保存することも考えたがローカルじゃないので<br />
ダウンロード時もファイル名が変わったりする場合があって面倒だし<br />
これが一番早いかなと思った。</p>
<blockquote>
<p>|javascript|<br />
var SHEET_NAME = 'index';<br />
var jsonString = '';</p>
</blockquote>
<p>function onOpen(event){<br />
var menuitems = [<br />
{name:'jsエクスポート', functionName:'main'}<br />
];<br />
var sheet = SpreadsheetApp.getActiveSpreadsheet();<br />
sheet.addMenu('まくろ', menuitems);<br />
}</p>
<p>function main() {<br />
var book = SpreadsheetApp.getActiveSpreadsheet();<br />
var sheet = book.getSheetByName(SHEET_NAME);<br />
var tableName = 'start';<br />
var tables = {};<br />
var prefix = sheet.getRange('A1').getValue();<br />
var line = 3;<br />
while (tableName != '') {<br />
var range = sheet.getRange('A' + line++);<br />
tableName = range.getValue();<br />
if (tableName != '') {<br />
tables[tableName] = [];<br />
}<br />
}</p>
<p>var js = '';<br />
for (var tableName in tables) {<br />
var sheet = book.getSheetByName(tableName);<br />
var json = convertSheet2JsonText(sheet);<br />
js += prefix + tableName + ' = ' + JSON.stringify(json) + ";\n";<br />
}<br />
jsonString = js;<br />
var sheet = SpreadsheetApp.getActiveSpreadsheet();<br />
var tag = '<textarea rows="20" style="width:90%;">' + js + '</textarea>';<br />
sheet.show(HtmlService.createHtmlOutput(tag));<br />
}</p>
<p>function getResult() {<br />
return jsonString;<br />
}</p>
<p>function convertSheet2JsonText(sheet) {<br />
var data = sheet.getDataRange().getValues();<br />
var lastRow = sheet.getLastRow();<br />
var lastColumn = sheet.getLastColumn();</p>
<p>var fields = [];<br />
for (var i = 0; i < lastColumn; i++) {<br />
fields.push(data[0][i]);<br />
}</p>
<p>var json = [];<br />
for (var i = 1; i < lastRow; i++) {<br />
var row = {};<br />
for (var j = 0; j < lastColumn; j++) {<br />
row[fields[j]] = data[i][j];<br />
}<br />
json.push(row);<br />
}<br />
return json;<br />
}<br />
||</p>
だら@Crieit開発者