Cocos2dというゲームエンジン(フレームワーク)をご存じでしょうか。
この記事では、ゲーム開発初心者向けに「Cocos2d」を解説します。

  • Cocos2dの基礎情報
  • Cocos2dと他ゲームエンジンの違い
  • Cocos2dの種類について
  • Cocos2dの特徴や機能はどんなものがあるのか
  • Cocos2dを使う上で気をつけたいこと
  • Cocos2dのインストール方法
  • Cocos2dの使い方

こういったことを知りたい人に適した内容をご提供します。

Cocos2dに関心がある人はぜひ目を通して見てください。

Cocos2dの基本情報を解説



この項目では、Cocos2dの基本的な情報について取り扱っています。


ゲームエンジン(フレームワーク)

ゲームの開発をおこなう時、全ての仕組みを作成することはもちろん可能です。

しかし、何も枠組みがない状態からゲーム開発をおこなうのはかなりの時間と労力を消耗してしまいます。

そこでゲーム開発者が利用するのが「ゲームエンジン」。その1つが今回クローズアップするCocos2dです。

ゲームエンジンはフレームワークとも呼ばれるもので、これを使うことによってゲーム開発のスピードを驚くほど上昇させることが可能です。


元々はPythonのフレームワーク

cocos2dは元々、Python2Dゲーム用フレームワークとして生まれました。Python言語上で動くフレームワークだったわけです。

しかし、現在では他言語やプラットフォームでも扱えるように派生フレームワークが誕生しています。


種類

上記で説明しましたが、cocos2dには様々な派生フレームワークが存在します。

  • Cocos2d-x
  • Cocos2d-js
  • Cocos2d-X for XNA
  • Cocos2d-html5
  • gocos2d
  • Cocos2d-android
  • Cocos2d for iPhone
  • Cocos3D など

この記事では、「Cocos2d-js」と「cocos2d-x」という2つのフレームワークについてご紹介します。

両者の相違点など詳しいことは「Cocos2d-jsとcocos2d-x」の項目をご覧ください。


Cocos2d-jsとcocos2d-x

PC 男女 フリーランスエンジニア


Cocos2dの派生フレームワークには「Cocos2d-js」と「cocos2d-x」というものがあるということは先述したとおりです。

この項目では、2つについて詳しく解説します。


Cocos2d-js

Cocos2d-jsは名前からわかるとおり、JavaScriptによって動くオープンソースのゲームエンジンです。


cocos2d-x

cocos2d-x2Dゲーム開発向きオープンソースゲームエンジンです。自由度の高さが自慢。


プログラミング言語

Cocos2d-jsはJavaScript、cocos2d-xはC++言語・Lua言語を使ってコードを記述します。

Cocos2d-xはver3.7からWeb系ネイティブも作成可能になりました。


対応OS

どちらのツールも「ブラウザ」「iOS」「Android」に対応しています。


扱いやすさ

どちらも「すごく難しい」ということはありませんが、どちらかといえばJavaScriptで記述するCocos2d-jsのほうが初心者にはおすすめです。

ただし、C++言語の知識がある場合はcocos2d-xを選んでも問題ありません。


向いているゲームの規模

cocos2d-xを使うなら、本格的なゲームを開発することができます。cocos2d-jsの場合は簡単なゲームを作りたいときなどに重宝します。

「アプリケーションゲームのみを作りたい」時はcocos2d-x。「Webゲームを作りたい」時はcocos2d-jsを使う、というように棲み分けると良いでしょう。


Cocos2dとUnity

アメリカ人プログラマー


Cocos2dUnityはモバイルゲームを開発する上で比較検討されることが多いツールです。

この項目では、Cocos2dとUnityの違いについて比べてみました。


向いているゲームの種類

Cocos2dは2Dゲームの開発を得意としているゲームエンジンです。

対するUnityは3Dゲームの開発がメイン。アニメーションやエディタなどを作れたりします。もちろん、2Dゲームを作成することもできます。


価格

Unityには無料版もあります。しかし、無料版を使う場合はUnityロゴがスプラッシュ画面に表示されてしまうのです。

そのため、それが嫌なら有料版を購入する必要があります。

Cocos2dはオープンソースであるため無料で使うことが可能です。


言語

UnityはC#。cocos2dはcocos2d-xならC++、cocos2d-jsならJavaScriptです。

以前、UnityはC#の他にJavaScriptもしくはBooからプログラミング言語を選択可能でした。しかし、今はC#のみ対応となっています。


