マニュアルのチュートリアルをやってみる！ その２：Cocos Creator

＜今回やること！＞

• こちらの記事の続きを行います。
  mmorley.hatenablog.com
  
• スクリプト（ソースコード）を書いて、アニメーション、キー入力、ループ処理等を実装します。

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

マニュアルのチュートリアルをやってみる！ その１：Cocos Creator

＜今回やること！＞

• 『Cocos Creator』のチュートリアル（『Create the first game』）をします。

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

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

• mmorley.hatenablog.com
  

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

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

＜今回やること！＞

• Cocos Creatorをインストールします。
  
• VS Code（Microsoft Visual Studio Code）をインストールします。
  
• デバッグ環境を作成します。

　
　この記事を読めば、『Cocos Creator』のゲーム開発環境が構築出来（るはず！）ます。Macで作業していますが、インストール以外はWindows版とほぼ共通です。
　
　まずは『Cocos Creator』を紹介から。
　
　Cocos Creatorは、2Dゲーム開発向けのゲームエンジン（開発環境）です。
　無料で利用出来ます。作成したゲーム・アプリを販売した場合にロイヤリティが発生することもありません。
　Mac版、Windows版があります。
　
　ゲーム作成中の画面はこんな感じです。

　ビジュアルエディタで画面のデザイン、プレビュー、デバッグが可能です。
　
　コードエディタは、VS Code（Microsoft Visual Studio Code）の利用が推奨されています。VS CodeもMac版、Windows版があり、無料で使用出来ます。
　開発に使用するプログラミング言語は、JavaScriptとTypeScriptです。
　
　作成したゲームは、iOS、Andoroid、デスクトップ（Mac、Windows）、Webを始め様々なプラットフォーム向けに出力することが出来ます。

　
　現在は様々なゲームエンジンがあります。それぞれを比較した訳ではなく、あくまで個人的な感覚ですが、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レンダー』で金・銀・銅っぽく見えるマテリアルを設定します。

　
　リアルさは『Cyclesレンダー』が上ですが、レンダリングの速さで『Blenderレンダー』を使っています。
　金・銀・銅は、ベースとなる色が異なるだけで作り方は同じです。

テキストオブジェクトで日本語を使用する！：Blender

この記事の内容

• 日本語のフォントファイルを入手します。
  
• Blenderのテキストオブジェクトで、入手した日本語フォントを使用します。
  
• テキストオブジェクトにオフセット（太・細字化）、ベベル（面取り）、押し出し（立体化）を設定します。

　
　日本語のフォントファイルを入手してからBlenderで立体化するまでの作業を行います。

iMac 2019のスペック・価格を比較する！

＜今回やること！＞

• iMacの気になる点を書き出します。
  
• iMac 2019の各モデルのスペック・価格を比較します。
  
• 同程度のスペックのWindows PCと価格を比較します。

　
　2019年3月19日に新型のiMacが発表されました。

• iMac - Apple（日本）
  

　iMac 2017（2017年6月6日発売）から、CPUやGPU（グラフィック）等の処理系が更新されています。外見や接続ポートに変更はないようです。
　
　ちなみに下記がiMac 2017の仕様です。

• iMac のモデルを識別する - Apple サポート (日本)
  

　
　この記事では、私が欲しいiMacのモデルを中心に、スペック・価格・気になる点をまとめました。
　また、同等スペックのWindows PCに比べて価格が高いかどうか比較します。
　
　なお、いろいろな商品とその価格を掲載していますが、価格は変動しますし最良の選択をしている訳ではないので、参考程度に御覧下さい。

はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！

＜今回やること！＞

• はてなブログにデザインテーマの『Brooklyn』を適用します。
  『Brooklyn』はテーマストアで適用出来ます。＊"ストア"ですが無料です。
  
  
• さらに、CSSを使って見た目をカスタマイズします。

　
　以前、私が使っていた公式テーマは、記事の幅が狭いことが気になっていました。
　Brooklynは記事の幅が広い上に、ブラウザの幅に合わせて記事の幅が変わります。
　また、スマホからでもPCと同じデザインでブログを表示させることが出来ます。
　
　CSS等を使ったカスタマイズでは、下記を始めとした各部の設定を行います。

• タイトル画像の表示幅を変更します。
  
• タイトル下のメニューバーを設置します。
  
• 記事・サイドバーの見出しのデザインを変更します。
  
• ブログのフォントの種類、文字サイズ、行間を変更します。
  等など・・・

　
　以降で、詳しいやり方を紹介します。