プログラミング初心者向けチュートリアルやUnity5やC#の記事を書いています。
CocosCreator 1.xではccモジュールにrandom0To1関数などがあり、標準のMath.randomをラップした関数が複数ありましたが、CocosCreator2.0では廃止されました。
廃止されるものの確認方法ですが、ブラウザーの開発者ツール（デバッグツール）を起動して、アプリを実行すると削除した関数のエラーと、廃止予定の関数を使っていたら警告が表示されます。
CocosCreatorのコンソールには、警告表示等が表示されないので、ブラウザーからでないとこれに気づけません。
https://github.com/cocos-creator/engine/blob/next/cocos2d/deprecated.js
TypeScriptのcreator.d.tsファイルには、すでにcc.random0To1がないため、コード入力時にエラー検知できます。
CocosCreatorの公式チュートリアル「Quick Start：Make your first game」を１日やってみた感想です。大まかには以下のような感じでした。
このゲームは、紫スライムがプレイヤーで、ADキーで左右に移動してスターを取るゲームです。スターは一定時間で消えるので、消えたらゲームオーバーです。
CocosCreatorはUnityの考え方を土台にして作られているのでいくつか共通な概念を確認します。
UnityではGameObjectに画像、音声、スクリプトなどをコンポーネントとして追加する構造です。CocosCreatorでは、Nodeという言葉を使いますが構造は同じでした。
操作もUnityと同じで、アセットからシーンウィンドウに画像をドロップしてSpriteNodeを作れます。
UnityのHierarchyWindowに対応するNodeTreeがあり、そこで右クリックすると、EmptyNodeやSpriteNodeが作れます。これはUnityでいうEmptyGameObjectやSpriteRendererコンポーネントと同じです。
以下は、紫スライムのPlayerNodeのプロパティーです。これはUnityのGameObjectのInspectorWindowと同じで、「Add Component」ボタンでコライダーや、Physicsをコンポーネントとして追加できるのも全く同じです。
Unityでは変数がインスペクターに反映されます。この仕組みがあるのでC#スクリプトにパブリックフィールドを用意してUnityエディターで値を調整できます。CocosCreatorも同じで、スクリプトを作成するとひな型にpropertiesオブジェクトがあるので、ここにプロパティを書いていきます。
UnityユーザーからするとC#と記述は違いますが、やりたいことは一致しているので問題なく書いていけますが、Cocos2d-xユーザーは、この概念を新しく学ぶ必要があって面倒かもしれません。
Playerノードに上記Playerスクリプトを「Add Component」ボタンで追加すると以下のようにPlayerスクリプトがコンポーネントとして追加され、プロパティが表示されます。Unityと全く同じです。
Unityでは現在のシーンでオブジェクトに画像や音声、スクリプトをコンポーネントとして追加し、ProjectウィンドウにドラッグするとPrefab化できます。CocosCreatorでは、NodeTreeウィンドウからAssetsウィンドウにドラッグするとPrefab化できます。
いままで見てきたように、CocosCreatorはUnityを参考に作られているのが分かります。
いくつか機能を比較してきましたがCocosCreatorは、Unityの概念を参考に作られています。そのためCocos2d-xのようなソースコード主体の開発ではなく、オーサリングツールやGUIデザイナーがある開発ツールと同様な開発手法が求められます。音声、画像など各種リソースの設定や配置は、ソースコードで書かれずにツールで設定するようになります。
今までのCocos2d-xと同じだろうと思ってやってみると名前だけが同じなので、全然別物のためUnityユーザーが始めるよりもCocos2d-xユーザーの方が大変かもしれません。
HTML+JavaScript+CSSでWebアプリを開発している感覚で、オートリロードでゲームを再確認できます。かなり軽いためこれは非常に良かったです。
またブラウザーゲームの場合そのままブラウザーの機能を使えるので、例えば音声認識APIなどと連動する場合は、相性が良いと思います。
Unityのような感覚でドキュメントや参考となるプロジェクトを見つけることはできません。また日本語のドキュメントを探すのも難しいです。ですが、DashboardにExample Collectionがあり、これはいろんな機能をシーンで分けて一覧化したプロジェクトです。なのでまずは起動してみるとよいです。簡単なゲームを作る際に必要な情報は手に入ります。
JavaScriptはC#やJavaと異なり、動的型付けなので、以下のような記述はできません。
|
1 2 |
public GameObject myobj; public Text scoreText; |
ソースコード上のプロパティとGUIのインスペクターを連動するために、以下のようにJavaScriptのオブジェクトにtypeプロパティでcc.Prefabのように型を設定して対応しています。
|
1 2 3 4 |
starPrefab: { default: null, type: cc.Prefab }, |
またTypeScriptでプログラミングする場合は、注釈があるため２行ですっきり書けます。class構造もすっきりして入力補完も完全対応なので慣れるとこちらのほうが開発しやすそうです。
|
1 2 |
@property(cc.Label) label: cc.Label = null; |
CocosCreatorとUnityの似ているところをUIやソースコードで確認してみました。
CocosCreatorは動作が軽く、Phaserなどコードベースのライブラリーと比較するとシーン管理、画像やテキストの配置や音声ファイルの設定などがドラッグアンドドロップでできるため、ソースコードが少なくなります。
またJavaScriptのためブラウザー機能と連携する場合は、ブラウザーの機能（音声認識APIなど)を単純に呼び出すだけでよいのでこれも相性が良いです。
ブラウザーゲームとして公開する場合は、瞬時にCanvas起動するのでこれはUnityより良いです。
此処までいくつかメリットを書きましたが、まとめるとWebブラウザーベースのちょっとしたゲームを素早く作りたい。UnityのWebGLのロードが待てない。リソース管理をコードベースで書きたくない。などの理由がある場合はよいツールと感じました。
Unityは、とにかく入門情報が、英語でも日本語でも動画でもgithubのソースコードでも豊富です。初心者向けの入門書もたくさんあり問題が発生しても誰かが解決策をブログで書いていたりします。良いツールですが、広く使ってもらうのは難しいのかもしれません。
Cocos2d-xはPython2.7系のセットアップツールがあるので、setup.pyを実行すると環境変数を設定してくれます。
|
1 |
PS C:\cocos2d-x\cocos2d-x-3.17> python C:\cocos2d-x\cocos2d-x-3.17\setup.py |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
PS C:\cocos2d-x\cocos2d-x-3.17> python C:\cocos2d-x\cocos2d-x-3.17\setup.py Setting up cocos2d-x... ->Check environment variable COCOS_CONSOLE_ROOT ->Search for environment variable COCOS_CONSOLE_ROOT... ->COCOS_CONSOLE_ROOT not found ->Add directory "C:\cocos2d-x\cocos2d-x-3.17\tools\cocos2d-console\bin" into PATH succeed! -> Add COCOS_CONSOLE_ROOT environment variable... ->Added COCOS_CONSOLE_ROOT=C:\cocos2d-x\cocos2d-x-3.17\tools\cocos2d-console\bin ->Check environment variable COCOS_X_ROOT ->Search for environment variable COCOS_X_ROOT... ->COCOS_X_ROOT not found ->Add directory "C:\cocos2d-x" into PATH succeed! -> Add COCOS_X_ROOT environment variable... ->Added COCOS_X_ROOT=C:\cocos2d-x ->Check environment variable COCOS_TEMPLATES_ROOT ->Search for environment variable COCOS_TEMPLATES_ROOT... ->COCOS_TEMPLATES_ROOT not found ->Add directory "C:\cocos2d-x\cocos2d-x-3.17\templates" into PATH succeed! -> Add COCOS_TEMPLATES_ROOT environment variable... ->Added COCOS_TEMPLATES_ROOT=C:\cocos2d-x\cocos2d-x-3.17\templates ->Configuration for Android platform only, you can also skip and manually edit your environment variables ->Check environment variable NDK_ROOT ->Search for environment variable NDK_ROOT... ->NDK_ROOT is found : C:\dev\android-ndk-r13b-windows-x86_64\android-ndk-r13b ->Check environment variable ANDROID_SDK_ROOT ->Search for environment variable ANDROID_SDK_ROOT... ->ANDROID_SDK_ROOT is found : C:\Users\000\AppData\Local\Android\Sdk ->Check environment variable ANT_ROOT ->Search for environment variable ANT_ROOT... ->ANT_ROOT is found : C:\dev\apache-ant-1.9.4\bin Please restart the terminal or restart computer to make added system variables take effect |
プロジェクト作成、カレントディレクトリーにMyGameディレクトリーが作成される。
|
1 |
cocos new MyGame -p com.mycompany.mygame -l cpp |
MyGame\proj.win32\MyGame.sln が用意されるのでこれで開発できます。Cocos2d-xはソースコードとして含まれるので、初回ビルド時は、Cocos2d-Xをビルドするので数分かかります。VisualStudio2017問題なくビルドできました。
.asmファイルが増えるたびにMakefileに、helloworld: helloworld.oなどのように書いていたので書きかたを調べてみました。
あとは、11行目と13行目を用意することで、複数のターゲットに対応してasmファイルをビルドできるようになりました。
NASMを始めたばかりだと、すこしのコードを書くのにも時間が掛かります。sum関数やfactorial関数など、ちょっとした関数やいくつか複合した条件分岐などを作る場合は、まずC言語で実装してそれを逆アセンブルして、コードを入手するのもよい案かもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
* * 階乗のアセンブラを確認するために書いたコード * $ gcc -g factorial.c -o factorial && ./factorial */ #include <stdio.h> int factorial(int n) { return n <= 1 ? 1 : n * factorial(n-1); } int main(int argc, char*argv[]) { int ret = factorial(5); printf("result=%d\n", ret); return 0; } |
|
1 |
gcc -S -masm=intel -fverbose-asm -O1 factorial.c |
-fverbose-asmを追加すると、引数や戻り値のヒントがコメントとして表示されます。もっとコードと比較しながら確認したい場合は、gdbを使ったほうがよいです。
|
1 |
objdump -d -M intel factorial |
|
1 2 3 |
int factorial(int n) { return n <= 1 ? 1 : n * factorial(n-1); } |
以下がgccで逆アセンブルした結果です。コメントで<retval>と引数nが確認できます。またn * factorial(n-1)の部分をimul命令(imul eax, ebx)で行っています。ここまでくればあとは、このコードを解析していけば、自分でNASMのfactorialを作る子ｔができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.text .globl factorial .type factorial, @function factorial: .LFB11: .cfi_startproc mov eax, 1 # <retval>, cmp edi, 1 # n, jle .L8 #, push rbx # .cfi_def_cfa_offset 16 .cfi_offset 3, -16 mov ebx, edi # n, n lea edi, -1[rdi] # tmp91, call factorial # imul eax, ebx # <retval>, n pop rbx # .cfi_restore 3 .cfi_def_cfa_offset 8 .L8: rep ret .cfi_endproc |
簡単なC言語を逆アセンブルするとx64の場合、push rbpから始まります。これはスタックフレームを理解すれば、この意味が分かります。
「スタックセグメントを確認してみる」が初心者にわかりやすいx64版のgdbを使ったスタックフレームの確認方法です。
NASMを見ると関数呼び出しで、必ずpush rbp, mov rbp, rspと書かれているがこれはスタックフレームを新しく用意して、引数やローカル変数をこの後に保持します。また最後にleave命令で、mov esp, ebp; pop ebpとして、呼び出し元関数のスタックフレームを復元します。
|
1 2 3 4 5 6 |
0x00005555555546b0 <+0>: push rbp 0x00005555555546b1 <+1>: mov rbp,rsp 0x00005555555546b4 <+4>: sub rsp,0x20 0x00005555555546f1 <+65>: leave |
スタックフレームを戻す２つのmov,popを１回で行う命令
|
1 2 3 |
;mov esp, ebp ;スタック戻す ;pop ebp ; == leave leave |
アドレス計算して転送する命令(Load Effective Address)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
extern printf section .data fmt: db "x=%d", 0x0A, 0 section .text global main main: mov rdi, fmt mov rsi, 198 xor rax, rax call printf WRT ..plt ; sys_exit mov rax, 60 mov rdi, 1 syscall |
|
1 |
$ nasm -f elf64 pri.asm && gcc pri.o -o pri && ./pri |
call printfでよい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
extern printf section .data fmt: db "x=%d", 0x0A, 0 section .text global main main: mov rdi, fmt mov rsi, 198 xor rax, rax call printf ; sys_exit mov rax, 60 mov rdi, 1 syscall |
gccのオプション-no-pieを付ける
|
1 |
nasm -f elf64 pri.asm && gcc -no-pie pri.o -o pri && ./pri |
nasmのチュートリアル(http://cs.lmu.edu/~ray/notes/nasmtutorial/ )で、C言語のputs関数を呼び出す簡単なプログラムを作りましたが、gccでオブジェクトファイルから実行ファイルを作るときに以下エラーが発生しました。
|
1 2 3 |
$ gcc hola.o /usr/bin/ld: hola.o: relocation R_X86_64_PC32 against symbol `puts@@GLIBC_2.2.5' can not be used when making a shared object。 -fPIC を付けて再コンパイルしてください。 /usr/bin/ld: 最終リンクに失敗しました: 不正な値です |
https://www.nasm.us/xdoc/2.10rc8/html/nasmdoc9.html#section-9.2.5
NASMから外部関数を呼び出す場合は、PLT(procedure linkage table)を使わなければいけないようです。以下のようにWRT ..pltを付けて解決しました。
|
1 2 3 4 5 6 7 8 9 10 |
global main extern puts section .text main: mov rdi, message call puts WRT ..plt ret message: db "Hola, mundo", 0 |
|
1 |
$ nasm -felf64 hola.asm && gcc hola.o && ./a.out |
これでオブジェクトファイルを作成しgccでリンケージして実行できました。