Detection en collision - twee sprites.... VAST!!! HELP!!!

Detection en collision - twee sprites.... 4 weken VAST!!!

Beste Helpmij forumleden,

Inmiddels enkele weken verder en ik ben er nog steeds niet uit!

Mijn aangepaste code is onderin te vinden.

Uitleg spel:
Er komt iets van boven, dat met behulp van kogels, van beneden afgeknald moet worden.
Zoals hieronder afgebeeld:



Het lukt mij maar niet om beide sprite sheets te colliden, of in iedere geval dit herkennen en hieraan een actie kunnen toevoegen.
Al mijn code is toegevoegd, ik heb er printscreens van gemaakt

Kan iemand mij hiermee helpen?

Alvast bedankt voor jullie hulp.

[JS]
if ( bullets.y <= bees.y && bullets.x >= bees.x && bullets.x <= bees.x){
console.log("bamboem");
}
[/JS]

ik ken easeljs niet en heb hierin ook nooit geprogrammeerd.
maar ik kan je wel uitleggen hoe het werkt zodat je het kan vertalen en zelf kan schrijven.

Je hebt het object zoals persoon en je hebt iets dat met hem moet botsen is bijv. een auto ofzo.
Beiden hebben een oppervlakte. Bounding Boxes wordt dit ook wel genoemd.
Met je X en Y coordinaten kan je berekenen waar je object staat. Stel je krijgt met de X en Y het linker bovenhoek van het object.
Dan kan je met de breedte en hoogte van het object de bounding boxes berekenen.

Dit doe je dus ook voor de auto en dan vervolgens ga je kijken deze 2 binnen elkaar's positie vallen.
Is dit een ja = collision
Is dit een nee = geen collision

Meestal hoef je dit niet allemaal zelf te doen en zit het allemaal in het framework.
Ik heb op het web gekeken en hier is een voorbeeldje : http://www.createjs.com/tutorials/HitTest/localToLocal.html
Als je kijkt naar de code dan zie je dat functie "localToLocal" wordt gebruikt voor collision detectie.


In de functie init worden de object gemaakt en ook de locatie = target.x en target.y. Dit is ook zo voor de arm.
Er wordt vervolgens na het aanmaken van de objecten een ticker gestart die continue blijft lopen.
Hierin zit de collision detectie. Ik heb het stukje dik gedrukt + rood gemaakt in de code.
Ik denk dat je met deze uitleg wel eruit moet komen. Mocht het niet zo zijn dan kan je altijd verder vragen.
Succes

Visha,

Hartelijk bedankt!

Helaas ben ik er nog steeds niet uit.
localToLocal is als ik het goed begrijp niet bedoeld voor twee bewegende objecten...

Verbeter me als ik het verkeerd heb.

Nu heb ik in ieder geval de code om met mijn muis de bijen en kogels te laten verdwijnen.
Ben nog opzoek naar een manier om de daadwerkelijk collision te maken.... Dit is nu nog een raadsel.

Gr,

Srananmang

Beste mensen,

Tot op heden nog steeds niet verder gekomen.
Ondanks veel zoeken en uitproberen op het internet.

Wie kan mij helpen!?

Groet,

Srananmang

Euhm.. heb je ergens misschien iets waarin ik het kan testen?
jsfiddle ofzo?

@Visha

Hallo,

Inmiddels heb ik het opgelost door de containers te verwijderen en van beide spritesheets Arrays te maken.
Dan kan ik ze colliden. Met containers blijkt dit nog erg lastig te zijn.

Ik heb wel een ander probleem.
Nu weet ik niet of ik hiervoor een nieuw topic ga maken... Maar misschien kan jij me er sneller mee helpen.

Ik heb 1 spritesheet van +/- 500 frames!
Deze start op mijn startscherm.
Hij loopt van links naar rechts, daarna wil ik dat hij van rechts naar links loopt(nadat hij al 1x gedraaid heeft).

Zoals je in de code hieronder ziet ken ik de code om mijn spritesheet om te draaien en af te spelen.
Maar hoe ik dit achter elkaar laat lopen weet ik niet.

Met de huidige code is het nu afhankelijk van de stage.addChild volgorde en tekent hij de tweede bovenop de eerste.

Hopelijk kan je mij hierbij helpen.

Groet,

$

[JS]function init() {

stage = new createjs.Stage(document.getElementById("myCanvas"), document.getElementById("myCanvas").style.backgroundColor = backGroundColor);
context = myCanvas.getContext("2d");
stage.enableMouseOver();

img = new Image();
img.src = "assets/img/B/boomm.jpg";
img.onload = function(event){
var bttn = {
"images":["assets/img/buttons.png"],
"frames":{"width":100, "height": 45, "count": 3},
"animations":{"normal":[0], "hover":[1], "clicked":[2]}
}
spriteSheet = new createjs.SpriteSheet(bttn);
button = new createjs.Sprite(spriteSheet);
var helper = new createjs.ButtonHelper(button, "normal", "hover", "clicked");
button.addEventListener("click", click);
button.x = 600;
button.y = 120;
button.gotoAndPlay("normal");
//stage.addChild(button);

var data = {
"images":,
"frames":{"width":1200, "height": 327, "count": 511},
"animations":{"left":[0, 510, "reverse", 1], "reverse":[0, 510, "left", 1]}
}
sScrn = new createjs.SpriteSheet(data);
backgrnd = new createjs.Sprite(sScrn, "left");
backgrnd2 = new createjs.Sprite(sScrn, "reverse");
backgrnd2.x = 1200;
backgrnd2.y = 0;
backgrnd2.setTransform(backgrnd2.x, backgrnd2.y, -1);
stage.addChild(backgrnd2, backgrnd, button);
stage.update();
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick2);
}[/JS]

Ik ken easejs niet zoals ik eerder zei maar zal je proberen te helpen.
Ik weet niet om welke het gaat. Om de button of de data maar ik ga ervan uit van de data aangezien ik daar count 511 zie staan.

Zoals ik in je code zie maak je bij de onload van de image? wat sowieso beetje raar klinkt maar goed
Daar maak je 2 objecten aan namelijk :
backgrnd = new createjs.Sprite(sScrn, "left");
backgrnd2 = new createjs.Sprite(sScrn, "reverse");

Deze voeg je allebei vervolgens toe aan je stage waardoor je 2 objecten krijgt.
En daarom zie je dit. Wat opzich logisch is.

Is het zo dat de code continue blijft lopen?
Ik denk dat je dan zelf een if statement zou moeten maken en dan kijken of background zijn eind heeft bereikt en dan dit verwijderen van
de stage en een nieuwe toevoegen die terugloopt.
Je kan removechild hiervoor gebruiken : http://www.createjs.com/Docs/EaselJS/classes/Stage.html (staat ergens 3/4 van de pagina)