モーリーのメモ

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

モーリーのメモ

Cocos Creator

マリオみたいな2Dアクションゲームを作る! その14 ステージ開始前の画面を作る:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その13 ビットマップフォントでスコア等を表示する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その12 ビットマップフォントを作成する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その11 スライム(敵)を作る:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その10 タイルマップでコインを配置する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その9 コインのプレハブ(Prefab)を作成する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その8 カメラワークを設定する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その7 タイルマップでステージを作る:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その6 プレイヤーにアニメーションを追加する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その5 二段ジャンプ、調節ジャンプを追加する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その4 接触イベントで着地判定する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その3 プレイヤーをキー操作する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ ◆ 最初から読みたい場合はココをクリックして下さい。◆ こちらの記事の続きです。 mmorley.ha…

マリオみたいな2Dアクションゲームを作る! その2 物理エンジンを使用する:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆ こちらの記事の続きです。 mmorley.hatenablog.com 今回は、『プレイヤーキャラクター(以下…

マリオみたいな2Dアクションゲームを作る! その1 プロジェクトの作成:Cocos Creator

◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆ 画像等の素材の入手、開発環境のセットアップから開始して、なるべく詳細に手順を載せていきます。 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さ…

メッシュとボーンで1枚絵からアニメーションを作る!:DragonBones

【 今回やること! 】 DragonBonesを使ってアニメーションを作成します。 作成したアニメーションをCocos Creatorで使用します。 DragonBonesは、無料で使える2Dアニメーション作成ツールです。メッシュとボーンを使って、1枚の絵でアニメーションを作成す…

物理エンジンを使ったシンプルなゲームを作る! その3完成(スクリプトを作成):Cocos Creator

<今回やること!> 物理エンジンを使ったシンプルなアクションゲームを作成します。 こちらの記事の続きです。 mmorley.hatenablog.com その1はこちら 物理エンジンを使ったシンプルなゲームを作る! その1(タイルマップでステージ作成):Cocos Creator…

物理エンジンを使ったシンプルなゲームを作る! その2(アニメーションとプレハブを作成):Cocos Creator

<今回やること!> 物理エンジンを使ったシンプルなアクションゲームを作成します。 こちらの記事の続きです。 mmorley.hatenablog.com ビジュアルな環境で、プレハブとノードを作成します。 フレームアニメーションを作成します。 アニメーションに終了時…

物理エンジンを使ったシンプルなゲームを作る! その1(タイルマップでステージ作成):Cocos Creator

<今回やること!> 物理エンジンを使ったシンプルなアクションゲームを作成します。 ゲームに必要な絵、音、フォント等のリソースを入手します。 タイルマップエディタの『Tiled』を使用して、ステージを作成します。 ゲームシーンを作成し、サイズをタイル…

Tiledによるタイルマップの作成とオブジェクトデータの取得を行う!:Cocos Creator

<今回やること!> 『Tiled』マップエディターで、タイルマップを作成します。 見た目の作成だけでなく、オブジェクトの配置も行います。 作成したタイルマップをCocos Creatorで読み込みます。 配置したオブジェクトのデータを読み込みます。 タイルマップ…

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

<今回やること!> こちらの記事でJavaScirptで作成したスクリプトをTypeScriptで書きます。 マニュアルのチュートリアルをやってみる! その1:Cocos Creator - モーリーのメモ マニュアルのチュートリアルをやってみる! その2:Cocos Creator - モーリ…

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

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

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

<今回やること!> こちらの記事の続きを行います。 mmorley.hatenablog.com スクリプト(ソースコード)を書いて、アニメーション、キー入力、ループ処理等を実装します。 前回は、ゲームシーンを作成して『Canvas』に背景、地面、キャラクタを配置しまし…

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

<今回やること!> 『Cocos Creator』のチュートリアル(『Create the first game』)をします。 チュートリアルで作成するゲームの画面です。 作成に必要なリソース(画像、音声、ビットマップフォント等の素材)は、あらかじめ用意されています。 このチ…

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

<今回やること!> Cocos Creatorをインストールします。 VS Code(Microsoft Visual Studio Code)をインストールします。 デバッグ環境を作成します。 この記事を読めば、『Cocos Creator』のゲーム開発環境が構築出来(るはず!)ます。Macで作業してい…

Visual Studio Codeでコード編集&デバッグする!:Cocos Creator

<今回やること!> Cocos CreatorのコードエディタをVisual Studio Code(以下、VSCode)に変更します。 VSCodeでWeb向けのデバッグするための設定を行います。 Cocos Creatorに最初から組み込まれているコードエディタはデバッグ機能がありません。 また、…

Tiledのマップデータから物理空間を作成する!:Cocos Creator

Cocos Creatorは、物理エンジンのChipmunkを使用できます。 物理エンジンとは、物体が落下したり衝突したりした時の動きを計算してくれるものです。 アクションゲーム等を作る際に利用出来ます。 Tiledのマップデータから、アクションゲームのステージを作成…

Tiledのオブジェクトのデータの中身を見る!:Cocos Creator

Tiledについては、こちらの記事で基本的なマップの作り方やオブジェクトデータの取得方法について説明しています。 mmorley.hatenablog.com Tiledでは、下記のオブジェクトを配置出来ます。四角形楕円形ポリゴンポリライン これらをCocos Creatorで読み込ん…

ジョイスティックでキャラクタを動かす!:Cocos Creator

こちらの記事で2Dのキャラクタのアニメーションを作りました。 mmorley.hatenablog.com ↑ではボタンでアニメーションを切り替えていましたが、ゲームらしくするためにジョイスティックでキャラクタを動かせるようにしてみました。

2Dキャラクタを描く! その4(完):Inkscape

こちらの記事の続きです。 2Dゲームで使うキャラクタの絵を描いています。 mmorley.hatenablog.com 前回で、それらしく出来たので、パーツごとに分けて、『Cocos Creator』で動かしたいと思います。

はてなブログでPCとスマホで内容を変更する!

こちらの記事で、Webアプリをはてなブログ内に貼り付けました。 mmorley.hatenablog.com ところが問題発生。 このWebアプリは、Cocos CreatorでWeb Mobile用にビルドしたのでスマホからでも見ることが出来るのですが、問題は表示サイズです。 このブログの記…