モーリーのメモ

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

モーリーのメモ

『var』と『let』、『==』と『===』の違い:JavaScript

『Cocos Creator』のコードエディタは簡単な構文チェックをしてくれます。 このエディタでコードを書いていると、今まで使っていた『Cocos Code IDE』では何も言われなかった所で警告が出たりします。 今回はこの警告がきっかけで調べた、『var』と『let』、…

JSONファイルの読み込み:Cocos Creator

JSONファイルの読み込みは、『Cocos Studio2』の時とそんなに変わらないだろうと思っていたのですが、意外に苦戦しました。 実質的には、JSONファイルの読み込みに苦戦したというよりはJSONファイルのパスの渡し方に苦戦しました。 まだ、完全に理解した訳で…

2Dキャラクタアニメーションをテスト! その5(完):Cocos Creator

こちらの記事の続きです。 mmorley.hatenablog.com 前回は、歩くアニメーションを作りました。 今回は他にも『走る』、『ジャンプする』等のアニメーションを作って見たいと思います。

2Dキャラクタアニメーションをテスト! その4:Cocos Creator

こちらの記事の続きです。 mmorley.hatenablog.com 前回は、『Cocos Creator』で体のパーツを組み立てました。 各パーツの関節の位置にアンカーポイントを置き、動きや表示順序を考えてパーツ(ノード)の親子関係を作りました。 次は、歩くアニメーションを…

2Dキャラクタアニメーションをテスト! その3:Cocos Creator

こちらの記事の続きです。 mmorley.hatenablog.com 前回は、座標の構成について考えました。 次は、各パーツの親子関係と表示順序を考えながら、『Cocos Creator』で実際に組み立ててみます。

2Dキャラクタアニメーションをテスト! その2:Cocos Creator

こちらの記事の続きです。 mmorley.hatenablog.com 前回は、2Dキャラクタのパーツ構成を考えました。 17個のパーツを動かすとなると、この先面倒くさそうですが、もう少し頑張ります。 次は、これらのパーツを『Cocos Creator』で動かせるように、組み立…

2Dキャラクタのアニメーションを作る! その1:Cocos Creator

アクションゲームでキャラクタが移動する時、キャラクタが静止画のままでは違和感満載です。 歩く、走る、ジャンプする等の状態に応じたアニメーションをキャラクタにさせる必要があります。 ということで、今回はCocos Creatorで2Dのキャラクタのアニメー…

ListViewを作る! その2(完):Cocos Creator

以前、こちらの記事の続きです。 mmorley.hatenablog.com 前回は、『ListView』の外枠の部分を作りました。 今回は、リストの項目を作って『ListView』に追加します。

ListViewを作る! その1:Cocos Creator

以前、Cocos Studio 2を使ってListViewを作成しました。 mmorley.hatenablog.com 今回は、同じものをCocos Creatorで作成します。 Cocos CreatorにはListViewコンポーネントがありません。 ScrollViewコンポーネントをカスタマイズしてListView作成します。

cc.Spriteの属性値について:Cocos Creator

『cc.Sprite』の属性値について調べたことを書きます。 属性値は『Properties』パネルで設定するパラメータです。 マニュアルだと『attribute』と書かれてます。

iframeで、はてなブログ内にWebアプリ(外部サイト)を表示する!

はてなブログの中で、Cocos2d-JSで作成したWebアプリを動かす方法がないかと少し前から方法を調べていたのですが、見つかりました! <iframe>タグを使えば、はてなブログ内に外部サイトが表示出来たんですね。 Webアプリの本体は、『Github Pages』にアップしていま</iframe>…

マニュアルの『アニメーション』を読む! その2(完):Cocos Creator

こちらの記事の続きです。 mmorley.hatenablog.com スクリプトでアニメーションを操作する方法、アニメーションイベントに関する内容です。

マニュアルの『アニメーション』を読む! その1:Cocos Creator

アニメーションを使いたいのですが、使い方がよくわからないので、とりあえずマニュアルを読んでみました。 最新版と同期が取れているのか、若干怪しいのですが、これを読むしかないですし。

仮想ジョイパッドを作る!:Cocos Creator

以前、こちらの記事で『Cocos2d-JS』用に移植していた仮想ジョイパッドを『CocosCreator』で使えるように作り直しました。 mmorley.hatenablog.com 少し中身を整理したので、多少シンプルになりました。 動作の保証はできませんが、もしよければダウンロード…

Version 1.0.1のアップデート情報:Cocos Creator

Version 1.0.1のアップデートが来ていました。 『Auto Update』のウインドウが、一部分しか表示されていなくて『?』でしたが、目一杯広げるとちゃんとダウンロードボタンもありました。

デバッグ環境について:Cocos Creator

『Cocos Creator』単独では、コードエディタに構文チェックがあるぐらいで、プレビューを行ってもあまり詳細なデバッグ情報が得られません。 実行時エラーの場合は、実行画面が止まるだけです。 これではまともにデバッグ出来ず困ってしまいます。 が、ちゃ…

addChild、addComponentについて:Cocos Creator

まだ理解が浅いので、解釈など間違っているかもしれませんが、確認した内容を書きます。 今回は、addChild、addComponentについて。

スクリプトのPropertiesについて:Cocos Creator

まだ理解が浅いので、解釈など間違っているかもしれませんが、確認した内容を書きます。 今回は、スクリプトのPropertiesについて。

はてなブログにメニューバーを付ける!

はてなブログのタイトルの下にメニューバーを表示する方法です。 ブログのヘッダ部分にページのリンクを追加して、デザインCSSでその見た目を設定します。 CSSのコードの設定値が見た目のどの部分に反映されるかについても説明しています。 コード内の数値は…

はてなブログのフォント、見出し等をカスタマイズ!

まだまだ勉強中ですが、ブログ内のいろいろな場所のフォントの種類、フォントのサイズ、行間の高さ、見出しの色等のカスタマイズについて調べたことをまとめました。 カスタマイズするにはコードを書く必要があるのですが、私はブログを『はてな記法』で書い…

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

こちらの記事の続きです。今回でチュートリアル完了です。 mmorley.hatenablog.com 引き続き『Cocos Creator』の『User Manual』にあったチュートリアルの『Create the first game』をやってみます。 今回も、スクリプト(ソースコード)の作成がメインです。…

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

こちらの記事の続きです。 mmorley.hatenablog.com 引き続き『Cocos Creator』の『User Manual』のチュートリアルの『Create the first game』をやってみます。 今回は、スクリプト(ソースコード)の作成がメインです。 アニメーションの設定、キーボード入…

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

『Cocos Creator』の『User Manual』にあるチュートリアル、『Create the first game』をやってみます。 作成するゲームの画面はこんな感じです。 チュートリアルは、空のプロジェクトに必要な素材(画像、音声、ビットマップフォント)が追加されただけの所…

デモプロジェクトをピックアップ!:Cocos Creator

『Cocos Creator』のデモプロジェクトあったので、ドキュメントで紹介されていたものを中心にいくつかピックアップしてみました。 ||

エディタの画面構成と基本的なゲームの作り方を調べる!:Cocos Creator

こちらの記事で、iOS、Web向けのビルドと実行が出来ることを確認しました。 mmorley.hatenablog.com 今回は、『Hello World』プロジェクトを通じて『Cocos Creator』によるゲームの作成方法を調べました。

プロジェクトの実行とビルドを確認する!:Cocos Creator

こちらの記事で、インストールからプロジェクトの作成まで行いました。 mmorley.hatenablog.com 今回は、作成した『Hello World』プロジェクトがちゃんと実行できるのか、そしてiOS向けにビルド出来るのかを確認します。 いろいろ作る前に、そもそもゴールに…

Cocos Creator Version 1.0のインストール

気になっていた『CocosCreator』のVersion 1.0がリリースされていたので早速インストールしてみました。 エディタの画面はこんな感じです。 まずは、インストールからプロジェクトを作成するところまでやってみます。

ボーンの構造を書き出してみる!:Blender

こちらの記事でBVHファイル(モーションキャプチャデータ)を使用しました。 mmorley.hatenablog.com 上図のようなボーンです。 今後の参考にしようと思い、構造を書き出してみました。

BVHファイル(モーションキャプチャデータ)をインポート!:Blender

下記の記事で作成したモデルにBVHファイルのモーションキャプチャデータを適用します。 mmorley.hatenablog.com モーションキャプチャデータは、以前Perfumeが公開していたものを使用します。 上図は、華麗にステップを踏み出した瞬間です。 モデリングはし…

単純な形の人体をモデリング!:Blender

さっそくBVHファイル(モーションキャプチャデータ)を使いたいところですが、なにかしら人体らしきものをモデリングする必要があります。 今回はとりあえずBVHファイルを使ってみたいだけなので、単純な形の人体を作成します。 作る気が失せるような単純な…

モーションキャプチャのデータを探す:Blender

ボーンアニメーションを作ろうと思ったのですが、誰か作ったやつないかなーと探したところ、BVHファイルというモーションキャプチャのデータがあることがわかりました。 Blenderで標準でサポートされています。 ライセンスには注意しないといけないですが、…

Weight Paint(ウェイトペイント)について調べる:Blender

『Weight Paint』は、ボーンの動きに対してオブジェクトの各頂点がどの程度追従して動くか、その影響度合いを設定する機能です。 影響度は色で表されていて、頂点に色を塗って設定します。 私はまだ狙い通りに設定できないので、まずは色の塗り方がどのよう…

倉庫番のようなテキストゲームを作る:Cocos2d-x v3.9(JavaScript)

パソコンのゲームプログラミング入門の『まずはコマンドラインのテキスト表示と、キーボードの操作だけでゲームを作ってみよう!』的なお題をやってみました。 見た目はかなりショボいですが、倉庫番のような動きを実装しています。 キー入力がないので、そ…

SneakyInput-JSを修正しました(『ColoredCircleSprite.js』を削除)

修正内容 下記の記事で作成していた仮想ジョイパッド実装用のモジュール『SneakyInput-JS』の『ColoredCircleSprite.js』に不具合があり、これに関連する部分を削除しました。 その他、ジョイパッドの機能には影響ありません。 mmorley.hatenablog.com

Macでスクリーンショットを取る方法

Macでスクリーンショットを取る方法についてまとめました。 また、通常スクリーンショットにはマウスカーソルが映らないのですが、マウスカーソルを映す方法も説明します。

ガラスのようなマテリアルの設定:Blender

Blenderでブログのヘッダ部分に使用するに画像を作成しました。 材質をガラスっぽくするマテリアルの設定をまとめました。

JSONファイルの読み込み:Cocos2d-x v3.9(JavaScript)

JSON形式のデータファイルを読み込んで、データを使用する方法です。 読み込んだデータが連想配列に変換されるので、簡単に利用できます。

値を保存する方法(Local Storage):Cocos2d-x v3.9(JavaScript)

ユーザー設定値等、アプリを終了しても保持したい値を保存する方法です。 Cocos2d-xのC++版の『CCUserDefault』の代替となるものを探していたのですが、JavaScript版では『cc.sys.localStorage』を使用するようです。

Macの装飾キー(command、option等)の記号表記について

Mac

Macのショートカットの表記に登場する、⌘、⌥、⌃等の記号。 左からcommand、option、controlキーを表しますが、私はなかなか記号とキーが結びつきませんでした。 なので『適当に押して、動いたらオッケー』みたいな感じで使う場合もありましたが、下記のよう…

GarageBandで効果音を作る

GarageBandは今までちゃんと触ったことがなかったのですが、かなり高機能でいろいろなことが出来るみたいです。 ですが、初心者かつ音楽の知識もないので完全に手探り状態です。 ということで今回は手始めとして、正解したときの『ピコーン』という効果音を…

Bfxrでアプリの効果音を作る

アプリで使用する効果音を自作する方法を調べていたら、面白いサイトがありました。 下記の『Bfxr』サイトなのですが、サイト内だけでいわゆるファミコンの音っぽい音が作成できます。 www.bfxr.net *実行にはAdobe - Adobe AIRが必要なようです。私はイン…

Cocos Version 3.10を試してみました

公式サイトで配布されているインストーラから"(BETA)"の文字が消えないので導入を見送っていたのですが、中々更新されないので試しにCocosのVersion 3.10をインストールして試してみました。

Cocos Studio 2 - ListViewの使い方:Cocos2d-x v3.9(JavaScript)

『ListView』は、複数のオブジェクトをスクロール付きのリストとして表示することが出来るオブジェクトです。今回は、『ListView』を使って下図のようなステージ選択画面を作成しました。 『Cocos Studio 2』でオブジェクトの配置とプロパティの設定等を行い…

Blenderで2Dのロゴが光るアニメーションを作る

Blenderで2Dのロゴがきらっと光るアニメーションを作成します。 全てをBlenderで作るのではなくて、読み込んだ2Dのロゴ画像を加工して光るアニメーションを作成します。 2D画像に光る効果を追加できる無料ソフトが見つからず、ふとBlenderで出来ないかなと思…

bmGlyphのヘルプと使い方

bmGlyphはビットマップフォントの作成ソフトです。 複数の文字にまとめて、グラデーション、縁取り線、影付け等の効果を加えることが出来ます。 作成したフォントはCocos2d-x等のビットマップフォント用のラベルで使用できます。 またロゴ用に画像として出力…

BlenderとInkscapeでパネルを作る その2(完) - Blender編

下記の記事の続きです。 mmorley.hatenablog.com その1で作成したInkscapeのファイルをBlenderにインポートして下図のように加工します。 飾り枠を立体化し、面部分と組み合わせています。

BlenderとInkscapeでパネルを作る その1 - Inkscape編

今まではBlenderだけでパネルを作成したのですが、今度はInkscapeとBlenderで連携してパネルを作成します。 私がまだBlenderに慣れてないせいかもしれませんが、2Dの形状はInkscapeのほうが作りやすいです。 今回はInkscapeで、下図の形状を作成します。 上…

Blender(3DCG作成ソフト)で縁付パネルを作る

今回はこんな感じの縁付のパネルを作ります。 形状の作り方はほとんど下記の記事と同じパターンです。 mmorley.hatenablog.com 円をパネルの外周に沿ってぐるっと掃引して形状を作成しました。 また2Dに馴染むように、トゥーンレンダリングを使用し、輪郭線…

Blender(3DCG作成ソフト)でパネルを作る その2(完) - 材質・カメラ・照明・出力の設定

今回は、下記の記事の続きです。 mmorley.hatenablog.com その1では形状を作成しましたが、Blender等の3DCG作成ソフトで画像を作成するには、その他に材質・カメラ・照明等の設定を行う必要があります。 どのような材質に、どのように光を当てて、どのよう…

Blender(3DCG作成ソフト)でパネルを作る その1 - 形状の作成

Blenderでアプリの画面装飾で使うパネルの画像を作成します。 ↓このような厚みを持ったパネルです。ボタンのベースにも使えると思います。 アプリの画面を見栄え良くするのは難しいのですが、単純な形状でも立体感があるだけで、それなりに見えないかなとい…