Mac
『ListView』は、複数のオブジェクトをスクロール付きのリストとして表示することが出来るオブジェクトです。今回は、『ListView』を使って下図のようなステージ選択画面を作成しました。 『Cocos Studio 2』でオブジェクトの配置とプロパティの設定等を行い…
Blenderで2Dのロゴがきらっと光るアニメーションを作成します。 全てをBlenderで作るのではなくて、読み込んだ2Dのロゴ画像を加工して光るアニメーションを作成します。 2D画像に光る効果を追加できる無料ソフトが見つからず、ふとBlenderで出来ないかなと思…
bmGlyphはビットマップフォントの作成ソフトです。 複数の文字にまとめて、グラデーション、縁取り線、影付け等の効果を加えることが出来ます。 作成したフォントはCocos2d-x等のビットマップフォント用のラベルで使用できます。 またロゴ用に画像として出力…
下記の記事の続きです。 mmorley.hatenablog.com その１で作成したInkscapeのファイルをBlenderにインポートして下図のように加工します。 飾り枠を立体化し、面部分と組み合わせています。
今まではBlenderだけでパネルを作成したのですが、今度はInkscapeとBlenderで連携してパネルを作成します。 私がまだBlenderに慣れてないせいかもしれませんが、2Dの形状はInkscapeのほうが作りやすいです。 今回はInkscapeで、下図の形状を作成します。 上…
今回はこんな感じの縁付のパネルを作ります。 形状の作り方はほとんど下記の記事と同じパターンです。 mmorley.hatenablog.com 円をパネルの外周に沿ってぐるっと掃引して形状を作成しました。 また2Dに馴染むように、トゥーンレンダリングを使用し、輪郭線…
今回は、下記の記事の続きです。 mmorley.hatenablog.com ＜今回やること！＞ 作成した形状に材質（色等）を設定します。 カメラの位置を設定します。 照明の種類と位置を設定します。 背景を透過設定して、画像を出力します。 『その１』の記事で形状を作成…
＜今回やること！＞ Blenderで、立体的なパネルの画像を作成します。アプリのUI等に使用できます。 Inkscapeでも、このようなパネルを作成することが出来ますが、複雑な形状を立体的に作るのは難しいです。 Blenderであれば、もっと複雑な形状も作成すること…
＜今回やること！＞ Blenderの3Dビューの設定と操作の方法を説明します。 3Dビューは、オブジェクトの配置や編集をする場所です。 Blenderでは、制作がしやすいように頻繁に視点を切り替えます。頻度が多いのでキーボードのショートカットで進展の切り替えを…
Cocosの公式サイトを見たら、CocosのバージョンがV2.3.3に、そしてCocos2d-xのバージョンがV3.9に上がっていました。 １つ前のバージョンは、私の環境では『Cocos Code IDE』からのデバッグ実行（Mac OSX シミュレータ）ができず、アップデートを見送ってい…
＜今回やること！＞ BlenderをMacにインストールします。 Blenderの日本語化を行います。 Blenderのレンダリング結果の出力先を設定します。 Blenderの画面です。 Blenderは、無料で使える3DCG作成ソフトです。 Windows、macOS、Linux、FreeBSD版があります…
MacのOSを『Yosemite』から『El Capitan』にアップデートしました。 『El Capitan』がリリースされたのは１０月１日みたいなので１ヶ月とちょっと経過していることになります。 OSを新しくすると何かしら互換性の問題が起きがちなので怖いのですが、セキュリ…
下記の記事の続きです。 公式サイトのチュートリアルをやってみる その１ - タイルマップの作成：Cocos2d-x v3.7（JavaScript） - モーリーのメモ 公式サイトのチュートリアルをやってみる その２ - Cocos Studio 2で画面作成：Cocos2d-x v3.7（JavaScript）…
下記の記事の続きです。 公式サイトのチュートリアルをやってみる その１ - タイルマップの作成：Cocos2d-x v3.7（JavaScript） - モーリーのメモ 今回は画面の作成を行います。 公式サイトのチュートリアルは、画面もすべてコードで作成しているのですが、…
Cocos2d-xはv3.7からCocos2d-JSと統合されたため、このブログでは『Cocos2d-x v3.7（JavaScript）』と書いているのですが、調べ物をすると『Cocos2d-JS』表記の情報が多い状況です。 『Cocos2d-x』公式サイトで『Cocos2d-JS』のチュートリアルを見つけたので…
クリッピングマスクは、画像の見せたい部分だけを自由な形状で切り抜いて表示する機能です。逆に言うと見せたくない部分を透明化して隠すことが出来ます。 切り抜きたい形に色を塗ったマスク画像によって、表示する部分と隠す部分を切り分けます。 アニメー…
物理演算エンジンは、物が落下したり衝突したりしたとき等の動きを、それっぽく作るのを手助けしてくれるツールです。それっぽくと書いたのは、現実の動きは複雑すぎるので、実行する環境の処理能力に合わせて、形状や力等の条件を簡略化されているからです…
『Cocos Studio 2』には画面を作成するために利用できるオブジェクトがいくつか用意されています。 今回はその中の『ProgressBarオブジェクト』と『Sliderオブジェクト』を使用方法について調べました。 『ProgressBarオブジェクト』は進捗状況が全体の何％…
『Cocos Studio 2』には画面を作成するために利用できるオブジェクトがいくつか用意されています。 今回はその中の『CheckBoxオブジェクト』を使用方法について調べました。『CheckBoxオブジェクト』は、タップする度にチェックと非チェックの２つの状態を交…
前回の記事『Cocos Studio 2によるアニメーションの作成 その１：Cocos2d-x v3.7（JavaScript） - モーリーのメモ』の続きです 前回は『Cocos Studio 2』で『HelloCocos』プロジェクトに５つのアニメーションを作成し、『Cocos Code IDE』にパブリッシュする…
今回は『Cocos Studio 2』でアニメーションを作成する方法です。 『Cocos』にはノード（シーン、レイヤー、スプライト等）に、移動・回転・拡大縮小・変形・色や透明度を変化などの効果を加える事が出来る『Actionクラス』が用意されています。これらの効果…
『SneakyInput』というiOSに仮想ジョイパッドを実装するためのソースコードが公開されています。『Cocos2d（Objective-C）』で書かれているのですが、これを『Cocos2d-x v3.7（JavaScript）』で書き直しました。 以下、私が書き直したほうを『SneakyInput-JS…
Macで串刺し検索する無料のツールがないかな？と探したところ、このソフトウェアを見つけました。 串刺し検索とは、複数のテキストファイルをまとめてワード検索する機能です。 実際に使用してみて便利だったので紹介します。
コード補完とは、定義済みの変数名・関数名・定型文等を入力している途中で候補を表示し、選択すると自動で入力してくれる機能のことです。 『Cocos Code IDE』では『コンテンツ・アシスト』という名前です。 大変機能なのですが、Macの場合キーバインド（シ…
『Cocos v2.3.2』が出ていましたので、さっそく試してみました。
『Cocos Studio2』で２つの画面を作成し、『Cocos Code IDE』でシーンごとに『.jsファイル』を作成します。 コードではなく、『Cocos Studio2』によってシーンに組み込んだレイヤー上にあるボタンの扱い方も記載しています。
今まで『Cocos Framework』は『Cocos』を私が導入した時点での最新版の『v3.7.1』を使用していたのですが、『Cocos Store』に前のバージョンの『v3.7』があったのでこちらを試してみました。 『Cocos Store』で少し前は『v3.7.1』も見つからなくなってたので…
『GitHub Pages』とは、『GitHub』が提供するサービスの一つです。 『GitHub』と同様の操作で『JavaScriptを使ったウェブページ』、つまりは『Cocos』で作成した『HTML5パッケージ』を公開することができます。 それでは実際にやってみます。 『GitHub』アカ…
せっかく『Project Language』に『JavaScript』を選択しているので、Cocosプロジェクトの『HTML5パッケージ』を作成に挑戦しました。 うまく作成できれば、Web上でデモ等を公開することができます。
GitHubのサービスを利用することで、ソースコード等の各種データを公開したり、管理したりすることができます。 GitHubを使用するための各種設定を行います。