対応OS

アプリ開発時、対応しているOSは導入するゲームエンジンの選択に大きく影響します。

Cocos2dもUnityも、iOSとAndroidどちらにも対応しているため対応OSについては差がありません。


速度

速度に関しては、Cocos2dが秀でています。C++言語とC#言語では、C++のほうが処理速度などが速い傾向があります。


カスタマイズ

先に述べたようにCocos2dはオープンソースです。

オープンソースというのはソースコードが全て公開されているということ。そのため、ソースコードを確認して自分でカスタマイズすることが可能です。


Cocos2dの特徴①無料

収入


この項目では、cocos2dの特徴についてご紹介します。

記事内で紹介している「cocos2d-x」も「cocos2d-js」も無料で使用することができるのは大きな特徴といえるでしょう。

他ゲームエンジンの場合は有料版が用意されていることもありますが、cocos2dはプラグインに料金がかかることもなく完全無料で使用することが可能です。


Cocos2dの特徴②オープンソース

オフィスのパソコンの前にいるクリエイティブな男性


「Cocos2dの特徴①無料」にも繋がりますが、Cocos2dはオープンソースです。

そのため、「この部分はどんなコードが記述されているのだろう?」と疑問を持った時にもすぐ確かめることができます。


Cocos2dの特徴③自由度が高い



Cocos2dはソースコードが公開されています。

そのため制約もなく(ライセンスによる決まりはありますが)、自分の思うとおりにゲーム開発を進めることが可能です。

必要に応じて仕様を変更できるのはcocos2dの強みだといえます。


Cocos2dの特徴④軽くて速度が速い

スーツ 男性


cocos2dはとても軽量なゲームエンジンです。どんなに良い性能を持つゲームエンジンだとしても、重くてスピードが遅いものだとストレスを感じてしまいます。

プレイするユーザーにも不満が出てくるでしょう。

cocos2dでゲーム開発すれば、その軽さと速度の速さを実感することができます。


Cocos2dの特徴⑤スマホアプリの開発事例が豊富

女性プログラマーを横から撮影した写真


Cocos2d―Cocos2d-xで作られたスマホアプリをプレイしたことがある人も多いのではないでしょうか。

App StoreやGoogle Play内にあるアプリケーションには、Cocos2d-xを使って開発されたタイトルが多く存在します。

Cocos2d-xが様々なスマホアプリに数多く使われているということは、それだけの魅力を備えたツールという証明になります。


Cocos2dができること①スマホゲームが手軽に作れる



ここでは、cocos2dを使ってできることをご紹介します。

cocos2d(x、js)を使えば、スマホゲームを手軽に作れます。

1から自分でコードを書くのではなく、大きな枠組みがある中で自分好みに内容をカスタマイズし、ゲームの開発をすることが可能です。


cocos2dができること②少ないコードで2D表現ができる

HTMLによるWeb開発


cocos2dは全て自分で開発する場合よりも、少ないコード記述で2D表現をおこなうことができます

開発速度をアップさせるためにも、記述しなければならないコード量は少ないほうが良いでしょう。


Cocos2dの注意点①更新頻度が高い

キーボードを打つ男性


あらゆるツールを使う時、メリットだけでなくデメリットや注意すべき点にも目を通しておくと後で行き詰まってしまう可能性が少なくなります。

ここからは、cocos2dを扱う上で注意したいことを解説します。

まずは「更新頻度が高い」ということです。たしかに、バージョンアップするごとに使い勝手は良くなります。

しかし、更新頻度が高いと変更点も多くなる傾向があります。

実際に、Cocos2d-xがver2.xからver3.xのバージョンアップの際にはメソッド名が変更になったりと大幅な変更が生じました。


Cocos2dの注意点②参考になる書籍が少ない


cocos2dと並んで有名なゲームエンジン・Unityなどは参考書籍などが多く出版されています。一方、cocos2dに関する書籍はあまり出版されていません。

その理由として「cocos2dの開発言語がC++だから」ということが考えられます。

C++言語は学習コストが高い言語といわれることが多いため、取っつきにくいツールという印象があるのかもしれません。


Cocos2dのダウンロード・インストール方法

女性 フリーランスエンジニア


ここからは、cocos2dのダウンロード・インストールの方法をご紹介します。

Cocos2d-js」と「cocos2d-x」のどちらもダウンロード・インストール方法を述べていますので、気になるほうをダウンロードしてみてください。


Cocos2d-js

公式サイトから「HTML5 LITE VERSION」をダウンロードしましょう。

ダウンロードが完了したら、zipファイルを解凍します。

解凍し終わったら、ディレクトリに移動します。

  1. cd cocos2d-js-v●●●●/ #●●●●にはバージョン
  2. ./setup.py

上のコードを記述し、cocosのヘルプが出たらセットアップできたということになります。


cocos2d-x

公式サイトから最新verをダウンロードしましょう。

  1. cd cocos2d-x-●●/ #●●はバージョン
  2. ./setup.py


ゲーム開発入門者向け!Cocos2dの使用方法①Cocos2d-js

コンピュータ,macbook,タブレット


ゲーム開発を始めたばかりの人向けに、cocos2d-jsの基本的な使い方についてご紹介します。


文字の変更

インストールしたファイルにある「HelloWorld.html」を開いてみてください。

  1. var label = cc.LabelTTF.create(“Hello World”, “Arial”, 40);

こう記述してある「Hell World」という文字を「SHIFT」に変更します。

  1. var label = cc.LabelTTF.create(“SHIFT”, “Arial”, 40);

これで文字の変更ができました。

ブラウザでアクセスしてみると、「SHIFT」という文字が表示されるはずです。


文字色の変更

次に、文字色の変更をしてみましょう。

  1. var label = cc.LabelTTF.create(“SHIFT”, “Arial”, 40);
  2. label.setPosition(size.width / 2, size.height / 2);
  3. this.addChild(label, 1);

「label~」と「this~」の間に「label.setColor(cc.color(“#カラーコード”));」を挿入します。

  1. var label = cc.LabelTTF.create(“SHIFT”, “Arial”, 40);
  2. label.setPosition(size.width / 2, size.height / 2);
  3. label.setColor(cc.color(“カラーコード”));
  4. this.addChild(label, 1);

上記のコードを追加することで、「SHIFT」の文字色が指定したカラーコードに変更されます。


ロゴ画像を変更してみる

初期状態では、背景に公式ロゴが表示されています。

それを任意の画像に変える方法です。まず、表示したい画像を「HelloWorld.html」が存在するところに配置します。

ここでは仮に「astar.png」という画像を用意したと仮定しましょう。

「HelloWorld.html」を開きます。

  1. cc.LoaderScene.preload([“HelloWorld.png”], function () {
  2. var MyScene = cc.Scene.extend({
  3. onEnter:function () {
  4. this._super();
  5. var size = cc.director.getWinSize();
  6. var sprite = cc.Sprite.create(“<b>frog.png</b>”);
  7. sprite.setPosition(size.width / 2, size.height / 2);

「HelloWorld.png」と記述がある部分を「astar.png」に置き換えます。

  1. cc.LoaderScene.preload([“astar.png”], function () {
  2. var MyScene = cc.Scene.extend({
  3. onEnter:function () {
  4. this._super();
  5. var size = cc.director.getWinSize();
  6. var sprite = cc.Sprite.create(“<b>frog.png</b>”);
  7. sprite.setPosition(size.width / 2, size.height / 2);

これで背景のロゴが任意の画像に変更できました。


ゲーム開発入門者向け!Cocos2dの使用方法②cocos2d-x

エンジニア プログラミング


この項目では、cocos2d-xの基本的な使用方法について述べます。

cocos2d-xでゲーム開発をおこなうのに必要なのは「C++」に対する知識です。

フレームワークであるcocos2d-xがいくらかクッション材となり、開発の難易度が少々下がります。

とはいえ、C++を扱わなければならないことに変わりはありません。

C++についての知識がないもしくは少ない。でもゲーム開発には早く取り掛かりたい。

そんな場合はcocos2d-xではなくcocos2d-jsを使ってみることをおすすめします。

cocos2d-xの使い方については公式サイトにマニュアルが準備されています。

基本概念から3Dの使い方まで網羅しているので、一度目を通してみると良いでしょう。


まとめ

数学を解く女学生


Cocos2dについてゲーム開発初心者でもわかりやすいように説明しましたが、いかがだったでしょうか。

Cocos2dのようなゲームエンジンを利用することで、ゲームを開発するのに要する時間はぐっと短縮できます。

開発スピードが上がる」「自由度が高くクオリティの高いゲームが作れる」「無料で導入可能」などの利点があるCocos2d。

ぜひ導入し、時間をかけなくても良いところは簡略化して重要な箇所に注力してみましょう。

導入を迷っているなら、より簡単な「cocos2d-js」を使ってみることを検討してみてください。