|
Реализация изометрической карты
| |
| maker-rus | Дата: Понедельник, 08 Июля 2013, 12:15 | Сообщение # 1 |
Гений
Сейчас нет на сайте
| У меня такой вариант реализации карты, но я не знаю как сделать загрузку каждой ячейки - карты, со своей картинкой. Кто может подсказать варианты решения?
Код
$(document).ready(function(){
var element = document.getElementById('canvas');
element.width = 640;
element.height = 640;
var ctx = element.getContext('2d');
var image = new Image();
image.src = 'img/img_11.gif';
var width = 80;
var height = 80;
image.onload = function() {
function draw(x, y) {
ctx.drawImage(image, x - width / 2, y - height / 2, width, height);
}
var Xo = 0;
var Yo = 0;
var C = Math.floor(element.width / 2);
var Xc = 0;
var matrixHeight = 8; // количество ячеек по вертикали
var matrixWidth = 8; // количество ячеек по горизонтали
for(var y = 0; y < matrixHeight; y++) {
Yo = (height / 4) * y;
Xc = C - (width / 2 * y);
for(var x = 0; x < matrixWidth; x++) { //Отрисовка ячеек
Xo = Xc + (x * (width / 2));
Yo += height / 4;
draw(Xo, Yo);
}
}
}
}); |
|
|
| |
| Assasin | Дата: Понедельник, 08 Июля 2013, 23:05 | Сообщение # 2 |
web-coder
Сейчас нет на сайте
| Создаешь объект, в котором прописаны все ячейки и их типы
Код var mapTile = {"0,0":"0","0,1":"1","0,2":"2"};
где "0,0" - "x,y",
а "0", "1", "2" - тип ячейки. К примеру 0 - вода, 1 - земля, 2 - скалы.
Затем в своем цикле создаешь Image и в зависимости от типа указываешь url к картинкам.
Это пример в лоб, т.к. при каждой итерации будет создаваться новая картинка. Но главное что бы ты понял суть. Если поймешь, то подключишь потом кеширование и будешь тянуть картинки с кеша, а не подгружать каждый раз. Либо картинку можно сделать одной и вырезать определенные её области и отрисовывать на карте.
|
|
|
| |
| maker-rus | Дата: Четверг, 11 Июля 2013, 19:02 | Сообщение # 3 |
|
Гений
Сейчас нет на сайте
| Assasin, благодарю за ответ.
Цитата Создаешь объект, в котором прописаны все ячейки и их типы
В ручную прописывать можно, если карта будет маленькая, но у меня другой случай. Я хотел, как вариант, доставать из базы ссылки на картинки. А потом через цикл каждой ячейке выдавать url. Но четыре дня не могу понять, как это реализовать. Не посоветуешь, как тут быть?
Может кто знает, какие библиотеки для построения изометрии?Добавлено (10.07.2013, 14:43)
---------------------------------------------
Понятно, здесь нет компетентных людей. Если сам найду решение - отпишусь, может кому пригодится. Добавлено (11.07.2013, 19:02)
---------------------------------------------
Тему можно закрывать, вопрос я сам решил.
Вот мой вариант, если кому то нужно.
JS
Цитата window.onload = function()
{
var element = document.getElementById('map_view');
element.width = 640;
element.height = 640;
var ctx = element.getContext('2d');
var map = {
id_map: 0,
tile_width: 80,
tile_height: 80,
w_cell: 8,
h_cell: 8
}
var image = new Image();
var width = map.tile_width;
var height = map.tile_height;
function draw(x, y, image) {
ctx.drawImage(image, x - width / 2, y - height / 2, width, height);
}
var mapCord = new Array();
function insertArray() {
for (var i = 0; i < 8; i++){
mapCord[i] = new Array();
for(var j = 0; j < 8; j++)
{
map.id_map = $.ajax({
url: "load.php",
data: "x="+i+"&y="+j,
async: false
}).responseText;
mapCord[i][j] = "img/env_"+map.id_map+".gif"
}
}
}
insertArray();
var Xo = 0;
var Yo = 0;
var C = Math.floor(element.width / 2);
var Xc = 0;
for(var y = 0; y < map.h_cell; y++) {
Yo = (height / 4) * y;
Xc = C - (width / 2 * y);
for(var x = 0; x < map.w_cell; x++) { //Отрисовка ячеек
Xo = Xc + (x * (width / 2));
Yo += height / 4;
image.src = mapCord[x][y];
draw(Xo, Yo, image);
}
}
}
PHP
Цитата
<?php
//Connection to database
$connect = mysql_connect('localhost','root','');
$db = mysql_select_db('namedb');
$x = $_GET['x'];
$y = $_GET['y'];
$sql = mysql_query("SELECT * FROM map WHERE map_x = $x and map_y = $y");
$result = mysql_fetch_array($sql);
echo $result['img_id'];
?>
Если что то непонятно, пишите.
Сообщение отредактировал maker-rus - Среда, 10 Июля 2013, 13:38 |
|
|
| |
| Assasin | Дата: Пятница, 12 Июля 2013, 01:02 | Сообщение # 4 |
|
web-coder
Сейчас нет на сайте
| Не часто тут бываю, отвечать быстро не могу. Твой вариант норм, только не оптимизирован. К примеру 100 игроков и карта 80х80 ячеек. Это получится 80*80*100 = 640000 запросов к базе. Я думаю сервер тебе скажет "привет". Малость изменил код:
JS
Код window.onload = function()
{
var element = document.getElementById('map_view');
element.width = 640;
element.height = 640;
var ctx = element.getContext('2d');
var map = {
id_map: 0,
tile_width: 80,
tile_height: 80,
w_cell: 8,
h_cell: 8
}
var image = new Image();
var width = map.tile_width;
var height = map.tile_height;
function draw(x, y, image) {
ctx.drawImage(image, x - width / 2, y - height / 2, width, height);
}
$.ajax({
url: "load.php",
data: "loc="+loc,
dataType: 'json',
success: function(data) {
renderMap(data);
}
})
function renderMap(mapCord) {
var Xo = 0;
var Yo = 0;
var C = Math.floor(element.width / 2);
var Xc = 0;
for(var y = 0; y < map.h_cell; y++) {
Yo = (height / 4) * y;
Xc = C - (width / 2 * y);
for(var x = 0; x < map.w_cell; x++) { //Отрисовка ячеек
Xo = Xc + (x * (width / 2));
Yo += height / 4;
image.src = mapCord[x][y];
draw(Xo, Yo, image);
}
}
}
}
PHP
Код <?php
//Connection to database
$connect = mysql_connect('localhost','root','');
$db = mysql_select_db('namedb');
$loc = $_GET['loc'];
$sql = mysql_query("SELECT * FROM `map` WHERE `id` = '{$loc}'");
$arr = array();
while($r = mysql_fetch_array($sql)) {
$arr[$r['x']][$r['y']] = $r['img_id'];
}
echo json_encode($arr);
?> |
|
|
| |
| DronCode | Дата: Пятница, 12 Июля 2013, 02:51 | Сообщение # 5 |
Best Byte forever
Сейчас нет на сайте
| Код <?php
//Connection to database
$connect = mysql_connect('localhost','root','');
$db = mysql_select_db('namedb');
$loc = $_GET['loc'];
$sql = mysql_query("SELECT * FROM `map` WHERE `id` = '{$loc}'");
$arr = array();
while($r = mysql_fetch_array($sql)) {
$arr[$r['x']][$r['y']] = $r['img_id'];
}
echo json_encode($arr);
?>
надеюсь это просто пример ибо SQL Inj тебе гарантирован 
и что за конструкция :
Код $arr[$r['x']][$r['y']] = $r['img_id'];
что оно делает (может я просто сонный но помоему ты массиву присваиваешь строку из БД. не надо так.
если хочешь добавить в массив строку то делай так :
Код $arr[$r['x']][$r['y']][] = $r['img_id'];
Занимаюсь программированием на PHP, JavaScript (jQuery), C# (не Unity3d!), Action Script 3.0 (в основном клепаю игрушки под соц сети.), Node.JS
Недавно стал изучать Python.
|
|
|
| |
| maker-rus | Дата: Пятница, 12 Июля 2013, 20:32 | Сообщение # 6 |
|
Гений
Сейчас нет на сайте
| Цитата К примеру 100 игроков и карта 80х80 ячеек.
В моем случае карта строго ограничена 8x8 ячеек, которые видно. И карта практически статична.
Цитата Твой вариант норм, только не оптимизирован.
Первое что пришло в голову. Код конечно будет в будущем изменен.
Что это за loc такой?
---------------------------------------------
Немного переработал код, быстрее грузится страница.
JS
Код window.onload = function()
{
var element = document.getElementById('map_view');
element.width = 640;
element.height = 640;
var ctx = element.getContext('2d');
var map = {
id_map: 0,
tile_width: 80,
tile_height: 80,
w_cell: 8,
h_cell: 8
}
var image = new Image();
var width = map.tile_width;
var height = map.tile_height;
$.ajax({
url: "load.php",
dataType: 'json',
success: function (data)
{
DrawMap(data);
}
});
function draw(x, y, image) {
ctx.drawImage(image, x - width / 2, y - height / 2, width, height);
}
function DrawMap(mapCord)
{
var Xo = 0;
var Yo = 0;
var C = Math.floor(element.width / 2);
var Xc = 0;
for(var y = 0; y < map.h_cell; y++) {
Yo = (height / 4) * y;
Xc = C - (width / 2 * y);
for(var x = 0; x < map.w_cell; x++) { //Отрисовка ячеек
Xo = Xc + (x * (width / 2));
Yo += height / 4;
image.src = mapCord[x][y];
draw(Xo, Yo, image);
}
}
}
}
PHP
Код <?php
//Connection to database
$connect = mysql_connect('localhost','root','');
$db = mysql_select_db('namedb');
$w_cell = 8;
$h_cell = 8;
$map = array();
//$i = map_y
//$j = map_x
for ($i = 0; $i < $h_cell; $i++)
{
for($j = 0; $j < $w_cell; $j++)
{
$sql = mysql_query("SELECT * FROM map WHERE map_x = $j and map_y = $i");
$result = mysql_fetch_array($sql);
$map[$i][$j] = "img/env_".$result['img_id'].".gif";
}
}
echo json_encode($map);
?>
Но меня беспокоит еще такая проблема, что нужно обновить страницу, что бы карта отрендерилась,а иначе пустая страница, как это можно исправить?
Сообщение отредактировал maker-rus - Пятница, 12 Июля 2013, 20:44 |
|
|
| |
|
