Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

音をならしてみよう


どうも、steelydylanです。Atlas.jsでは音をならすための機能も用意されています。
音関係機能には以下の物があります。

sprite.getSound("音楽素材の名前");
sprite.soundClonePlay();/*多重再生の場合に使用*/
sprite.soundLoopPlay();/*ループ再生の場合に使用*/
sprite.soundReplay();/*最初から再生する場合に使用*/
sprite.soundStop();/*サウンドを停止したい時使用*/
sprite.soundPlay();/*再生に使用*/
sprite.soundPause();/*サウンドの一時停止に使用*/
sprite.soundGetCount();/*サウンドの現在の再生時間の取得*/
sprite.soundSetCount();/*サウンドの再生時間の指定*/
sprite.soundGetVolume();/*ボリュームの取得*/
sprite.soundSetVolume();/*ボリュームの設定*/
sprite.soundGetAlltime();/*サウンドの全再生時間の取得*/
sprite.soundIsPlaying();/*サウンドが現在流れているかを取得*/

game.loadでまずは音をロードしよう。

まず、音を使うにはgame.loadで音をロードしてあげる必要があります。
mp3やogg、wavなどの形式に対応しています。
game.load(["http://natsupro.digi2.jp/anotuki/stage.mp3","music"]);
このように素材をロードして、その素材になまえをつけ、
sprite.getSound("music");で、
Spriteオブジェクトや、Shapeオブジェクトに、音を備え付け、
あとは、sprite.soundPlay()で音をならすことができます。
また、sprite.soundLoopPlay();で音をループ再生させることも出来ます。

ソースコードサンプル

Atlas();
window.onload = function(){
	var game = new App();
	game.setQuality(500,500);/*画面の解像度を500*500に*/
	game.setSize(500,500);/*画面の大きさを500*500に*/
	game.centerize();/*画面を中央に*/
	game.setColor("black");/*背景を黒に変更*/
  	game.load(["http://natsupro.digi2.jp/anotuki/stage.mp3","music"]);/*音楽をロード*/
	var text = new Text("押すと音がなります","red",20);/*テキストのオブジェクト生成*/
  	var button = new Shape.Box("white",190,30);/*箱のオブジェクト生成*/
  	button.getSound("music");/*ロードした音楽を取得*/
	text.setPosition(200,210);/*textをx:200,y:210に設置*/
  	button.setPosition(200,200);/*buttonをx:200,y:200に設置*/
  	button.touchStart = function(e){/*タッチした時の処理*/
     	if(this.intersect(e.x,e.y)){/*カーソルの座標がbuttonの座標に接している場合*/
          	if(this.soundIsPlaying())/*現在音楽が再生されているかどうか*/
             	this.soundStop();	/*音楽を止める*/
          	else
              	this.soundPlay();	/*音楽を再生する*/
     	}
  	}  	
	game.addChildren(button,text);/*button,textを画面に追加*/
	game.start();/*ゲームスタート*/
};

実行結果

以下に実行結果を貼っておきます。参考にしてください。
http://atlas-editor.ap01.aws.af.cm/user/Atlasjs/535b7172f8d392d312000008


ブロック崩しを作ってみよう〜ブロックを作ってみよう〜

こんにちは。moltomheadです。前回はバーの作成をしました。ということは残っているのはブロックの作成ですね。今日はブロックの作成について解説したいと思います。
今回のブロックは、ボールやバーと違って複数置くことになります。そしてそれぞれのブロックにはボールが当たった時に消えるように処理をしないといけません。それをブロックごとに一個づつ判定・処理を書いていくなんてとても面倒ですよね。実はそんなことをしなくても一回書くだけで済む方法があります。それはクラスです。OGSでもう聞いたことのある人はいると思いますが、クラスとはデータ(プロパティ)や操作(メソッド)をまとめたひな形です。例えば車の工場(クラス)があったとしたら、車の情報である色というデータや、走るという操作を指定することで、その能力を持つ車を作ることができます。前回のブログでこんなコードを見た方もいると思います。

var bar = new Shape.Box("black",100,10);
var ball = new Shape.Circle("white",10);

このnewの後に続くものがクラスです。Atlas.jsではBoxクラスやCircleクラスなどを提供し、色だったり、どういう風に動かすかを設定することができます。では、今回のようにAtlas.jsが提供しているクラスに自分が使いたい機能がなかった場合どうすればいいでしょう?そうです。なければ作ればいいんです。Atlas.jsでは既存のクラスから新しいクラスを作る機能を提供しています。では実際にボールが当たったら、消えるように動作するBlockクラスを作ってみましょう。Atlas.jsでは新しくクラスを作る場合、Atlas.createClassを使います。下のコードを参考にしてみてください。

/*ブロックのクラス*/
  	Block = Atlas.createClass(Atlas.Shape.Box,{//このクラスをBlockという名前にする
     	initialize: function(col,numx,numy,coordinatex,coordinatey){//初期化処理
         	this.inherit(col,numx,numy);//元になるクラスの引数を利用できる
          	this.setPosition(coordinatex,coordinatey);//表示位置の設定
          	this.collided = false;//ボールと初めて当たったかの判定
         },
         enterFrame: function(){//ループ処理
         	if(ball.hitTest(this)){//ボールがブロックに当たったか
              	 if(this.collided == false)//初めてボールと当たったら
                       ball.speedY = -ball.speedY;//ボールを移動方向を反転
         		this.remove();//ブロックを消す。(消してもボールと当たる判定は残る)
              	 this.collided = true;//ボールに当たったためtrueに
        	}
         }
                            
   	});

前回と比べて大分難しくなったと思いますから一から順番に説明していきます。まず先ほど言ったAtlas.createClassでは元となるクラス、追加する機能の順番に書いていきます。Atlas.Shape.Boxが元のクラス、その後に続く{}で囲まれているのが追加する機能です。今回作るのはブロックのクラスなので、Boxクラスを使ってクラスを作っていきます。ボールの場合はCircleクラスを使いましょう。
まず最初にクラスを作る場合、初期化処理をしなければなりません。それがinitializeメソッドです。initializeメソッドではクラスがもつ位置や色の情報などを指定することができます。また、独自にプロパティを指定することもできます。上の例ではthis.colliedがそれにあたります。this.inheritでは元になるクラスの引数をそのまま利用することができます。ここは難しいと思うので、とりあえず上の例のように書いてみてください。引数などがわからないという方は前回のブログを見てみてください。プログラミングの基礎的な解説〜関数〜
初期化処理が終わったらあとはボールに当たった場合の処理を書いていきます。これはボール作成の時にやったenterFrameの処理に似ていますね。ブロック崩しを作ってみよう〜ボールを作る〜
このようにenterFrameはクラス内でも利用することができます。enterFrame内ではボールが当たったら、消えるような処理をしています。ボールの方もブロックと当たった場合、反射するように処理をしています。ただし、ブロックは消すことはできますが、ボールと当たる判定が残ってしまうので、上では、this.collided = false;を使ってボールがブロックと初めて当たった場合はtrueにし、それ以降ボールが反射しないようにしています。
これで、ブロックの衝突判定を設定することが出来ました。ただ、クラスを書いただけで画面に表示できるわけではありません。実際に画面に表示させたい場合はループ処理などを使って何回もaddChildをする必要があります。

for(var i=1;i<=6;i++){//ループ処理
      	for(var j=1;j<=4;j++){
             	block = new Block("red",70,30,70*i-30,30*j+50);//位置、大きさ、色の指定
                game.addChild(block);//画面に表示
        }
 }

このようにループしながら、表示する位置をずらすことで、何個もブロックを並べることができます。そして実際にボールと組み合わせたサンプルがこれです。
ボールに当たったブロックが消えるサンプル
どうですか?ボールでブロックを消せるようになればあと一歩でブロック崩しの完成です。頑張りましょう。
今回はここまでです。ありがとうございました。


Web サーバを構築しよう

こんばんはしぉみんです。 最近学校のレポートが忙しくて勉強がなかなかできていないです。そういうわけで書くネタも見つからなかったので学校の実験の授業で行った Web サーバの構築を簡単に説明したいと思います。

Web サーバの構築

Web サーバは FreeBSD で構築を行いました。すでに FreeBSD のインストールが行われていることを前提にお話します。

Apache に関するソフトをダウンロード
apr, apr-iconv, pcre, apr-util, httpd をダウンロード・インストールします。インストールには gcc コンパイラーが必要となります。

htdocs の所有者の変更
Web ページ(HTMLやCSS, JS など)を置くディレクトリである htdocs の編集権限を ユーザとグループに設定します。 FreeBSD のユーザとグループに書かれている人しか変更できないように設定します。

# chown -R ユーザ名:グループ名 /usr/local/apache2/htdocs

Apache の設定ファイル httpd.conf の編集
設定ファイルは /usr/local/apache2/conf/ディレクトリにあるhttpd.conf に書かれています。すでにコメントアウトで記述されているので該当する箇所を探し書き換えるところを書き換えましょう。下は最低これだけ書き換えれば
Web サーバが動く設定です。

ServerRoot "/usr/local/apache2"
Listen 80
User ユーザ名
Group グループ名
ServerAdmin サーバ管理者のアドレス
DocumentRoot "/usr/local/apache2/htdocs"

簡単な Webサーバの設定はこれで完了です。あとは Apache を起動しましょう。

# /usr/local/apache2/bin/apachectl start

これで起動すれば Web ブラウザからサーバにアクセスすると htdocs に置かれている index.html がブラウザに表示されます。まだまだこれだけでは html だけしか運用できないので動的なコンテンツを作りたい人は CGI や SSI
などの設定も行わないといけません。ただし JavaScript だけはブラウザ依存
なので設定をしなくても動かすことができます。ぜひ動的な Web ページを作りたければ JavaScript 系の言語で開発しましょう。

以上簡単に紹介しましたが学校ではこんなかんじの実験を行っています!!。
設定ファイルを一つでもミスると動かなくなるのでとても大変ですが勉強になります。

では今日はここまでにしておきます。日付が変わってしまいました。おやすみなさいノシ


村人を作ろう

こんにちは。steelydylanです。Atlas.jsであまりよく知られていない機能として、animation機能があります。この機能を使えば、Spriteにanimationをつけることが出来ます。
例えば、街に行った時にちょろちょろと動き回る、村人を作ることが出来ます。



例えば、次のようなコードで動きます。

sprite.setPosition(100,100).animate([0,1,2],5).and().moveBy(0,100,30)
.animate([9,10,11],5).and().moveBy(0,-100,30).loop();

意味としましては、
座標(100,100)の位置にSpriteをセット
Spriteのフレームを(0,1,2,0,1,2...)と5フレームで切り替えていきながら、現在地から、(0,100)進んだ位置に、30フレームで移動。
その後、フレームを(9,10,11,9,10,11)と切り替えていきながら、現在地から(0,-100)進んだ位置に、30フレームで移動。
これを繰り返す。という意味になります。
フレームとは左の図のように、Spriteを切り取って分割した場合に、どの領域を描画するかという情報のことです。例えば、一番左上を切り取りたければ、Frame番号は0です。
簡単ですね。
これで今日からあなたも村人が作れます。
あなただけの村人を作ってみてください。では!!

上のコードの実行結果

http://atlas-editor.ap01.aws.af.cm/user/steelydylan/534b884bab3404e719000002


ブロック崩しを作ってみよう〜バーを動かしてみよう〜

こんばんは moltomheadです。
前回はボールの作成をしました。今度は何が必要だと思います?そう、バーです。今回はバーの作成について解説していきます。
まずはバーらしい形をしたものを表示しましょう。今回は長方形を使いますが、あなたがバーだと思ったものならなんでもいいです。三角形でも円でも自由に使ってみましょう。後は最初に表示する位置を決めましょう。分からなかったら前回のボールの作成の記事を見てください
ブロック崩しを作ってみよう〜ボールを作る〜
コードはこんな感じでしたね。

var bar = new Shape.Box("blue",100,20);
bar.setPosition(200,400);

ボールを作った時はボールは勝手に動くようにプログラミングしていましたが、今回は自分で動かせるように、キーを押したときにバーが左右に動くようにしてみましょう。キー入力に対応させる場合はkeyDownを使います。

  bar.keyDown = function(key){ 
     if(key.right==1)//右キーを押した場合
          this.x+=10;
      if(key.left==1)//左キーを押した場合
          this.x-=10;
  }

enterFrameの時の記述と少し似ていますね。keyDownはどのキーを押したかを返してくれる機能を持っています。その情報は引数keyが持っていて、上のようにkey.rightは右キーを押した場合は1を、押してない場合は0を返してくれます。これを使って右キーを押した場合は、右方向に、左キーを押した場合は左方向に移動させています。
今回は比較的簡単な部類なのですぐにできたと思います。できていない方もサンプルのコードを載せますのでぜひ見てください。
バーを動かすサンプル
今後解説するとは思いますが、もっとできるぞという人は、それぞれ解説したボールとバーを組み合わせてボールをバーで打ち返すプログラムを作ってみたらどうでしょう。
今回は短いですがここまでです。次回はブロック崩しの要、ブロックを作っていこうと思います。ありがとうございました。


エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本