강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Web Development

Cursor(AI) を使用して PixiJS で作成する 2D グラフィックスとゲーム

2D グラフィックスの独占的な強者 PixiJS の基本を習得し、AI コードエディター Cursor を使用して迅速かつ効率的に開発する方法も学びます。

（4.9）受講レビュー 14件

受講生 192名

難易度 入門

受講期間 無制限

  • studiomeal
pixijs
pixijs
cursor
cursor
webgl
webgl
2d-games
2d-games
Interactive Web
Interactive Web
pixijs
pixijs
cursor
cursor
webgl
webgl
2d-games
2d-games
Interactive Web
Interactive Web

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

김형진

100% 受講後に作成

個人的にPixi.jsの基本概念を学び、それを活用してエフェクトを実装してみる過程が本当に面白かったです。😄 最近Cursorを活用して開発をしているのですが、 今回の講義でCursorを使ってゲームを作りながら 開発でどのように適用できるのかも学ぶことができて良かったですし、 必要なアセットを制作する方法まで教えてくださって有益でした。 説明がとても上手なので概念を簡単に理解でき、 実習過程も楽しかったです！ おかげで早く知識を習得して 面白い作品を作ることができそうです。 良い講義をありがとうございます！🙌

5.0

topcircle

100% 受講後に作成

Pixijsの入門講座ですね。 react-pixijsの使い方も教えていただけるとありがたいです。 第2弾を楽しみにしています！

5.0

GS

58% 受講後に作成

半分くらいまで進みましたが、Pixiを扱ってみたくて講座を探していたところ、こちらを知りました。完全に手探りで始めるより良いですね。後半も楽しみです。

受講後に得られること

  • PixiJS の基本概念

  • AI コード エディター Cursor を活用して開発する

  • ピクセル画像の作成

高性能2Dグラフィックス実装のためのPixiJSと
AI Coding Editor Cursorを一緒に勉強してみてください！

アニメーション、インタラクティブコンテンツ、ゲームなどを開発するのに適した2DグラフィックライブラリであるPixiJSのコアコンセプトを最初にすばやく習得し、AIコーディングツールCursorを活用して目的の動作を効率的に実装するノウハウを学びましょう。

このようなことを学びます。

まず、PixiJSのコアコンセプトだけを勉強してください。

AIを使ってコーディングをしても、迷子にならないように知っておくとよい最小限の知識があります。まず、PixiJSの基本的な概念と機能を学ぶことから始めましょう。 PixiJSはWebGLを利用した高性能2Dグラフィックライブラリで、アニメーション、インタラクティブコンテンツ、ゲームなどを開発するのに適しています。

AIを活用して複雑な機能を素早く実装

AIを使えば、好きな機能をとても素早く実装できます。でも、無駄に頼んだらAIもたくさん迷います。 AIでコーディングを始めるときに知っておくと良いこと、問題が発生したときのより迅速な解決方法などを学びましょう。

Webゲーム用のリソースを自分で作成してください

サンプルゲームに含まれている音声サウンドとピクセルスプライト画像を一緒に作成します。ゲームに必要なリソースを自分で作成する方法を学び、独自のWebゲームを作成しましょう。

受講前の注意

選手の知識と注意事項

  • 変数、関数の概念など、JavaScriptの基礎を知っていなければ円滑な学習が可能です。難しい知識は必要ありません。無料の公開映像で難易度を測ってみてください。


  • 講義で紹介する無料ダウンロードリソースを実際のプロジェクトに活用する際には、正確なライセンスを確認してください（講義資料にも私が直接製作した画像以外にダウンロードした画像は含まれていません）。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 高性能な Web 2D グラフィック表現を実現したいデザイナー、開発者

  • 簡単なウェブゲームを作成したいが、ゲームロジックを自分で作成するのは難しいので躊躇している方

  • AI コーディング エディターを使用して開発を始めたい方

こんにちは
です。

19,662

受講生

1,279

受講レビュー

1,175

回答

5.0

講座評価

11

講座

ソウルでウェブデベロッパー/デザイナーとして働き、済州島を経て…現在はマレーシアのペナンで熱心に開発をしながら、教育コンテンツも制作し、個人事業主としてできる様々な試みや実験を行っています。
ビジュアルインパクトのあるインタラクティブウェブに関心が高く、YouTubeとFacebookの「1分コーディング」でウェブ開発関連の技術を共有しています。

カリキュラム

全体

