That's awesome! Glad I could help someone.
prmurphy
14
Posts
3
Topics
A member registered Feb 02, 2020
Recent community posts
GOT IT! whith the help of https://jonathanwhiting.com/tutorial/collision/
Here's my final code:
var tileW = settings.tileSize.width || settings.tileSize[0];
var tileH = settings.tileSize.height || settings.tileSize[1];
var TileMap = require('pixelbox/TileMap');
var oldY
var oldX
var mario = {
x: 60,
y: 60,
w: tileW,
h: tileH
};
var link = {
x: 100,
y: 100,
w: tileW,
h: tileH
};
var flipH = "";
var flipV = "";
function AABBcollision(rect1, rect2) {
if (rect1.x < (rect2.x * 8) + (8) &&
rect1.x + rect1.w > (rect2.x * 8) &&
rect1.y < (rect2.y * 8) + (8) &&
rect1.y + rect1.h > (rect2.y * 8)) {
return true
}
}
var walls = []
var map = getMap("mymap");
draw(map,0,0)
print(walls.length);
exports.update = function () {
cls();
draw(map,0,0)
oldY = mario.y
oldX = mario.x
if (btn.right) {
mario.x += 1;
flipH = "";
}
if (btn.left) {
mario.x -= 1;
flipH = "flipH";
}
walls = [...map.find(3)];
sprite(142, link.x, link.y);
var i;
for (i = 0; i < walls.length; i++) {
if (AABBcollision(mario, walls[i])==true){
print("Hello, Mario", 12, 10);
mario.y = oldY
mario.x = oldX
}
}
oldX = mario.x
if (btn.up) {
mario.y -= 1;
//flipV = "";
}
if (btn.down) {
mario.y += 1;
//flipV = "flipV";
}
for (i = 0; i < walls.length; i++) {
if (AABBcollision(mario, walls[i])==true){
print("Hello, Mario", 12, 10);
mario.y = oldY
mario.x = oldX
}
}
sprite(153, mario.x, mario.y, flipH, flipV);
}
Definitely not the most efficient code. I'll have to work on that later. But it is buttery smooth!
Ok, I got it working with the array. I hardcoded the pixel width/height and it worked. Lesson learned, dont take anything for granted. So now I have this:
var tileW = settings.tileSize.width || settings.tileSize[0];
var tileH = settings.tileSize.height || settings.tileSize[1];
var TileMap = require('pixelbox/TileMap');
console.log(tileW)
var mario = {
x: 60,
y: 60,
w: tileW,
h: tileH
};
var link = {
x: 100,
y: 100,
w: tileW,
h: tileH
}
var flipH = "";
var flipV = "";
function AABBcollision(rect1, rect2) {
if (rect1.x < (rect2.x * 8) + (8) &&
rect1.x + rect1.w > (rect2.x * 8) &&
rect1.y < (rect2.y * 8) + (8) &&
rect1.y + rect1.h > (rect2.y * 8)) {
return true
}
}
var walls = []
var map = getMap("mymap");
draw(map,0,0)
//walls = [map.find(4)]
print(walls.length);
exports.update = function () {
if (btn.right) {
mario.x += 1;
flipH = "";
}
if (btn.left) {
mario.x -= 1;
flipH = "flipH";
}
if (btn.up) {
mario.y -= 1;
flipV = "";
}
if (btn.down) {
mario.y += 1;
flipV = "flipV";
}
cls();
draw(map,0,0)
walls = [...map.find(3)];
print(walls.length);
//print(walls[0].x, 60, 50 )
//print(walls[0].y, 70, 50 )
sprite(153, mario.x, mario.y, flipH, flipV);
sprite(142, link.x, link.y);
var i;
for (i = 0; i < walls.length; i++) {
if (AABBcollision(mario, walls[i])==true){
print("Hello, Mario", 12, 10);
if (btn.down) {
mario.y -= 0;
mario.y = mario.y - 1
}
if (btn.up) {
mario.y += 1;
}
if (btn.left) {
mario.x += 1;
}
if (btn.right) {
mario.x -= 1;
}
}
}
}
The problem now is I would like the character to be able to move smoothly along the wall when hold down down/left, down/right etc...
At this point it looks like the character is going slightly into the wall a little making it impossible to move. What would be the best way to keep that from happening?
As per the title, I'm trying to figure out the best way to detect collision with tiles. I came up with two ideas.
The first is have the main loop always be calling map.get for wherever the character is. and then something like this:
if(map.get(characterXRight, characterYbottom) != null){
if ((map.get(characterX, characterYbottom).sprite == '3') || (map.get(characterXRight, characterYbottom).sprite == '3')) {
//console.log("hello")
if (btn.down){
character.y -= 1
}
}
}
(something like that for all 4 directions.)
The second idea is to use map.find and make an array of all the tiles. Like:
cars = [...map.find(3)];
Which find all tiles of id 3 and add them to the array cars. After that, loop through the array
var i;
for (i = 0; i < cars.length; i++) {
if (AABBcollision(mario, cars[i])==true){
print("Hello, Mario", 12, 10);
}
function AABBcollision(rect1, rect2) {
print(rect2.x * 8, 50,70)
print(rect2.y * 8, 50,80)
print(rect1.x, 40,70)
print(rect1.y, 40,80)
if (rect1.x < (rect2.x * 8) + (rect2.w) &&
rect1.x + rect1.w > (rect2.x * 8) &&
rect1.y < (rect2.y * 8) + (rect2.h) &&
rect1.y + rect1.h > (rect2.y * 8)) {
return true
}
The problem wth this though is that the tilemap returns x.y coordinates based on the tilemap I think I need to multiple by the tile width/height to do the correctly.
I still havent gotten either to work though, so any help would be greatly appreciated.