Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
『JavaScriptでクリエイティブコーディング! ゲーム制作編』 デザイン・アート・ゲーム制作のためのp5.js
Rating: 5.0 out of 5(4 ratings)
79 students

『JavaScriptでクリエイティブコーディング! ゲーム制作編』 デザイン・アート・ゲーム制作のためのp5.js

シューティングゲームを徐々にバージョンアップさせながら、実践的なp5.jsの使用方法を学びます。簡潔な記述で多彩な表現のできるp5.jsは「クリエイトする楽しさ」に満ちています。創作を遊びながら学ぶ、そのような楽しい内容のコースです。
Created byKaiki Fukunaga
Last updated 10/2023
Japanese

What you'll learn

  • p5jsを使ったプロジェクトの作成方法
  • p5jsを使った図形や画像の描画
  • p5jsを使ったアニメーション制作
  • p5jsを使った画像ファイル、音声ファイルの扱い方
  • p5jsを使ったマウスやキーボードイベントによるオブジェクトの操作
  • JavaScriptのプログラミング
  • シューティングゲームの作り方

Course content

6 sections47 lectures5h 38m total length
  • コースの概要2:10
  • Live Serverのインストール0:24
  • コースで用いるファイルの一括ダウンロード0:07
  • ファイルとチートシートについて5:38
  • ストレスのないご受講のために0:26
  • Visual Studio Codeのショートカットキーのご紹介2:51

Requirements

  • JavaScriptの基礎知識(変数、アレイ、関数、if条件分岐、forループ程度)の理解は必要となります
  • HTML, CSSの基礎知識
  • もし基礎的内容で躓くようでしたらご遠慮なく何度でも質問をしてください
  • Visual Studio Codeを使用できる環境(他のIDEでも構いませんが、コース内ではVSCodeを使用します)
  • Chromeブラウザを使用できる環境(他のブラウザでも構いませんが、コース内ではChromeを使用します)
  • インターネットへ接続できる環境

Description

◆p5.jsとは?(公式ウェブサイトより)

 p5.js is a JavaScript library for creative coding,

 with a focus on making coding accessible

 and inclusive for artists, designers,

 educators, beginners, and anyone else!


 アーティスト、デザイナー、教育者、初心者、そして誰にでも扱いやすく、また親しみやすいのがこの『p5.js』です。

 筆で絵を描くように、とまではいきませんが、直感的に、また、非常に簡潔な記述で様々な表現を実現することができます。


 本コースに関心を持っていただきありがとうございます!


 本コースで学習する内容は、

JavaScriptライブラリのひとつ、『p5.js』の使用方法です。

 このp5.jsを学ぶ手順としては、線や円、四角形の描画から始めることも間違いではありませんが、

ひとつのプロジェクトを進めながら、楽しみながら学んでいただけるよう、「シューティングゲーム」を題材に採り上げ、様々な関数を駆使した実践的な学びを提供します。


 p5.jsのウェブサイトには「Refference」として、さまざまな関数やイベント処理の方法などが、シンプルな例と共に紹介されています。

 これらをひとつひとつ紹介するだけでも膨大な時間が掛かりますし、また、そうしてしまっては、辞書を頭から読むような、面白みのない単調な講義になってしまいます。


 そこで、しっかりとしたターゲット(シューティングゲーム制作という目的)を定め、その過程で必要なp5.jsの様々を組み込みながら、実践的を中心に据えた解説を行っていきます。


 また、JavaScriptそのものについても、クラスの利用や定石的な記述など、学習の初期段階にある方々を前提にして、丁寧に解説していきます。

 JavaScriptの経験の多少にかかわらない、幅広い層の方々に向けた内容となっています。

(冗長にならないよう、基礎については繰り返しの説明は省略しています)


 p5.jsのRefferenceの内容については、使用頻度が高く重要と思われるものを集約し、チートシートとしてご提供いたします

 コース内に登場するものを別途、あらためてご自身でまとめ直す手間を減らし、また、学習の対象範囲を一目で確認できることで、全体像か把握できないという不安を軽減し、安心して一定のペースで受講を進めてただけます。

 ひとつひとつの道具を、どのような場面で、いかに効果的に使用するかという枠組みに集中して学んでいただきたいと思います。

 気になった時に即座に参照できる道具リスト、それがこのチートシートです。

(チートシートの編集についてはNotionの利用をお勧めしております。そちらを使ってぜひご自身に最適なp5.jsマニュアルを制作してみてください。)


 具体的な最終制作物は横スクロールのシューティングゲームとなります。

 スプライトシートを使ったキャラクターの動きやBGMや衝突の効果音、画面切り替え等のある、それなりにゲームらしいゲームを制作します。

※「それなりに」というのは、どこまでも複雑に完成度を高めていくことはできますが、果てしないため、ある程度で留めていることを意味しています。紹介動画にてゲームの雰囲気を事前に確認いただくことをお勧めいたします。


 背景の表示や、キャラクターの表示、動作、効果音の設定、ゲーム進行のマネージメントなど、ワンステップずつ飛躍することなく順を追ってコードを更新していきます。

 「ゼロから始めて、次々と課題を見つけて解決していったら、最後はこんなものが出来上った」という体験を経ることにより、ゼロから始める制作の流れを身に付け、パーツを組み上げて複雑な創作に仕上げる力

養うことができると思います。


 動きや音が加わり、ゲームが徐々に仕上がっていく過程は、非常にエキサイティングであり、面白く感じていただけると思います。


 本コースではシューティングゲームを題材にしていますが、その中で現れるp5.jsの使用方法を応用することで、さらに幅広く多彩な表現が実現可能となります。

 まずは、本コースでp5.jsがいかにおもしろく使いやすいかを知っていだき、レクチャーを通して直感的に使いこなすための訓練を重ね、今後の活用の第一歩としていただければ幸いです。


 JavaScriptの初歩さえ分っていれば、どなたでも楽しめる内容となっています。

 ご質問にも誠意をもって対応いたします。

 ぜひ、本コースに挑戦してみてください。

Who this course is for:

  • クリエイティブコーディング(ゲーム、デザイン、アニメーション作りなど)に興味のある方
  • JavaScriptを使ったクリエイティブコーディングを学びたい方
  • p5jsの使用方法を学びたい方