24件 ∙ (2時間 24分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

14件

4.9

14件の受講レビュー

  • hjux님의 프로필 이미지
    hjux

    受講レビュー 21

    ∙

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    個人的にPixi.jsの基本概念を学び、それを活用してエフェクトを実装してみる過程が本当に面白かったです。😄 最近Cursorを活用して開発をしているのですが、 今回の講義でCursorを使ってゲームを作りながら 開発でどのように適用できるのかも学ぶことができて良かったですし、 必要なアセットを制作する方法まで教えてくださって有益でした。 説明がとても上手なので概念を簡単に理解でき、 実習過程も楽しかったです！ おかげで早く知識を習得して 面白い作品を作ることができそうです。 良い講義をありがとうございます！🙌

    • studiomeal
      知識共有者

      心のこもったレビューありがとうございます、ヒョンジンさん..😭 面白い作業をたくさんしてくださいね！！

  • rje2875734264님의 프로필 이미지
    rje2875734264

    受講レビュー 3

    ∙

    平均評価 5.0

    5

    63% 受講後に作成

    • leehyunseok03016698님의 프로필 이미지
      leehyunseok03016698

      受講レビュー 4

      ∙

      平均評価 5.0

      5

      33% 受講後に作成

      • psguny99392님의 프로필 이미지
        psguny99392

        受講レビュー 3

        ∙

        平均評価 4.3

        5

        100% 受講後に作成

        • witselblue님의 프로필 이미지
          witselblue

          受講レビュー 7

          ∙

          平均評価 4.4

          5

          63% 受講後に作成

          ￥4,183

          studiomealの他の講座

          知識共有者の他の講座を見てみましょう！

          Webアニメーションの新しい標準、Web Animations API

          studiomeal

          ライブラリはオプションですが、Web標準技術は必須です。 Webアニメーションの新しい標準であるWeb Animation APIに、他の人よりも素早く適応し、実務にもすぐに活用してみてください！

          初級

          初級

          Web Animations API, JavaScript, HTML/CSS

          Webアニメーションの新しい標準、Web Animations API

          studiomeal

          Three.jsで始まる3DインタラクティブWeb講義サムネイル

          Three.jsで始まる3DインタラクティブWeb

          studiomeal

          Webで3Dを実装できるJavaScriptライブラリ、three.jsの重要な概念を学び、アプリケーションの例まで作成し、3D Web開発の感覚を学びます。

          初級

          初級

          Interactive Web, Blender, Three.js

          Three.jsで始まる3DインタラクティブWeb講義サムネイル

          Three.jsで始まる3DインタラクティブWeb

          studiomeal

          Three.js を使用して 3D の一人称視点 Web サイトを作成する講義サムネイル

          Three.js を使用して 3D の一人称視点 Web サイトを作成する

          studiomeal

          このレッスンでは、デスクトップとモバイルの両方で動作する一人称 3D Web サイトを作成します。

          初級

          初級

          Three.js, Interactive Web, 3d

          Three.js を使用して 3D の一人称視点 Web サイトを作成する講義サムネイル

          Three.js を使用して 3D の一人称視点 Web サイトを作成する

          studiomeal

          Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

          Three.jsで一人称3Dウェブサイトを作成する

          studiomeal

          デスクトップとモバイルの両方で動作する一人称3Dウェブサイトを作成する講義です。

          初級

          初級

          Interactive Web, Three.js, 3d

          Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

          Three.jsで一人称3Dウェブサイトを作成する

          studiomeal

          BBCインタラクティブページ「コロナ19が変えるオフィスの未来」クローン講義サムネイル

          BBCインタラクティブページ「コロナ19が変えるオフィスの未来」クローン

          studiomeal

          SNSで人気に共有されているBBCの"コロナ19が変える事務所の未来"インタラクティブページのコア機能を同じように作成します。

          初級

          初級

          Interactive Web, Clone Coding

          BBCインタラクティブページ「コロナ19が変えるオフィスの未来」クローン講義サムネイル

          BBCインタラクティブページ「コロナ19が変えるオフィスの未来」クローン

          studiomeal

          アップルのウェブサイトのインタラクションクローン！

          studiomeal

          アップルのウェブサイトによく登場する高度なインタラクション効果を最初から直接開発する方法を学ぶことができます。

          中級以上

          中級以上

          Interactive Web, Clone Coding, JavaScript

          アップルのウェブサイトのインタラクションクローン！

          studiomeal

          CSS FlexとGridを正しく習得する講義サムネイル

          CSS FlexとGridを正しく習得する

          studiomeal

          現在、将来の標準となるCSSレイアウトの作成方法であるFlexとGridについて学ぶことができます。

          初級

          初級

          HTML/CSS, Flex

          CSS FlexとGridを正しく習得する講義サムネイル

          CSS FlexとGridを正しく習得する

          studiomeal

          3Dリーフレットの作成 - インタラクティブWebプロジェクト講義サムネイル

          3Dリーフレットの作成 - インタラクティブWebプロジェクト

          studiomeal

          インタラクティブWebプロジェクトは、CSSとJavaScriptを使って創造的なインタラクションのある例を一つずつ作成するシリーズです。

          中級以上

          中級以上

          HTML/CSS, JavaScript, Interactive Web

          3Dリーフレットの作成 - インタラクティブWebプロジェクト講義サムネイル

          3Dリーフレットの作成 - インタラクティブWebプロジェクト

          studiomeal

          SVGマスター講義サムネイル

          SVGマスター

          studiomeal

          Web Vector Graphics SVGを基礎からしっかり身につけ、楽しく多様な例を通じて、お好みの方向に応用できる技術を習得します。

          初級

          初級

          SVG, HTML/CSS

          SVGマスター講義サムネイル

          SVGマスター

          studiomeal

          インタラクティブWeb開発を正しく開始する講義サムネイル

          インタラクティブWeb開発を正しく開始する

          studiomeal

          クリエイティブ溢れるインタラクティブなウェブページを開発できる基礎を磨くことができる授業です。

          初級

          初級

          HTML/CSS, JavaScript, Interactive Web

          インタラクティブWeb開発を正しく開始する講義サムネイル

          インタラクティブWeb開発を正しく開始する

          studiomeal

          似ている講座

          同じ分野の他の講座を見てみましょう！

          Unity WebGLデジタルツインプロジェクト実践：DWG(Cad) 3D自動変換とリアルタイム空間生成講義サムネイル

          Unity WebGLデジタルツインプロジェクト実践：DWG(Cad) 3D自動変換とリアルタイム空間生成

          ddur

          この講義では、DWG図面をUnityで直接パースし、線(Line)とポリライン(Polyline)を基に実際の3D壁へ自動変換するシステムを構築します。 DWG → 3Dマップ自動生成パイプラインを完成させた後、生成された空間上で各種オブジェクトを自由に配置し、これをJSON/DB形式で保存・読み込みするマップエディター形式の機能も実装します。 最後に実務デジタルツインで必須的に使用されるヒートマップ・状態表示・リアルタイムデータ反映機能まで統合し、産業現場でもすぐに適用可能なデジタルツインプロジェクトを最初から最後まで完成させます。

          中級以上

          中級以上

          C#, Unity, CAD

          Unity WebGLデジタルツインプロジェクト実践：DWG(Cad) 3D自動変換とリアルタイム空間生成講義サムネイル

          Unity WebGLデジタルツインプロジェクト実践：DWG(Cad) 3D自動変換とリアルタイム空間生成

          ddur

          React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発講義サムネイル

          React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発

          taejaehan

          ReactとThree.jsを一度に！3Dの基礎から、実務で使用できるプロジェクト、そして最適化のヒントまで！

          初級

          初級

          Interactive Web, react-three-fiber, Three.js

          React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発講義サムネイル

          React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発

          taejaehan

          Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

          Three.jsで一人称3Dウェブサイトを作成する

          studiomeal

          デスクトップとモバイルの両方で動作する一人称3Dウェブサイトを作成する講義です。

          初級

          初級

          Interactive Web, Three.js, 3d

          Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

          Three.jsで一人称3Dウェブサイトを作成する

          studiomeal

          [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

          [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

          codecamp

          10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

          中級以上

          中級以上

          React, Next.js, cursor

          [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

          [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

          codecamp

          R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る講義サムネイル

          R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る

          taejaehan

          ReactとThree.jsを一度に！インタラクティブウェブの基礎であるVectorからGSAPまで学べます。3つの事例を一つのポートフォリオに統合するコツとノウハウ！

          初級

          初級

          Interactive Web, Three.js, TypeScript

          R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る講義サムネイル

          R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る

          taejaehan

          Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)講義サムネイル

          Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

          gymcoding

          最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

          初級

          初級

          React, Blog, Next.js

          Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)講義サムネイル

          Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

          gymcoding

          Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

          ggangcoding162118

          Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

          初級

          初級

          Interactive Web, JavaScript, HTML/CSS

          Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

          ggangcoding162118

          ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ講義サムネイル

          ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ

          youngcodikimssam

          Bootstrapを使わずに、純粋なhtml/css/jsのみを活用して、デバイス別に多様なレイアウトを実装できるレスポンシブウェブページ作成[2024年最新版]授業の実践制作授業です。

          初級

          初級

          HTML/CSS, Responsive Web, Interactive Web

          ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ講義サムネイル

          ピュアなHTML/CSS/JSのみを活用したレスポンシブウェブ制作【実践編】ブートキャンプ

          youngcodikimssam

          (2026アップデート)CursorとChatGPTで始めるバイブコーディング講義サムネイル

          (2026アップデート)CursorとChatGPTで始めるバイブコーディング

          mindcompass

          開発チームの顔色を伺わず、今度は私が直接作る!この講義は、企画、マーケティング、営業など実務担当者が開発者の助けなしにAIツールを活用してウェブサービスの核心機能を直接実装できるようサポートします。

          初級

          初級

          Python, FastAPI, cursor

          (2026アップデート)CursorとChatGPTで始めるバイブコーディング講義サムネイル

          (2026アップデート)CursorとChatGPTで始めるバイブコーディング

          mindcompass

          [プレミアム] AIと対話しながらWebサービスを作る講義サムネイル

          [プレミアム] AIと対話しながらWebサービスを作る

          codingai

          AIとの対話で3ヶ月で3つのサービスを作りました。 開発者もコーディングも必要なく、AIと一緒に実用的なウェブサービスを構築します。

          入門

          入門

          Google Analytics, Google Sheets, cursor

          [プレミアム] AIと対話しながらWebサービスを作る講義サムネイル

          [プレミアム] AIと対話しながらWebサービスを作る

          codingai

          非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

          dingcodingco

          コーディング知識不要！ あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作成し、すぐにサービスまで連携します。

          入門

          入門

          Flutter, Next.js, cursor

          非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

          dingcodingco