HTML5 を使ったシンプルな 2 D ゲームの作り方(効果音を鳴らす)

このシリーズまだやってたの!?、と声が聞こえてきそうなくらい前回から間が空いてしまいましたが約半年ぶりに HTML5 を使用したシンプルな 2D ゲームの作り方の第 10  回めをお送りします。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成) HTML5 を使ったシンプルな 2…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方(スプライトを使った画像の切り替え)

前回に引き続き HTML5 を使用したシンプルな 2D ゲームの作り方の第 9  回めをお送りします。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成) HTML5 を使ったシンプルな 2…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (ランダムな動作と FPS の制御)

前回から 1 つ飛んでしまいましたが、HTML5 を使用したシンプルな 2D ゲームの作り方の第 8 回めをお送りします。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成) このシリーズの前回となる第 7…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成)

ずいぶんと間があいてしまいましたが、HTML5 を使用したシンプルな 2D ゲームの作り方の第 7 回めをお送りしたいと思います。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) このシリーズの前回となる第 6 回めの記事では、落ちてくる雪の結晶と雪だるまのあたり判定について紹介しました。 今回は落ちて来る雪の結晶を増やす方法と、それら生成された複数の雪の結晶の実態 (インスタンス) を制御する方法について紹介します。 これらについて理解するには段階的に以下のことを理解していく必要があります。 クラスの定義 インスタンスの生成 インスタンスの制御…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) 前回の記事では雪だるまをキーボードの矢印 (カーソル) キーで操作する機能を実装しました。 今回の記事では、降ってきた雪の結晶と雪だるまが当たったかどうか判断する処理を実装します。 当たり判定 「当たり判定」とは、文字どおりゲームにおいてキャラクター同士が衝突したかどうかを判断するもので、シューティングゲームのような、ユーザーがゲーム内のキャラクターを操作するタイプのゲームでは不可欠なものです。 当たり判定の方法はいろいろあり、形状が複雑なものに対し厳密に行おうとすると非常に大変です。また、実際のそこまでは必要がないということもあります。例えば、以下の図のアミカケの部分は、当たり判定をする単純な 3 つのパターンを示してしますが、X と Y の値で判断できる 1 や…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできまるので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) 前回の記事では Canvas に表示した画像にアニメーションを実装しましたが、今回はこれをキーボードの矢印キー (カーソルキー) と、画面のタッチでコントロールできるようにしたいと思います。具体的には雪だるまの画像を左右に動かす機能です。 なお、タッチによるコントロールは、モニターがタッチ対応のものでないと使用できませんのでご注意ください。   デバイスからのイベントの取得 キーボードや、タッチ対応の画面などからの入力を取得するには、それを受け取るためのイベントハンドラーを実装する必要があります。 キーボードのキーについてのアクションは kdown、keyup 等のイベントで、タッチは touchstart、touchend 等のイベントで取得することができるので、これらを使用してイベントハンドラーを定義していきます。   キーイベントの取得と判断 キーボードのキーを押下した際のアクションは、keydown イベントで取得することができますが、押されたキーを判断し、必要なキーのアクションを必要な処理に割り当てる必要があります。押されたキーを示すキーコードは、以下のようにイベントハンドラに渡された引数の which プロパティで取得できるので、これを使用して押されたキーの種別を判断することができます。…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできまるので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) 今回の記事では、前回の記事で Canvas に表示した画像を動くようにしていきます。   Canvas のアニメーション Canvas でのアニメーションは、描画したオブジェクトのプロパティに現在位置と移動先の位置、時間あたりの移動量を指定で云々….というものではなく、もっと原始的な、わかりやすくいうとパラパラ漫画のようなものです。 描画要素をオブジェクトとして扱える SVG とは違い Canvas で描画された画像は、単なるビットマップ (絵) なので描画された要素を個別に指定することはできません。つまり、Canvas 上に UFO を描画した場合、表示の済んだ UFO をオブジェクトとして指定することはできません。たとえその UFO がアダムスキー型であろうが葉巻型であろうが、はたまたオーソドックスな円盤型であろうが、それだけを選択することはできないのです。なぜならそれは Canvas 上にビットマップで書かれた模様に過ぎないからです。 ではどのようにしてアニメーションを実現するのかというと、Canvas 全体を描画してはクリアし描き換えていくという方法で実現します。…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード)

2 回前の記事から、去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) さて、前回は Visual Studio 2013 でのプロジェクトの作成と必要なファイルの追加方法などを説明しましたが、3 回目となる今回は、いよいよ HTML タグと JavaScript コードを記述していきます。 Visual Studio でのプロジェクトの作成やファイルの追加、ゲームで使用する画像の入手が済んでいない方は、2 回目の記事の内容に従い準備を行ってください。   Canvas のタグの記述 実際のゲームを描画して動かすための Canvas タグを body 内に記述します。 Visual Studio ではコードスニペットという機能により canvas とタイプし、キーボードの [Tab] キーを押下するだけで canvas タグが追加されます。 続けて属性を追加します。以下の各属性を設定してください。 属性 値…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編)

前回の記事で書いたとおり、昨年末に shcoo (スクー) さんの授業に出演したさいにデモに使用したコードをもとに、HTML5 を使用したシンプルな 2D ゲームの作成方法について紹介していきます。 実際にどのようなゲームを作るのか、は以下の記事で紹介していますのでぜひご覧ください。実際に動かして遊べますよ。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序)   コーディングに使用する環境 今回はから実際にコードの記述を開始します。作業は Visual Studio 2013 で行うことを前提としていますので、以下の記事を参考に Visual Studio 2013 をセットアップしておいてください。 Web 製作者のための Visual Studio Community 2013 インストールガイド   Mac をお使いの方 また、Visual 以下を参考に Mac 上に Windows 環境を構築することができます。 Mac への Windows および開発者ツールのインストール 上記の手順では Windows OS のインストールイメージが必要になりますが、以下から Windows 8.1 の評価版が Windows 8.1 Enterprise 評価版のダウンロード…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方(序)

去年の年末に schoo (スクー) さんで「クリスマスに使えるアプリを作ろう!- HTML5を使った、はじめての iOS & Android アプリ開発」という講座(っていうの?) 担当させていただきました。 クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発 from Osamu Monoe   そこでお見せしたゲームのサンプルを作成する際に、ついでに 9 ステップで、ある程度まで動作するゲームを作るハンズオンも一緒に作りました。 年明け前にはブログで公開したいと思っていたのですが、なんやかんやで 5 ヵ月も経ってしまいました。 今回から数回に分けて、HTML5 を使用したシンプルな 2D ゲームの作り方を紹介していきたいと思います。 コンセプトとしては、「シンプルな 2 D ゲームを開発しながら HTML5 の機能を学ぶ」というものなので、JavaScript のゲームエンジンやライブラリは一切使用せず、すべてのコードを自らのコーディングでまかなっていきます。 こう書くと、むつかしそうですが、実際やってみるとある程度のところまではずいぶんと簡単に作れるということがご理解いただけるでしょう。 なお、「HTML5 の機能」という性質上、Internet Explorer 9 などの HTML5 機能の実装の足らない、もしくは Internet Explorer 8 のように HTML5 をサポートしていない古い Web ブラウザーでは動作しませんのであしからずご了承ください。…

5