JavaScriptとCanvasでアニメーションとゲーム制作！～描き、動かし、操作する～animation&game～

Description

　本コースに関心を持っていただきありがとうございます。JavaScriptを学んでいる皆さんは、Canvasの存在をご存じだと思いますが、深く学ぶ機会は少ないのではないでしょうか。このコースではCanvas APIを使いこなし、自分のアイデアやイメージを形にするために必須となる要素を学んでいきます。

　図形描画、アニメーション制作、ゲーム制作の三つを柱にした内容となっています。特に注目していただきたいのはそれぞれのボイラープレートです。ボイラープレートとはテンプレートに似た言葉で、様々な場面での使用に耐えうる一群のコードやファイルだと捉えてください。ハンズオン形式でまずはそれらを自ら作るところから開始します。それを元にいくつかの例を制作していくことにより、ボイラープレート自体とプログラムコードの大きな枠組みの理解を深め、オリジナルの創作につながる基礎、土台を構築していきます。

　デザイン、アニメーション、ゲームというキーワードはデータ分析やウェブアプリ制作などの他の分野からは多少距離があるようにに思われるかもしれませんが、図形を描いて動かし、操作することは、アイデアを表現し工夫を積み重ねていくことであり、プログラミングスキルを向上させるために最も効果的なトレーニングのひとつでもあります（本コースの内容は小中学生など初心者へのプログラミング指導、プログラミング的思考を学ぶ教材作りに大いに役立ちます）。

　このコースを学習した後には、例えばよく知られたブロック崩しやスネークゲーム、フラッピーバードなどをオリジナルにコーディングするための基礎力が身に付いているはずです。「Canvas APIを使いこなす」と表現していますが、学習内容をそのままどこかに移植するのではなく、自ら開発していくための基礎力が得られることを意味しています。（注：コース内ではピクセル画やスプライトシート、画像ファイルの使用には触れていません。受講を検討される際には必ずプレビューで内容を事前にご確認下さい）

　ひとつの円を描くことをイメージしてみてください。これはMDN Web Docsを参照すればすぐにできることです。ですが、そこに運動を加え、さらにユーザーの操作に反応させ、と進めていくうちにいつか足踏みしなくてはならない地点に至ると思います。JavaScriptのクラスの使用、ファイルの連携などを学ぶことにより、さらに先へ、つまり使いこなし自らコーディングできる状態に近づくことができます。

　プロパティやメソッドを定義して、それらを適切な場所で実行するためにファイル間でのやりとりが発生します。全体像を把握して、必要なファイルやクラスを分割して作っていくためにはある程度の経験的学習が必要になります。このコースでは描画、アニメーション、ゲームと段階的に内容のレベルを引き上げ、またその過程を繰り返すことで、効果的に学習を進められるよう設計しています。難解な箇所も含まれていると思いますが、整然とした解説を心掛けました。ぜひ、ここからCanvasを始めてみてください。コース完遂後には、悩みながらも楽しく創作する時間を得られるはずです。

　追記：ご質問への回答、説明不足な箇所に対する追加レクチャーの制作など、アフターケアについてはご安心ください。しっかりと対応させていただきます。

What You Will Learn!

• Canvas APIの使用方法
• Javascriptを使ったコーディング
• JavaScriptの各種メソッドの使用方法
• モジュールのインポート・イクスポート
• Canvasへの図形やテキストの描画
• Canvasでのアニメーション作成
• アニメーションフレームの概念
• Canvasでのゲーム作成
• 複数メニューによるゲーム内容の選択
• オブジェクトの運動や衝突判定
• スタート・プレイ・ゲームオーバーの切り替え
• Javascriptのクラスの考え方と実際の使用方法
• クラスを使ったゲームオブジェクトの作成
• クラスインスタンスの生成と削除
• マウスやキーボード入力によるオブジェクトの操作
• 三角比、三角関数の使い方（角度の取得や位相変化の利用など）
• Visual Studio Codeの使用方法（ショートカットやプラグイン）

Who Should Attend!

• Canvas APIの使用方法を学びたい方
• JavaScriptを使って表現の幅を広げたいと考えている方
• JavaScriptを基礎を一通り学んで次のステップをお探しの方
• JavaScriptを使った描画、デザインを学びたい方
• JavaScriptを使ったアニメーションを学びたい方
• JavaScriptでのゲーム作りを学びたい方
• JavaScriptの文法・構文を学びたい方
• JavaScriptのクラスの利用方法を身につけたい方
• デザイン・アニメーション・ゲーム作りでプログラミングの指導を行いたいと考えている方

TAKE THIS COURSE