WN

WN (https://www.wn.se/forum/index.php)
-   Serversidans teknologier (https://www.wn.se/forum/forumdisplay.php?f=4)
-   -   2D Kollision (https://www.wn.se/forum/showthread.php?t=1058107)

secag 2013-05-30 16:50

2D Kollision
 
Håller på att göra en litet test spel åt broshan och då tänkte jag en 2d platformer. Men nu har jag problem med att få "gubben" att kollidera med mina "blocks".

Jag har redan en metod i min "player" node/klass/sak (vet inte vad man kallar klasser i javascript för) och som kollar OM man kolliderar. Funkar fint men nu vill jag kolla från vilket håll man kolliderar.
Alltså följande riktningar:

NORTH - player.y = block.tile.y
WEST - player.x = block.tile.x
SOUTH - player.y = block.tile.y + block.tile.height
EAST - player.x = block.tile.x + block.tile.width

och dessa för om man sätter sig i ett hörn(tänker jag rätt här? För man kolliderar ju isåfall med 2 olika block och gör därefter ändringarna???).
Så dessa KANSKE behövs, jag vet inte riktigt :/
NORTHEAST
NORTHWEST
SOUTHEAST
SOUTHWEST

Här är koden som endast kollar. Jag har en array där jag lägger varje blocks ID och tar bort det därefter om jag "av"-kolliderar(?)
HTML-kod:

collides: function(block) {
                var collide = (Math.abs(this.x - block.tile.x) * 2 < (this.width + block.tile.width)) && (Math.abs(this.y - block.tile.y) * 2 < (this.height + block.tile.height));
                if(collide) {
                        if(!inArray(block.id, this.colliding)) {
                                this.colliding.push(block.id);
                        }
                } else {
                        if(inArray(block.id, this.colliding)) {
                                this.colliding = removeFromArray(block.id, this.colliding);
                        }
                }
                return false;       
        }

Jag behöver nu skapa en "handleCollision"-metod som körs om 'collide' är true och som kan kolla vart man kolliderar ifrån.

HTML-kod:

handleCollision: function(block) {
                // Now what?
        }

Detta behöver jag nu hjälp med. Google hjälper mig inte längre, får inga konkreta och förståliga svar därifrån :(

jlg 2013-05-30 19:21

Kolla och jämför respektive objekts koordinater i relation till din "spelplan"?

secag 2013-05-30 19:46

jo det förstår ja väl också men jag vet inte hur jag ska skriva.

secag 2013-06-01 15:52

BUMP!
Ser ut såhär nu:
HTML-kod:

handleCollision: function(block) {
                // Approaching from left
                if(this.x + this.width > block.tile.x) {
                        this.x = block.tile.x;
                }
               
                // Approaching from right
                if(this.x < block.tile.x + block.tile.width) {
                        this.x = block.tile.x + block.tile.width;
                }
               
                // Approaching from top
                if(this.y + this.height >
block.tile.y) {
                        this.y = block.tile.y;
                }
               
                // Approaching from bottom
                if(this.y < block.tile.y + block.tile.height) {
                        this.y = block.tile.y + block.tile.height;
                }
        }

Men det funkar inge bra eftersom varje gång jag kolliderar med ett testblock så hamnar jag alltid nedanför blocket till höger(Kolla bilden(gubben är den röda och de svarta blocken är "väggar" och de vita är ingenting :))):

http://i.imgur.com/7azgkDI.png

En kompis frågade i vilken ordning allting sker så då sa jag:

Kolla tangenttryck och sätt KEY_DOWN, KEY_UP osv... till true/false
kolla om "gubben" kolliderar(är inuti ett svart block), här körs handleCollision()
och sen kör jag update() metoden i "gubbe" klassen.
HTML-kod:

update: function() {
                if(this.RIGHT) {
                        this.velX = this.speed;
                }
               
                if(this.LEFT) {
                        this.velX = -this.speed;
                }

                if(this.UP) {
                        this.velY = -this.speed;
                }

                if(this.DOWN) {
                        this.velY = this.speed;
                }
               
                this.x += this.velX;
                this.y += this.velY;
               
                if(this.y >= canvas_height - this.height) {
                        this.y = canvas_height - this.height;
                } else if(this.y <= 0) {
                        this.y = 0;
                }
               
                if (this.x >
= canvas_width-this.width) {
                        this.x = canvas_width-this.width;
                } else if (this.x <= 0) {
                        this.x = 0;
                }
               
                this.velX = 0;
                this.velY = 0;
        },

HELA player klassen finns här: http://pastebin.com/0t0MtK1L


Alla tider är GMT +2. Klockan är nu 09:43.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson