2019-09-07

顔のモデリングの超詳細手順その２目の周辺を作る！：Blender

Blender

　人型の3Dキャラクターの顔をモデリングします。
　

mmorley.hatenablog.com

　↑の記事の続きです。
　
　今回は、目の周辺を作ります。
　目玉ではなくて、まぶたや目の奥のメッシュを作成します。
　
　それでは作成を開始します！
　
　◆ このシリーズの目次 ◆

　
＊図は、クリックすると拡大表示されます。
＊Macのキー操作で書いています。Windowsの方は以下のように変換して下さい。
　Mac[Window]キー対応：option[alt]、control[ctrl]、command [windows]

2019-09-07

顔のモデリングの超詳細手順その１顔のベース形状を作る！：Blender

Blender

　誰もが一度は作ってみたい人型の3Dキャラクター、その中でも顔のモデリングの方法をまとめました。

　手順を出来るだけ詳細に書いていきます
　ここどうやって作ってるのかな？っという疑問に多少なりとも参考になれば幸いです。
　
　顔の形は複雑なので慣れも必要ですが、なるべく形が崩れにくい方法を選んでいます。

　Blenderを使い始めたばかりの方でも手順を追えば、きっと出来るはずです。
　慣れてくれば見出しと説明画像だけでスイスイ進められるかもしれません。
　
　まだ、Blenderを使ったことない方は、こちらの記事も参考にして下さい。

　
　それでは作成を開始します！
　
　◆ このシリーズの目次 ◆

2019-08-17

ボーンを使って走る2Dアニメーションを作る！：DragonBones

DragonBones

【今回やること！】

DragonBonesを使って、2Dの走るアニメーションを作ります！
作成したアニメーションをGIFファイルで出力します。

　
　素材の画像はInkscapeで描きました。ゲームっぽく2.5頭身キャラです。

　アニメーションにするためにパーツに分けています。

　この作業は少し手間ですが、1コマずつ描くより少ない労力、データサイズでいろいろなモーションが作成出来ます。
　
　今回の作るアニメはこちらです。
　＊gifです。画像をクリックすると動きます。

　
　それでは作成を開始します！

2019-07-31

画像の周りに透明な余白を追加する！：Node.js

Node.js JavaScript

【今回やること！】

Node.jsで、画像処理ライブラリの『Jimp』をインストールします。
画像の周りに余白を追加するプログラムを作成します。
- フォルダ内の複数の画像ファイルを一括処理します。

　
　下記の記事のあとがきで、画像の周りに余白が欲しいという話をしました。

mmorley.hatenablog.com

　
　やりたいのはこんな感じです。

　
　GIMPやIncscape等の画像編集・加工ソフトで出来ますが、画像ファイルの数が多いと面倒なので、Node.jsのプログラムを書いて一括処理できるようにします。
　
　それでは作成します！

2019-07-29

メッシュとボーンで１枚絵からアニメーションを作る！：DragonBones

Cocos Creator DragonBones

【今回やること！】

DragonBonesを使ってアニメーションを作成します。
作成したアニメーションをCocos Creatorで使用します。

　
　DragonBonesは、無料で使える2Dアニメーション作成ツールです。メッシュとボーンを使って、１枚の絵でアニメーションを作成することも出来ます。
　
　今回作成するアニメーションです。＊画像をクリックすると再生します。

　　
　Cocos Creator自体にもアニメーション作成機能はありますが、DragonBonesの方が機能は豊富です。複数の画像からアニメーションを作る際の階層の管理もしやすいです。
　
　Cocos Creatorには、DragonBones用のコンポーネントがあるので、作成したアニメーションを簡単に使用できます。
　
　それでは作成を開始します！

2019-06-15

物理エンジンを使ったシンプルなゲームを作る！その３完成（スクリプトを作成）：Cocos Creator

Cocos Creator

＜今回やること！＞

物理エンジンを使ったシンプルなアクションゲームを作成します。
こちらの記事の続きです。
mmorley.hatenablog.com
その１はこちら
物理エンジンを使ったシンプルなゲームを作る！その１（タイルマップでステージ作成）：Cocos Creator - モーリーのメモ
　
スクリプトを作成します。
スクリプトをコンポーネントとしてノードに追加します。
スクリプトで設定したプロパティにノードやアセットを登録します。
ボタンのクリックイベントを登録します。

　
　今回はスクリプトの作成、つまりプログラミングを行います。
　Cocos CreatorはJavaScriptとTypeScriptの2つの言語が選べますが、TypeScriptを選択しました。TypeScript未経験でも、JavaScript経験者ならすぐに分かると思います。
　TypeScriptについては、下記の記事も御覧ください。

mmorley.hatenablog.com

　それでは作成を開始します！

2019-06-10

物理エンジンを使ったシンプルなゲームを作る！その２（アニメーションとプレハブを作成）：Cocos Creator

Cocos Creator

＜今回やること！＞

物理エンジンを使ったシンプルなアクションゲームを作成します。
こちらの記事の続きです。
mmorley.hatenablog.com
ビジュアルな環境で、プレハブとノードを作成します。
フレームアニメーションを作成します。
アニメーションに終了時に実行する関数名を登録します。
物理エンジンでノードの動きや衝突を計算するために、物理コンポーネントを設定します。
スコア、ベストスコア、ゲームスタート時のカウントダウン用のラベルを配置します。
スタート、再スタート用のボタンを配置します。

　
　それでは作成を開始します！