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

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

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

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

enchant.js

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

Q&A

1回答

3250閲覧

enchant.jsにてスプライトを合成するには

ryuuichi2014

総合スコア115

JavaScript

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

enchant.js

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

0グッド

0クリップ

投稿2015/11/09 07:02

あるキャラクターが32x32のサイズだったとして、それを Sprite で使用するとします。

そのキャラクターを2つ横に並べて64x32をひとつのスプライトにすることは可能でしょうか?(合成のような感じです)

キャラクターを並べて表示するにはグループ使えばいいや!と最初は思ったのですが、あたり判定時でつまずきました。

(スプライト と グループ 同士ではあたり判定はできない?)

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

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

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

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

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

guest

回答1

0

グループと同じサイズのスプライトかなんかを新たに作ってグループに貼り付けておき、
それを用いて当たり判定を行うなんて言うのはどうでしょうか。

例えば、
1.スプライト1、2を生成する
2.グループ化する
3.グループと同じ大きさの透明スプライトを生成する
4.グループに重ねる(スプライト1のx,yと同じ位置に)
5.グループが動かす(xに200、yに200とする)
6.透明スプライトを5に連動して動かす(xに200、yに200)
7.当たり判定

というのはどうでしょうか。
グループの幅、高さは、Imageかなんかで取得して、
透明画像は、なんでもいいので取得した幅、高さで生成して、
もし、グループを動かしたら、連動して同じように動かす…
という感じです。

以下のようにしてはどうでしょうか。

enchant(); // imageフォルダにchara1.pngがあることが前提です。 var chara = "image/chara1.png" var Assets = [chara] window.onload = function(){ var game = new Game(320,320); game.preload(Assets); game.fps = 30; game.rootScene.backgroundColor = "black"; game.onload = function(){ // クラスにしなくてもよいと思います。 var Bear = Class.create(Sprite, { initialize: function(x, y){ Sprite.call(this, 32, 32); this.image = game.assets[chara]; this.x = x; this.y = y; } }); // クラスにしなくてもよいと思います。 // よい名前が思いつかなかったので、 // _をつけて元あるクラスを上書きしないようにしました。 すいません。 var _Entity = Class.create(Entity, { initialize: function(w,h,x,y,color){ Entity.call(this, w, h) this.width = w; this.height = h; this.x = x; this.y = y; this.backgroundColor = color; } }); var entity = new _Entity(100,100,100,100,"blue"); game.rootScene.addChild(entity); var group = new Group(); game.rootScene.addChild(group); // width:64 => スプライト(bear1,2)の横幅*2(横に2つならべグループ化しているため) // height:32 => スプライト(bear1,2)の縦幅*1(縦に1つ並べてグループ化しているため) var entity_test = new _Entity(64,32,50,50,"green"); // opacity(0~1まで)で透明度を変更できます。 // 0 <== 0.5 ==> 1 // 完全透明 半透明 透明でない entity_test.opacity = 0; group.addChild(entity_test); var bear1 = new Bear(50, 50); group.addChild(bear1); var bear2 = new Bear(82, 50); group.addChild(bear2); group.onenterframe = function(){ if(game.input.left == true){ group.x -= 2; }; if(game.input.right == true){ group.x += 2; }; if(game.input.up == true){ group.y -= 2; }; if(game.input.down == true){ group.y += 2; }; }; game.rootScene.onenterframe = function(){ // 必要に応じて .within メソッドを使ってください。 // 四角に当たった => 青→赤 // 当たっていない => 赤(赤→青) if(entity_test.intersect(entity)===true){ entity.backgroundColor = "red"; }else{ entity.backgroundColor = "blue"; }; }; }; game.start(); };

四角に当たっていない状態
四角に当たっていない状態

四角に当たっている状態
四角に当たっている状態

投稿2015/12/26 12:19

編集2015/12/26 13:09
ThanaMori

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問