初心者の方でも楽しくゲームの作り方やプログラミングを学べる情報を発信中!

enchant.js

ゲームを作成しながらプログラミング勉強!enchant.js講座 #3

前回はクリックした場所へくまを移動させるプログラムを作りました。

今回は敵キャラを画面上に表示させるプログラムを作ろうと思います。

 

前回の記事

 

敵キャラ”しろくま”の出現

左の一覧より「enchant.jsサンプル(基礎編)」→「Sceneを使って画面を制御しよう」と書かれたサンプルをForkしましょう。

 

Forkすると以下の画面が立ち上がりますので、まずはRunボタンを押して、ゲームを動かしてみましょう!

ゲームが起動すると、今回は新たに白いくまが出現しました。

このサンプルでは、カスタムシーンというプログラムが主の説明ではありますが、今回は敵キャラ出現させることが目的なので、しろくまの表示部分だけピックアップして解説します。

 

普通のクマと白クマの表示の仕組みについて

前回のプログラムでは、bearというものしか登場しなかったのですが、今回はbear1、bear2の2つが登場しています。

これは、bear1(普通のくま)、bear2(しろくま)を意味しており、キャラの数だけ増やしていく必要があります。

普通のクマと白クマの絵を切り替えるのは、「bear2.frame=5;」という命令で切り替えています。

frameとは何を意味しているのか補足しますと、くまの画像はスプライトシートという手法を用いていまして、実際のくまの画像は以下のようになっています。

1枚の画像に複数の絵が含まれています。

この絵を左上からframe=0、frame=1、frame=2・・・とframeという単位で管理しており、白クマはframe=5~8に該当します。

(frame=9とframe=14はキャラクターの絵がない為、何も表示されません)

 

普通のクマの絵を変えてみよう

では、普通のクマ(bear1)の絵を変えてみたいと思いますので、以下のようにコードを修正しましょう。

bear1.frame=10;を追加し、再度Runを押すと、普通のクマがリボンのついたクマに変わりました!

 

 

スポンサーリンク
シェアする

関連記事

ゲームを作成しながらプログラミング勉強!enchant.js講座 #1

こんにちは! 今回はenchant.jsというゲームエンジンを使ってゲームを作成しながらプログラミングにチャレンジしたいと思います!     enchant.jsとは enchan …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #5

前回は敵キャラを自動的に下に移動してくるプログラムを作りました。 複数敵キャラを表示させたのですが、今回は複数敵キャラの表示を”配列”と”繰り返し”とい …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #4

前回は敵キャラを画面上に表示させるプログラムを作りました。 今回は敵キャラを自動的に下に移動してくるプログラムを作ろうと思います。   前回の記事   敵キャラ”しろく …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #6

前回は”配列”と”繰り返し”を使って、敵キャラを複数表示させるプログラムを作りました。 しかし、敵キャラの位置が規則正しく並んでしまっていたので、ゲーム …

ゲームを作成しながらプログラミング勉強!enchant.js講座 #7

前回は”乱数”を使って、敵キャラをランダムに出現させるプログラムを作りました。 今回は、いよいよ敵キャラと自分のクマがぶつかった時の処理を作っていきたいと思います。 &nbsp …

プロフィール

坂井 秀教(@norio198603)です!

2018年2月に一般社団法人ドットテックを設立し、フリーランスのエンジニア・デザイナーが活動を継続できるよう、学び合い助け合えるコミュニティを構築・運営中しております。

ゲーム作りやプログラミングの楽しさを知ってもらいたいと思い、本サイトを立ち上げました。 本サイトが、気軽に楽しく、ゲーム作り・プログラミングに取り組む支えになれば幸いです!

カテゴリー

お勧め動画教材
アクションゲームをまるごと作って体験できる!Unityゲーム制作ハンズオン 作って覚えるアンリアルエンジン【Unreal Engine 4】~ダンジョンゲーム編~ 【超初心者向け】Blenderでキャラクターをモデリングしてアンリアルエンジンで動かす講座【ハンズオン】

最新の記事

Unityで使えるゲーム素材