Tile Rendering

Developer
Kevin Giguere
Size
7,867 Kb
Views
16,192
  1. Tile Rendering Previews
  2. Tile Rendering HTML Codes
  3. Tile Rendering CSS Codes
  4. Tile Rendering JS Codes

How do I make an tile rendering?

Experiment on rendering tiles. What is a tile rendering? How do you make a tile rendering? This script and codes were developed by Kevin Giguere on 30 November 2022, Wednesday.

Tile Rendering Previews
IQ Test

Tile Rendering - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tile Rendering</title> <link rel='stylesheet prefetch' href='css/lrpqxy.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="game"> <div class="controls"> <p class="info">Click on the squares down below to toggle a Tile</p> <div class="buttons"></div>
</div>
<canvas id="myCanvas" width="600" height="300">
</div>
<div class="links"> <a href="https://codepen.io/kevthunder/pen/VavbVW" class="prev" target="_top"> <span class="collection">Game Development Experiments</span> <span class="number">pt 8</span> : <span class="title">Wiring</span> </a> <a href="https://codepen.io/kevthunder/pen/qZNRzm" class="next" target="_top"> <span class="collection">Game Development Experiments</span> <span class="number">pt 10</span> : <span class="title">Brawl</span> </a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/kevthunder/spark-starter/7a333504/dist/spark-starter.min.js'></script>
<script src='js/lrpqxy.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tile Rendering - Script Codes CSS Codes

body { background: #000; color: #666; position: relative; text-align: center;
}
.game { text-align: left; display: inline-block;
}
#myCanvas { border: 1px solid #222; margin-bottom: 5em;
}
.controls { float: left; width: 10em;
}
.buttons { margin: auto; position: relative; width: 100px; height: 100px;
}
.buttons .tile { position: absolute; cursor: pointer; background: #222; width: 19px; height: 19px;
}
.buttons .tile.full { background: #666;
}
.links { text-align: left;
}

Tile Rendering - Script Codes JS Codes

(function() { var $, Element, Tile, TileContainer, TransformedDraw, border, canvas, context, draw, j, k, redraw, tileSize, tiles, x, y, extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, hasProp = {}.hasOwnProperty; $ = jQuery; Element = this.Spark.Element; canvas = document.getElementById('myCanvas'); context = canvas.getContext('2d'); tileSize = 80; border = tileSize * 0.2; context.strokeStyle = "#116"; context.lineWidth = 2; context.fillStyle = "#333"; TransformedDraw = (function() { function TransformedDraw(context1, matrix) { this.context = context1; this.matrix = matrix; } TransformedDraw.prototype.transformPoint = function(x, y) { if (this.matrix != null) { return { x: x * this.matrix[0] + y * this.matrix[1] + this.matrix[2], y: x * this.matrix[3] + y * this.matrix[4] + this.matrix[5] }; } else { return { x: x, y: y }; } }; TransformedDraw.prototype.moveTo = function(x, y) { var pt; pt = this.transformPoint(x, y); return this.context.moveTo(pt.x, pt.y); }; TransformedDraw.prototype.lineTo = function(x, y) { var pt; pt = this.transformPoint(x, y); return this.context.lineTo(pt.x, pt.y); }; TransformedDraw.prototype.autoArcTo = function(x1, y1, x2, y2, x3, y3) { var a, b, middle, pt1, pt2, pt3, radius; pt1 = this.transformPoint(x1, y1); pt2 = this.transformPoint(x2, y2); pt3 = this.transformPoint(x3, y3); middle = { x: (pt1.x - pt3.x) / 2 + pt3.x, y: (pt1.y - pt3.y) / 2 + pt3.y }; a = Math.sqrt((middle.x - pt2.x) * (middle.x - pt2.x) + (middle.y - pt2.y) * (middle.y - pt2.y)) / 2; b = Math.sqrt((pt1.x - pt3.x) * (pt1.x - pt3.x) + (pt1.y - pt3.y) * (pt1.y - pt3.y)) / 2; radius = a * b / a * 1.125; return this.context.arcTo(pt2.x, pt2.y, pt3.x, pt3.y, radius); }; TransformedDraw.prototype.arcTo = function(x1, y1, x2, y2, radius) { var pt1, pt2; pt1 = this.transformPoint(x1, y1); pt2 = this.transformPoint(x2, y2); return this.context.arcTo(pt1.x, pt1.y, pt2.x, pt2.y, radius); }; return TransformedDraw; })(); this.draw = draw = { lineJoinL: function(context, transformMatrix) { var trans; if (transformMatrix == null) { transformMatrix = null; } trans = new TransformedDraw(context, transformMatrix); trans.moveTo(0, 0); trans.lineTo(0, border); trans.lineTo(tileSize / 2, border); trans.lineTo(tileSize / 2, 0); trans.lineTo(0, 0); context.stroke(); return context.fill(); }, lineJoinR: function(context, transformMatrix) { var trans; if (transformMatrix == null) { transformMatrix = null; } trans = new TransformedDraw(context, transformMatrix); trans.moveTo(0, 0); trans.lineTo(border, 0); trans.lineTo(border, tileSize / 2); trans.lineTo(0, tileSize / 2); trans.lineTo(0, 0); context.stroke(); return context.fill(); }, concaveJoin: function(context, transformMatrix) { var trans; if (transformMatrix == null) { transformMatrix = null; } trans = new TransformedDraw(context, transformMatrix); trans.moveTo(0, 0); trans.lineTo(tileSize / 2, 0); trans.lineTo(tileSize / 2, border); trans.lineTo(border * 2, border); trans.autoArcTo(border * 2, border, border, border, border, border * 2); trans.lineTo(border, border * 2); trans.lineTo(border, tileSize / 2); trans.lineTo(0, tileSize / 2); trans.lineTo(0, 0); context.stroke(); return context.fill(); }, convexJoin: function(context, transformMatrix) { var trans; if (transformMatrix == null) { transformMatrix = null; } trans = new TransformedDraw(context, transformMatrix); trans.moveTo(0, 0); trans.lineTo(border, 0); trans.autoArcTo(border, 0, border, border, 0, border); trans.lineTo(0, border); trans.lineTo(0, 0); context.stroke(); return context.fill(); }, fullTile: function(context, transformMatrix) { var trans; if (transformMatrix == null) { transformMatrix = null; } trans = new TransformedDraw(context, transformMatrix); trans.moveTo(0, 0); trans.lineTo(0, tileSize); trans.lineTo(tileSize, tileSize); trans.lineTo(tileSize, 0); trans.lineTo(0, 0); context.stroke(); return context.fill(); }, drawCodeFunct: function(code) { var corner, corners, funct, i, results; if (code === 'full') { return 'fullTile'; } else { corners = draw.decodeCornerCode(code); results = []; for (i in corners) { corner = corners[i]; results.push(funct = corner.leftFull && corner.rightFull ? 'concaveJoin' : corner.leftFull ? 'lineJoinL' : corner.rightFull ? 'lineJoinR' : corner.full ? 'convexJoin' : void 0); } return results; } }, drawCode: function(context, code, transformMatrix) { var corner, corners, funct, i, trans; if (transformMatrix == null) { transformMatrix = null; } if (code === 'full') { draw.fullTile(context, transformMatrix); } else { corners = draw.decodeCornerCode(code); for (i in corners) { corner = corners[i]; funct = corner.leftFull && corner.rightFull ? draw.concaveJoin : corner.leftFull ? draw.lineJoinL : corner.rightFull ? draw.lineJoinR : corner.full ? draw.convexJoin : void 0; if (funct != null) { trans = draw.cornerTranform[i]; if (transformMatrix != null) { trans = draw.mergeTranform(trans, transformMatrix); } funct(context, trans); } } } return null; }, decodeCornerCode: function(code) { var corner, corners, i, results; corners = [ { l: 0, r: 3 }, { l: 1, r: 0 }, { l: 2, r: 1 }, { l: 3, r: 2 } ]; results = []; for (i in corners) { corner = corners[i]; results.push({ full: (code & Math.pow(2, parseInt(i) + 4)) !== 0, leftFull: (code & Math.pow(2, corner.l)) !== 0, rightFull: (code & Math.pow(2, corner.r)) !== 0 }); } return results; }, cornerTranform: [[1, 0, 0, 0, 1, 0], [0, -1, tileSize, 1, 0, 0], [-1, 0, tileSize, 0, -1, tileSize], [0, 1, 0, -1, 0, tileSize]], perspectiveTranform: [1, 1, -tileSize, -0.5, 0.5, tileSize * 2], mergeTranform: function(m1, m2) { return [m1[0] * m2[0] + m1[3] * m2[1], m1[1] * m2[0] + m1[4] * m2[1], m1[5] * m2[1] + m1[2] * m2[0] + m2[2], m1[0] * m2[3] + m1[3] * m2[4], m1[1] * m2[3] + m1[4] * m2[4], m1[5] * m2[4] + m1[2] * m2[3] + m2[5]]; }, cache: {} }; Tile = (function(superClass) { extend(Tile, superClass); function Tile(x4, y4, btn) { this.x = x4; this.y = y4; this.btn = btn; if (this.btn) { this.drawButton(); } this.full = this.btn; } Tile.properties({ full: { change: function() { if (this.buttonDisplay != null) { return this.buttonDisplay.toggleClass('full', this.full); } } } }); Tile.prototype.drawButton = function() { var newDiv; newDiv = document.createElement("div"); return this.buttonDisplay = jQuery(newDiv).addClass('tile').addClass(this.type).appendTo('.buttons').css({ top: this.y * 20, left: this.x * 20 }).click((function(_this) { return function() { _this.full = !_this.full; return redraw(); }; })(this)); }; Tile.prototype.draw = function() { var code, trans; code = this.getCornersCode(); trans = [1, 0, this.x * tileSize, 0, 1, this.y * tileSize]; return draw.drawCode(context, code, draw.mergeTranform(trans, draw.perspectiveTranform)); }; Tile.prototype.getCornersCode = function() { var adj, adjacents, code, corner, corners, i, next; if (this.full) { return 'full'; } adjacents = [ { x: 0, y: -1 }, { x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 } ]; corners = [ { x: -1, y: -1, l: 0, r: 3 }, { x: 1, y: -1, l: 1, r: 0 }, { x: 1, y: 1, l: 2, r: 1 }, { x: -1, y: 1, l: 3, r: 2 } ]; code = 0; for (i in adjacents) { adj = adjacents[i]; next = tiles.getTile(this.x + adj.x, this.y + adj.y); adj.full = (next != null) && next.full; if (adj.full) { code += Math.pow(2, i); } } for (i in corners) { corner = corners[i]; next = tiles.getTile(this.x + corner.x, this.y + corner.y); corner.full = adjacents[corner.l].full || adjacents[corner.r].full || ((next != null) && next.full); if (corner.full) { code += Math.pow(2, parseInt(i) + 4); } } return code; }; Tile.prototype.getTransparent = function() { return this.type === 'floor'; }; Tile.prototype.remove = function() { return this.display.remove(); }; return Tile; })(Element); TileContainer = (function() { function TileContainer() { this.coords = {}; this.tiles = []; } TileContainer.prototype.addTile = function(tile) { this.tiles.push(tile); if (this.coords[tile.x] == null) { this.coords[tile.x] = {}; } return this.coords[tile.x][tile.y] = tile; }; TileContainer.prototype.getTile = function(x, y) { var ref; if (((ref = this.coords[x]) != null ? ref[y] : void 0) != null) { return this.coords[x][y]; } }; TileContainer.prototype.allTiles = function() { return this.tiles.slice(); }; TileContainer.prototype.clearAll = function() { var j, len, ref, tile; ref = this.tiles; for (j = 0, len = ref.length; j < len; j++) { tile = ref[j]; tile.remove(); } this.coords = {}; return this.tiles = []; }; return TileContainer; })(); this.tiles = tiles = new TileContainer(); for (x = j = 0; j <= 4; x = ++j) { for (y = k = 0; k <= 4; y = ++k) { tiles.addTile(new Tile(x, y, x !== 0 && y !== 0 && x !== 4 && y !== 4)); } } tiles.getTile(2, 2).full = false; tiles.getTile(2, 3).full = false; redraw = function() { var l, len, ref, results, tile; context.clearRect(0, 0, 600, 300); context.beginPath(); ref = tiles.allTiles(); results = []; for (l = 0, len = ref.length; l < len; l++) { tile = ref[l]; results.push(tile.draw()); } return results; }; redraw();
}).call(this);
Tile Rendering - Script Codes
Tile Rendering - Script Codes
Home Page Home
Developer Kevin Giguere
Username kevthunder
Uploaded November 30, 2022
Rating 3
Size 7,867 Kb
Views 16,192
Do you need developer help for Tile Rendering?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Giguere (kevthunder) Script Codes
Name
Targeting
Fog of war
BaseClass
Acronym Generator
Story
Star cluster
Line-of-sight
Giving orders
Interactivity
Pen-Navigation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!