モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

チュートリアルのスクリプトをTypeScriptで書く!:Cocos Creator

<今回やること!>

 
 Cocos Creatorは、スクリプトJavaScriptとTypeScriptで書くことが出来ます。
 TypeScriptはJavaScriptから派生したもので、その名が示すように、型(Type)の定義が厳密になっています。

 TypeScriptを使うメリットは、型定義が厳密であるがために、オートコンプリート(コードの自動補完)が確実に使えることです。JavaScriptの場合は値やオブジェクトの代入時に型が決まるので、オートコンプリートが機能しない場合があります。
 そして型が厳密なことで代入ミスなどのケアレスミスが防げます。
 
 TypeScriptに詳しい方からはメリットはまだまだあると言われそうですが、私がTypeScriptを使う1番のメリットは上記の点によりコーディングの効率が上がることです。また、とりあえずJavaScriptからTypeScriptへ書き換える場合には、それほど変更点がないのも良い点です。
 
 以前、Cocos CreatorではCoffeeScriptが使用できましたが、現在は無くなっています。
 ですがTypeScriptは、Microsoftが開発した言語で、エディタのVSCodeMicrosoft製です。Googleの社内標準言語に採用されたとの記事がありましたし、人気のプログラミング言語でも上位に挙げられるので、将来性はありそうです。
 
 TypeScriptのコードは、ファイルごとにまとめて記載します。
 チュートリアルをやってない方は、チュートリアルの記事を御覧ください。

続きを読む

アニメ調の雲を作成する!:Blender

<今回やること!>

  • アニメ調の雲を作成します。
    f:id:mmorley:20190521135749p:plain:w300
 
 写真のようなリアルな雲ではなくて、無作為にモコモコした雲を作成します。
 
 記事中のキー操作については、Windowsの場合は『option』キーを『alt』キーに置き換えて下さい。

続きを読む

マニュアルのチュートリアルをやってみる! その3(完):Cocos Creator

<今回やること!>

  • こちらの記事の続きを行います。
    mmorley.hatenablog.com
  • スコアの表示、ゲームが失敗した時のシーンのリロードや効果音の再生の処理等を追加します。
 
 今回でチュートリアル完了です。

続きを読む

マニュアルのチュートリアルをやってみる! その2:Cocos Creator

<今回やること!>

 
 前回は、ゲームシーンを作成して『Canvas』に背景、地面、キャラクタを配置しました。
 今回は、スクリプトを書いて、ゲームに必要な機能を実装します。

続きを読む

マニュアルのチュートリアルをやってみる! その1:Cocos Creator

<今回やること!>

 
 チュートリアルで作成するゲームの画面です。
 f:id:mmorley:20160405233319p:plain:w300
 
 作成に必要なリソース(画像、音声、ビットマップフォント等の素材)は、あらかじめ用意されています。
 このチュートリアルは、『Cocos Creator』の使い方をゼロから、ざっとひととおり体験するのにおすすめです。

 なお、『Cocos Creator』の開発環境の構築については、こちらの記事で説明しています。

 ゲーム開発に興味がある方はぜひお試してみてね。

続きを読む

Cocos Creatorのインストールからデバッグ環境の作成まで行う!

<今回やること!>


 
 この記事を読めば、『Cocos Creator』のゲーム開発環境が構築出来(るはず!)ます。Macで作業していますが、インストール以外はWindows版とほぼ共通です。
 
 まずは『Cocos Creator』を紹介から。
 
 Cocos Creatorは、2Dゲーム開発向けのゲームエンジン(開発環境)です。
 無料で利用出来ます。作成したゲーム・アプリを販売した場合にロイヤリティが発生することもありません。
 Mac版、Windows版があります。
 
 ゲーム作成中の画面はこんな感じです。
    f:id:mmorley:20190511142654p:plain
 ビジュアルエディタで画面のデザイン、プレビュー、デバッグが可能です。
 
 コードエディタは、VS CodeMicrosoft Visual Studio Code)の利用が推奨されています。VS CodeMac版、Windows版があり、無料で使用出来ます。
 開発に使用するプログラミング言語は、JavaScriptとTypeScriptです。
 
 作成したゲームは、iOS、Andoroid、デスクトップ(MacWindows)、Webを始め様々なプラットフォーム向けに出力することが出来ます。
    f:id:mmorley:20190511175301p:plain
 
 現在は様々なゲームエンジンがあります。それぞれを比較した訳ではなく、あくまで個人的な感覚ですが、Cocos Creatorを使うメリットを挙げてみました。
  • 完全に無料で使える
  • 実行ファイル(パッケージ)のサイズが小さい
  • Web向けに作成したゲームの動作が軽い
  • UI、アニメーション、物理演算等のライブラリが一通りそろっている
  • マニュアル、公式フォーラム、サンプルプロジェクト(各ライブラリのデモ)を参考にできる
  • 古くからあるcocos2d-xの流れを組むので、対応している外部ツールがそれなりにある
    Tiled(タイルマップエディタ)、DragonBones・Spine(2Dのボーンアニメーション)、ParticleDesigner(パーティクル)、bmGlyph(ビットマップフォント)等
  • Cocos Creator自体が現在も定期的に更新されている
  • 様々なプラットフォーム向けにパッケージを出力できる
  • 人気、汎用性の高い、JavaScript、Typescriptが使用できる
  
 作成したゲームのパッケージサイズが小さく、ブラウザ上でも軽快に動くことが特に良い点だと思っています。Githubページ等を利用すれば、はてなブログに載せる事も出来ます。
 
 3D盛り盛りのゲームを作るには他のゲームエンジンに遅れを取るかもしれませんが、2Dのゲームを作るにはCocos Creatorは割と良いのではないでしょうか?
 
 開発環境を構築して『Hello World』プロジェクトを実行するところまでを説明します。

続きを読む

金・銀・銅のようなマテリアルを設定(Blenderレンダー):Blender

<今回やること!>

  • Blenderレンダー』で金・銀・銅っぽく見えるマテリアルを設定します。
    f:id:mmorley:20190416100404p:plain:w180 f:id:mmorley:20190416100220p:plain:w180 f:id:mmorley:20190416100324p:plain:w180
 
 リアルさは『Cyclesレンダー』が上ですが、レンダリングの速さで『Blenderレンダー』を使っています。
 金・銀・銅は、ベースとなる色が異なるだけで作り方は同じです。

続きを読む