Isometric Ver!

0ba352b8 · Leanna Mi N. · 1040e1a7 · 0ba352b8 · 0ba352b8 · 0ba352b8
Commit 0ba352b8 authored 9 months ago by Leanna Mi N.
--- a/assets/grass.png
+++ b/assets/grass.png
--- a/assets/road.png
+++ b/assets/road.png
--- a/assets/road_4way_intersection.png
+++ b/assets/road_4way_intersection.png
--- a/assets/road_horiz_sidewalk.png
+++ b/assets/road_horiz_sidewalk.png
--- a/assets/road_vert_sidewalk.png
+++ b/assets/road_vert_sidewalk.png
--- a/cityMap_levelOne.jpeg
+++ b/cityMap_levelOne.jpeg
--- a/graph_levelOne.json
+++ b/graph_levelOne.json
--- a/grid_tile.js
+++ b/grid_tile.js
--- a/OldVer/index.html
+++ b/OldVer/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+    <script src="https://unpkg.com/ml5@0.6.0/dist/ml5.min.js"></script>
+
+  </head>
+  <body>
+    <main>
+    </main>
+    <script src="sketch.js"></script>
+    <script src="grid_tile.js"></script>
+  </body>
+</html>
--- a/model/model.json
+++ b/model/model.json
--- a/model/model.weights.bin
+++ b/model/model.weights.bin
--- a/model/model_meta.json
+++ b/model/model_meta.json
--- a/p5.js
+++ b/p5.js
--- a/p5.sound.min.js
+++ b/p5.sound.min.js
--- a/simpleCityMap.png
+++ b/simpleCityMap.png
--- a/OldVer/sketch.js
+++ b/OldVer/sketch.js
+/*
+  p5.js sketch for Ben, Wu, and Leanna's CP2
+  
+  TODO's that I'm (Ben) going to try and get to by tonight
+  (1) I’m going to make a new p5.js sketch
+  (2) put the map onto it, 
+  (3) create objects for the different road/edge types,
+  (4) and then integrate the drawing classifier in ml5.js so that it knows the difference between a circle and an 'x' and find the closest edge from your drawing (I’ll wait to implement that last part after Wu get’s the graph logic integrated)
+
+We can figure out how to project the game using a projector after CP2 (I'm assuming you just need to make the game full screen)
+*/
+
+
+/*
+  TODO: Create an enum for this, but for now the following numbers correspond
+        to the following road types:
+        0. city (for now we'll use grass sprites. In future we can add multiple types of city blocks or a whole gouping)
+        1. road (vertical)
+        2. road (horizontal)
+        3. road (4-way intersection)
+        4. road with sidewalk (vertical)
+        5. road with sidewalk (horizontal)
+        6. road with sidewalk (4-way intersection)
+        7. road with sidewalk (3-way intersection with no road on the left)
+        8. road with sidewalk (3-way intersection with no road on the right)
+        9. road with bus stop (vertical)
+        10. road with bus stop (horizontal)
+        11. road with broken sidewalk (vertical)
+        12. road with broken sidewalk (horizontal)
+*/
+
+const levelOne = [
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
+  [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0]
+];
+
+// const levelTwo = [
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
+//   [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1]
+// ];
+
+const demo_city = [
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1],
+  [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1],
+  [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
+  [1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
+  [1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
+  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+];
+
+
+// Rough Draft of the second canvas where the players
+// draw the desired game piece
+var GamePieceSelectionCanvas = function(canvas2) {
+  canvas2.x = 100;
+  canvas2.y = 100;
+  canvas2.canvas = null; // Store reference to the canvas element
+  canvas2.shapeClassifier = null;
+  canvas2.resultsDiv = null;
+  canvas2.inputImage = null;
+  canvas2.clearButton = null;
+  
+  canvas2.setup = function() {
+    canvas2.canvas = canvas2.createCanvas(400, 400);
+    canvas2.canvas.position(200, 200); // Set position of the canvas
+    
+    let options = {
+      task: 'imageClassification',
+    };
+    
+    canvas2.shapeClassifier = ml5.neuralNetwork(options);
+    const modelDetails = {
+      model: 'model/model.json',
+      metadata: 'model/model_meta.json',
+      weights: 'model/model.weights.bin',
+    };
+
+    canvas2.shapeClassifier.load(modelDetails, canvas2.modelLoaded);
+
+    canvas2.clearButton = createButton('clear');
+    canvas2.clearButton.mousePressed(function() {
+      canvas2.background(255);
+    });
+
+    canvas2.resultsDiv = createDiv('loading model');
+    canvas2.inputImage = createImage(64, 64);
+    
+    canvas2.clearButton.hide();
+    canvas2.resultsDiv.hide(); 
+    canvas2.canvas.hide(); // Hide the canvas by default
+    canvas2.background(255);
+  };
+
+  canvas2.draw = function() {
+    if (canvas2.mouseIsPressed) {
+      canvas2.stroke(0);
+      canvas2.strokeWeight(4);
+      canvas2.line(canvas2.mouseX, canvas2.mouseY, canvas2.pmouseX, canvas2.pmouseY);
+    }
+
+  };
+
+  canvas2.modelLoaded = function(){
+    console.log('model ready!');
+    canvas2.classifyImage();
+  };
+
+  canvas2.classifyImage = function() {
+    canvas2.inputImage.copy(canvas2.canvas, 0, 0, 400, 400, 0, 0, 64, 64);
+    canvas2.shapeClassifier.classify(
+      {
+        image: canvas2.inputImage,
+      },
+      canvas2.gotResults
+    );
+  };
+
+  canvas2.gotResults = function(err, results) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    canvas2.label = results[0].label;
+    canvas2.confidence = nf(100 * results[0].confidence, 2,1);
+    canvas2.resultsDiv.html(`${canvas2.label} ${canvas2.confidence}%`);
+    canvas2.classifyImage();
+  };
+
+
+  canvas2.showCanvas = function() {
+    canvas2.canvas.show();
+    canvas2.clearButton.show();
+    canvas2.resultsDiv.show();
+  };
+
+  canvas2.hideCanvas = function() {
+    canvas2.clearCanvas();
+    canvas2.canvas.hide();
+    canvas2.resultsDiv.hide();
+    canvas2.clearButton.hide();
+  };
+  
+  canvas2.clearCanvas = function() {
+    canvas2.background(255);
+  };
+};
+
+
+// Second Canvas obj
+var canvas2_obj = new p5(GamePieceSelectionCanvas);
+
+// Game Constants
+const BUDGET_LEVEL_ONE = 500;
+const canvasHeight = 800;
+const canvasWidth = 800;
+const gridSize = 40;
+
+// Variables that track game state
+let gameState = 'LEVEL_ONE';  // TODO: enum??
+let playerMoneyRemaining = 0;  // Will set when level starts
+let startNode = 'A';  // Will set when level starts for that particular level
+let endNode = 'C';  // Will set when level starts for that particular level
+
+// TODO: Convert this to an enum?
+// Can be either
+//   1. road
+//   2. sidewalk
+//   3. bus
+let selectedRoadType = "sidewalk";  // Road with sidewalk by default
+
+// Variables that track controller state
+let moveX = 0;
+let moveY = 0;
+let curr_column = 0;
+let curr_row = 0;
+
+// for the graph underlying each level's map
+let grid = [];
+let items = [];
+
+// 0. city (for now we'll use grass sprites. In future we can add multiple types of city blocks or a whole gouping)
+// 1. road (vertical)
+// 2. road (horizontal)
+// 3. road (4-way intersection)
+// 4. road with sidewalk (vertical)
+// 5. road with sidewalk (horizontal)
+// 6. road with sidewalk (4-way intersection)
+// 7. road with sidewalk (3-way intersection with no road on the left)
+// 8. road with sidewalk (3-way intersection with no road on the right)
+// 9. road with bus stop (vertical)
+// 10. road with bus stop (horizontal)
+// 11. road with broken sidewalk (vertical)
+// 12. road with broken sidewalk (horizontal)
+
+function preload() {
+  // Load in the city map images for all of our 
+  // levels before the game begins
+
+  for (let i = 0; i < canvasHeight / gridSize; i++) {    
+    grid[i] = [];
+    for (let j = 0; j < canvasWidth / gridSize; j++) {
+      grid_tile = levelOne[i][j];
+      switch (grid_tile) {
+        case 0:  // city block (for now, grass)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
+          break;
+        case 1:  // road (vertical)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "vertical");
+          break;
+        case 2:  // road (horizotnal)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "horizontal");
+          break;
+        case 3:  // road (4way intersection=)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+          break;
+        case 4:  // road with sidewalk (vertical)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "sidewalk", "vertical");
+          break;
+        case 5:  // road with sidewalk (horizontal)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "sidewalk", "horizontal");
+          break;
+        case 6:  // road with sidwalk (4-way intersection)
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "sidewalk", "4way");
+          break;
+        // case 7:  // road with sidewalk (3-way intersection with no road on the left)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        // case 8:  // road with sidewalk (3-way intersection with no road on the right)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        // case 9:  // road with bus stop (vertical)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        // case 10:  // road with bus stop (horizontal)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        // case 11:  // road with broken sidewalk (vertical)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        // case 12:  // road with broken sidewalk (horizontal)
+        //   grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "empty");
+        default:
+          // Otherwise, default to grass
+          grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
+      }
+    }
+  }
+}
+
+function setup() {
+  createCanvas(canvasWidth, canvasHeight);
+  pHtmlMsg = createP(`Player 1 is currently placing ${selectedRoadType}`);
+  pHtmlMsg.style('color', 'deeppink');
+}
+
+function draw() {
+  background(220);
+
+  
+  console.log(`The current type of this tile is: ${grid[2][0].type}`);
+  
+  // Render the proper screen for the game state we're in
+  switch(gameState) {
+    case "NEW_GAME":
+      // TODO
+      break;
+    case "LEVEL_ONE":
+      drawGrid(grid)
+      break;
+    case "LEVEL_TWO":
+      // TODO for when we expand to have multiple levels
+      break;
+    case "GAME_OVER":
+      // TODO
+      break;
+    default:
+      // TODO
+  }
+}
+
+// Toggle the drawing canvas
+// TODO: map to controller keys (currently maps to keyboard)
+function keyPressed() {
+  if (key === 'r') {
+    canvas2_obj.showCanvas();
+  } else if (key === 'c') {
+    canvas2_obj.hideCanvas();
+  }
+
+  /* FOR CONNECTING TO CONTROLLER INPUT */
+  // Different types of tile user can place down:
+  //   1. road with sidewalk
+  //   2. road with bus stop  (for after prototype)
+  if (key == '1') {
+    selectedRoadType = "sidewalk"
+  } else if (key == '2') {
+    selectedRoadType = "bus stop"
+  }
+}
+
+function drawGrid(grid) {
+  // Draw the grid
+  for(let i = 0; i < canvasHeight / gridSize; i++) {    
+    for (let j = 0; j < canvasWidth / gridSize; j++) {
+      grid[i][j].draw();
+    }
+  }
+  
+  // Highlight the tile that the mouse is currently hovering over
+  curr_column = floor(mouseX / 40);
+  curr_row = floor(mouseY / 40);
+  curr_column = constrain(curr_column, 0, grid.length - 1);
+  curr_row = constrain(curr_row, 0, grid[0].length - 1);
+  grid[curr_row][curr_column].highlight();
+  highlighted_columnn = curr_column;
+  highlighted_row = curr_row;
+  // chooseTile();
+}
+
+function mouseClicked() {
+  // do something with the highlighted
+  // FOR Prototype 1, just allow player to place different road types
+  changeRoadType(selectedRoadType);
+  // flood_fill();
+}
+
+function changeRoadType(newType) {
+  let curr_square = grid[highlighted_row][highlighted_columnn];
+  curr_square.switchType(newType)
+
+  pHtmlMsg = createP(`Player 1 is currently placing ${selectedRoadType}`);
+  pHtmlMsg.style('color', 'deeppink');
+}
+
+function flood_fill() {
+  // TODO: Change logic so that when you press, if it is a road type then
+  // it can be changed to whatever road type our cursor is currently.
+  let curr_square = grid[highlighted_row][highlighted_columnn];
+  let curr_type = curr_square.type;
+  
+  if (curr_square.type != "empty") {
+    return;
+  }
+
+  const queue = [[highlighted_row, highlighted_columnn]];
+  
+  while (queue.length) {
+    const [row, col] = queue.shift();
+    if(grid[row][col].type === "empty") {
+        grid[row][col].type = "road";
+        if(row-1 >= 0) queue.push([row-1, col]);  //up
+        if(row+1 < grid.length) queue.push([row+1, col]);  //down
+        if(col+1 < grid[0].length) queue.push([row, col+1]);  //right
+        if(col-1 >= 0) queue.push([row, col-1]);  //left
+    }
+  }
+}
+
+// joy stick version
+function chooseTile() {
+  if (abs(moveY) >= 2) {
+   curr_row += Math.sign(moveY); // + or - 1
+   curr_row = constrain(curr_row, 0, grid.length - 1);
+   moveY = 0;
+  }
+  if (abs(moveX) >= 2) {
+    curr_column += Math.sign(moveX); // + or - 1
+    curr_column = constrain(curr_column, 0, grid[0].length - 1);
+    moveX = 0;
+  }   
+  // console.log(curr_column, curr_row);
+  grid[curr_row][curr_column].highlight();
+}
\ No newline at end of file
--- a/sketch_merged.js
+++ b/sketch_merged.js
--- a/OldVer/style.css
+++ b/OldVer/style.css
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
--- a/TileClass.js
+++ b/TileClass.js
+// Class representing the properties of an isometric
+// game tile. x/y grid represent coordinates in the matrix
+// while x/y screen represent coordinates in relation to the
+// computer screen resolution
+class TileClass {
+    constructor(x_grid, y_grid, x_screen, y_screen, sprite) {
+        this.x_grid = x_grid;
+        this.y_grid = y_grid;
+
+        this.x_screen = x_screen;
+        this.y_screen = y_screen;
+
+        this.sprite = sprite;
+    }
+
+    // Display the provided sprite at the tile's screen coordinates
+    display(sprite) {
+        image(sprite, this.x_screen, this.y_screen);
+    }
+}
--- a/TileDefault.png
+++ b/TileDefault.png