質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

enchant.js

enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

Q&A

解決済

1回答

4238閲覧

キャラ固定のマップスクロール時に障害物を正しく認識させたい。

katsushin

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

enchant.js

enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

0グッド

0クリップ

投稿2015/11/14 15:18

enchant.jsでRPG的なものを作成しています。

■やりたいこと

「キャラをマップの中央に置き、マップをスクロールさせたい」
「障害物を認識させ、キャラが通行可能なところにだけ動かしたい」

■トラブル

「スクロールはするが、正しく障害物を認識した動きにならない」
参照:http://goo.gl/DqRoxL

■考えられる原因

トラブル時の動きから察するに、hittestで障害物の判定を行う際、このソースではキャラの現在位置でなく初期配置位置を常に参照している? ようです。

どこかでキャラの現在位置を保存し、hittestで常にそれを参照させることができれば、目的を達成できると思うのですが……その方法がわからず困っています。

hittestでキャラの現在座標をチェックさせるためには、以下のソースをどのように書き直せば良いでしょうか。

なお、マップをスクロールさせず、キャラを単一画面の中で動かすだけであれば、hittestで障害物を認識させるのには成功しています。
参照:http://goo.gl/v1oM2o

----以下ソース----

enchant(); // ライブラリの初 enchant();

window.onload = function(){
// 320×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 320);
// フレームレートの設定。15fpsに設定
game.fps = 10;
// ブロックサイズ
game.bs = 32; // 32px
// 画像データをあらかじめ読み込ませる
game.preload("img/map1.png", "img/chara3.png");
// データの読み込みが完了したら処理
game.onload = function(){
// マップのブロックのサイズを32×32に設定
var map = new Map(game.bs, game.bs);
// マップ画像を設定
map.image = game.assets["img/map1.png"];
// 表示するマップのデータを設定
var basemap = [
[2,2,2,2,2,2,2,2,2,2],
[2,1,0,0,0,0,0,0,0,2],
[2,1,0,2,2,2,1,0,0,2],
[2,1,0,2,2,2,1,2,2,2],
[2,1,1,1,1,1,1,1,1,2],
[2,0,2,2,1,2,2,2,0,2],
[2,0,2,0,1,0,0,0,0,2],
[2,0,0,0,1,2,2,2,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,2,2,2,2,2,2,2,2,2]
];
map.loadData(basemap);

var colMap = [
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,1,1,1,0,0,0,1],
[1,0,0,1,1,1,0,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,1,1,0,1,1,1,0,1],
[1,0,1,0,0,0,0,0,0,1],
[1,0,0,0,0,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1],
];
map.collisionData = colMap;

// マップを表示
game.rootScene.addChild(map);
// マイキャラを生成
var man = new Sprite(game.bs, game.bs);
man.image = game.assets["img/chara3.png"];
// マイキャラの最初の立ち位置
man.x = game.bs4;
man.y = game.bs
4;
man.frame = 37;
game.rootScene.addChild(man);
// マイキャラを移動
man.addEventListener(Event.ENTER_FRAME, function(){
// 進んだ結果、yが0未満にならなければ&進入不可でなければ上へ移動
if (game.input.up && !map.hitTest(map.x, map.y + game.bs)){
map.y = map.y + game.bs;
this.frame = this.age % 3 + 6;
} else if (game.input.up){
this.frame = 7;
}
if (game.input.down && !map.hitTest(map.x, map.y - game.bs)){
map.y = map.y - game.bs;
this.frame = this.age % 3 + 36;
} else if (game.input.down){
this.frame = 37;
}
if (game.input.left && !map.hitTest(map.x + game.bs, map.y)){
map.x = map.x + game.bs;
this.frame = this.age % 3 + 51;
} else if (game.input.left){
this.frame = 52;
}
if (game.input.right && !map.hitTest(map.x - game.bs, map.y)){
map.x = map.x - game.bs;
this.frame = this.age % 3 + 21;
} else if (game.input.right){
this.frame = 22;
}

});
}
game.start(); // ゲーム処理開始
}
----ここまで----

以上、アドバイスいただけましたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

hitTestに使用しているmap.x(y)の初期値が0です。
そのため、MAPの起点(左下か左上かは確認していませんがどちらかだと思います。)に
キャラがいることになっています。

hitTestの引数をmap.x + man.x, map.y + man.yにすると、うまくいくかもしれません。

投稿2015/11/16 03:22

moredeep

総合スコア1507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

katsushin

2015/11/16 03:58

ご回答ありがとうございます! 家に戻り次第、早速ためそうと思います。 取り急ぎお礼まで。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問