クミタテ式ゲームプログラミングドリル(Processing / p5js)

ゲームクリエイターしながら子供向けプログラミング教室の講師をしています。 noteではゲームプログラミング教材を配信しています。 既存のゲームをトレースするのではなく、ゲームクリエイターならではの「ゲームをどう考えるか」という企画の側面にもフォーカスしています。

クミタテ式ゲームプログラミングドリル(Processing / p5js)

ゲームクリエイターしながら子供向けプログラミング教室の講師をしています。 noteではゲームプログラミング教材を配信しています。 既存のゲームをトレースするのではなく、ゲームクリエイターならではの「ゲームをどう考えるか」という企画の側面にもフォーカスしています。

最近の記事

一攫千金!株投資シミュレーションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

-お金を稼ぐのは楽しい今回は株トレードゲームです。どの株が上がるのかを予想しながら投資していきましょう。 ゲームの中の話とはいえ、お金が増えるというのは遊び手を熱くさせる手軽な方法です。 また、今回はゲーム会社の株という世界観にしてみましたが、どんな世界観でも割とマッチする仕組みです。誰が作ってもそれなりに面白くなることが確約されています。あなたオリジナルの世界観でトレードゲームを作ってみてください。 デモアプリはこちらから。https://openprocessing.o

¥100
    • チョコ争奪戦?多人数NPCの乱闘ゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

      -わちゃわちゃ感を楽しもう今回作るのは1人間 + 9NPCのわちゃわちゃ乱闘ゲームです。チョコを奪い合いましょう。 配列を上手に使うことで短いコードで多プレイヤーを用意することができます。たくさんのNPCがいるだけで笑える展開が生まれやすく、ネタゲーに仕上げても、本格乱闘ゲーム仕上げても良さそうです。 デモアプリはこちらから。https://openprocessing.org/sketch/1834108 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5J

      ¥100
      • 汎用性抜群!定番の4択選択クイズゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

        - 定番だからこそ発想次第今回作るのは定番の選択クイズです。 定番だからこそクイズ本来の面白さが重要になってきます。汎用性も高い仕組みですので、ぜひ皆さんのオリジナルクイズを作ってみてください。 なお今回のデモとしては、小競り合いを繰り返す北関東というテーマで僕の偏見でクイズにしてみました。異論は認めます。 デモアプリはこちらから。https://openprocessing.org/sketch/1815008 - クミタテ式プログラミングドリルとは?クミタテ式は英語の

        ¥100
        • 擬似3次元を表現!UFOキャッチャークレーンゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          - キャッチーさが最大の売り今回作るのはUFOキャッチャーです。アームを狙い通りに操作しましょう。 UFOキャッチャーは見た目のキャッチーさ、わかりやすさが売りで、何よりも「嫌いな人がいない」というのが非常に魅力的な題材です。 アームで掴むのは工数がかかるため、今回はスティック状のものでボタンを押すようなゲームに仕上げていきます。 技術的なポイントとしては、擬似的な3次元の表現方法です。2次元でも表現の仕方次第で3次元の奥行きのあるゲームを表現することができます。 デモアプ

          ¥100

        マガジン

        • 無料教材
          55本
        • 有料限定
          9本

        記事

          削って運試し!スクラッチおみくじゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          - ただのおみくじではつまらないあけましておめでとうございます。 新年ということでおみくじが今回のテーマです。 おみくじをシンプルに作るのであれば乱数を発生させて「大吉」「大凶」などを表示させるのが一般的ですが、あまりにもありふれています。 今回は、宝くじのようなスクラッチでおみくじ、という切り口でサンプルゲームを作ってみました。自分で選んだ、自分が削った、自分がアクションした結果というのは、単純にプログラムが吐き出した乱数よりも納得感のあるものになります。 デモアプリはこ

          削って運試し!スクラッチおみくじゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          せまる敵をくぐり抜ける!避けアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          - 三角関数で周期ジャンプを作る今回作るのはジャンプを繰り返す敵を潜り抜けるシンプルなアクションゲームです。 敵は周期的にジャンプを繰り返し迫ってきます。「周期的」なものを作るとき、三角関数は役立ちます。 デモアプリはこちらから。https://openprocessing.org/sketch/1769210 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解(通称、図解くん)を使って解説し、プラモデルのよ

          せまる敵をくぐり抜ける!避けアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          オートセーブで続きから遊べる、長編タップゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          - オートセーブを実装する今回作るのは単純なカウントアップゲームですが、目的はオートセーブの実装にあります。 セーブ機能があることで、前回までのハイスコアを表示したり、長時間のプレイを想定したゲーム作りが可能です。 セーブができるということは成長要素が盛り込めるということです。成長要素はゲームを面白くさせる手っ取り早い方法の1つです。長編放置ゲーや育成ゲームなどにも相性が良いでしょう。 1デモアプリはこちらから。https://open1processing.org/ske

          ¥100

          オートセーブで続きから遊べる、長編タップゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          ひとりぼっちは誰だ!?瞬間的に見分ける、仕分けゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          - 正解をどう作るか今回作るのはペアになっていない、1人ぼっちを探す反射神経ゲームです。 複数のパネルの中で1つだけ正解を作るというゲームルールを作ろうとした結果、ペアになっていないひとりぼっちを探すというゲームルールを思いついたので作ってみました。 技術的にはオリジナル命令を作るポイントがいくつか登場します。関数が苦手な人にもおすすめな教材に落とし込んでみました。 デモアプリはこちらから。https://openprocessing.org/sketch/1679476

          ¥100

          ひとりぼっちは誰だ!?瞬間的に見分ける、仕分けゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          クールなビートを刻め!DJドラムマシンを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -DJ気分でビートを刻もう今回作るのはゲームではなく楽器です。 ドラムマシンと呼ばれる、HipHop DJで使用される電子楽器を製作していきます。 サウンドに関わる技術的なポイントを押さえて、自作ゲームなどにも活かしてみてください。音ゲーを作るヒントにもなります。 なお、今回はProcessing Javaは非対応となっています。 デモアプリはこちらから。https://openprocessing.org/sketch/1708482 - クミタテ式プログラミングドリル

          ¥100

          クールなビートを刻め!DJドラムマシンを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          鬼から逃げろ!鬼ごっこアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -三角関数をマスター今回作るのは鬼ごっこです。 タップのみのシンプル操作で鬼ごっこを擬似体験できるゲームとなっています。 技術的なポイントとしては三角関数です。三角関数は難しく思えますが、コツをつかんでしまえばそれほど難しくありません。この機会に三角関数をマスターしましょう。 デモアプリはこちらから。https://openprocessing.org/sketch/1689685 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5JavaScriptのコード

          ¥100

          鬼から逃げろ!鬼ごっこアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          学びの宝庫!ド定番パズル、マインスイーパーを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -スキルの腕試しに。今回作るのはなんの変哲もないマインスイーパーです。 わざわざ自分が作んでも世の中にたくさんありふれているマインスイーパーですが、あえて自分で作る理由は、技術的な腕試しとしても、学びの題材としてもマインスイーパーは優れているからです。 腕に自信がある人も、そうでない人もぜひこの教材でチャレンジしてみてください。 デモアプリはこちらから。https://openprocessing.org/sketch/1667364 - クミタテ式プログラミングドリルと

          学びの宝庫!ド定番パズル、マインスイーパーを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ハンドル操作でゴールを目指せ!カードライブアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -回転をマスターする今回作るのはカーアクションゲームです。 図形の回転や、sin,cosの三角関数による移動方向の決定など、回転に関わるプログラムが一通り学べる教材になっています。 デモアプリはこちらから。https://openprocessing.org/sketch/1639594 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解(通称、図解くん)を使って解説し、プラモデルのように図解通りにコードを組

          ¥100

          ハンドル操作でゴールを目指せ!カードライブアクションゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          オシャレなグラデーションを作れ!カラーパズルゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -推移的な規則性の発見がパズルの発見今回作るのは色だけのパズルゲームです。グラデーションを成立させればステージクリアとなります。 パズルといえば推移的である数字がよく用いられますが、色のグラデーションも推移的な規則制の元に成り立っています。数字以外の推移的な規則制がないか身の回りを探ってみたら新しいゲーム性の発見があるかも? また、技術的なポイントとしてはRGB色を使ってグラデーションを自動生成する点にも注目してみてください。 デモアプリはこちらから。https://ope

          ¥100

          オシャレなグラデーションを作れ!カラーパズルゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          連打でスピードアップ!白熱レースゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -単純な連打ゲーでも見せ方で活かす今回作るのは連打するだけで加速するシンプルなレースゲームです。 シンプルな連打ゲーでも、見せ方を変えるだけでプレイヤーの気持ちよさを増幅させることができます。 また今回は基本的な配列を使っていますので配列が苦手な初心者にもおすすめな教材となっています。 デモアプリはこちらから。https://openprocessing.org/sketch/1630426 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5JavaScrip

          ¥100

          連打でスピードアップ!白熱レースゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          隠し通路を探し出せ!ダンジョン探索アドベンチャーゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -見せ方を変えればゲームも変わる今回作るのはダンジョン探索アドベンチャーゲームです。 カメラワークにより見える部分が限定されているため、シンプルなマップながら複雑な迷路のような印象を持たせることができます。 単純なマップでも、見せ方を変えればゲーム性を持たせられる好例かなと思います。 デモアプリはこちらから。https://openprocessing.org/sketch/1627352 - クミタテ式プログラミングドリルとは?クミタテ式は英語のp5JavaScript

          ¥100

          隠し通路を探し出せ!ダンジョン探索アドベンチャーゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100

          時間を止めろ!タイムロッカー系弾幕ゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          -アクションゲームなのにターン制今回作るのは弾幕ゲームです。 シューティングの名作タイムロッカーをヒントに、時間を停止(スロー)しながら弾幕を避けてアイテムをGETしていきます。 時間が止まるため、長考型のターン制のようなパズル感覚で楽しめる、アクションゲームが苦手な人でも遊べるゲームに仕上げてみました。 デモアプリはこちらから。https://openprocessing.org/sketch/1620924 (unityroom版:https://unityroom.c

          ¥100

          時間を止めろ!タイムロッカー系弾幕ゲームを作ろう!クミタテ式プログラミングドリル(p5JavaScript / Processing)

          ¥100