линия

Главная

пятница, 11 декабря 2015 г.

Генератор 2D карты на JavaScript + PHP

Как то мне срочно надо было создать карты для игры на AndEngine GLES1. Координаты хранились в XML формате.Перебрал кучу редакторов но так и не смог получить требуемый результат. Долго мудрить не стал, запустил NetBeans и накидал по быстрому генератор 2D карты для платформера на JavaScript





Задача: получить XML файл такого вида:



 <level width="799" height="799">
 <entity x="235" y="346" type="Fly1" />
 <entity x="101" y="454" type="Fly1" />
 <entity x="110" y="300" type="Osa" />
 <entity x="6" y="292" type="Kaktus1" />
 <entity x="138" y="228" type="Palka" />
 <entity x="518" y="303" type="Palka" />
 <entity x="315" y="622" type="Rope" />
 <entity x="56" y="578" type="Box1" />
 <entity x="467" y="575" type="Box1" />
 <entity x="635" y="369" type="Finish" />
 </level>


Итак, имеем такую структуру приложения

В папку map будут сохранятся наши карты. Название карты можно задать.
В папку Img кидаем наши изображения.
Файл index.php.

[php]
<?php


$path = "img/"; // каталог изображений
$dir = opendir($path);
$i=0;
while(($file = readdir($dir)) !== false)
{
 if($file=='.' || $file=='..' ) continue;
 $name='';
 $arr = explode('.', $file); 
 $name = basename($arr[0]);
 $class='';
 $click='';
 $i++;
 if($name=='Platform'){
 $class='db_click';
 $click='updateDom('.$i.')';
 }
 $IMG.='<img class="draggable '.$class.'" id="'.$i.'" title="'.$name.'" src="img/'.$file.'" onclick="'.$click.'">';
}
closedir($dir);
include 'cont.php';

?>

[/php]
main.js
[javascript]
 var y=0;
 var x =0;
 var _this=null;
$(document).ready(function(){
 $('.map').mousemove(function(e){
 x = e.pageX;
 y = e.pageY;
 // l(x+' : '+y);
 });
});



/*
 * Устанавливает ширину карты
 */
function setwidth(){
 $('#map')
 .css('width' ,$('#width').val()).css('height',$('#height').val());
 
}
 /*
 * Функция сохранения карты
 */
function save(){
 var sel = $('#map').find('img'); 
 console.log(sel);
 // перебор результатов
 var arr=[];
 arr.push( {
 map_name:$('#inp_map_name').val(),
 width:parseInt($('#map').width()),
 height:parseInt($('#map').height())});
 // Высота карты
 var h = $('#map').height()*1 ;
 var width=0;
 var height=0;
 
for(var i=0; i<sel.length; i++) {
 // Для некоторых изображений нужна корректировка координат
 var coorect = 0;
 var name=$(sel[i]).attr('title'); 
 width=0;
 height=0;
 if(name=="Finish")coorect= 46;
 if(name=="Platform"){
 width = parseInt($(sel[i]).width());
 height = parseInt($(sel[i]).height());
 }
 // вычисляем координаты
 var coord = $(sel[i]).offset();
 var x = coord.left;
 var y = h - coord.top -coorect;
 arr.push({ 
 name:name , 
 x:parseInt( x ), 
 y: parseInt( y ),
 w:width,
 h:height
 } ); 
}// for
// вывод в консоль
l(arr);
 // Отправляев в бегэнд (где живет Хоббит)
 $.ajax({type: "POST",data: $.extend({}, arr),url: 'ajax.php', 
 success: function (data, textStatus) {l(data);} ,
 error:function(err){l(err);}});
}


/*
 * После копирования изображения 
 * нужна повесить на него событие.
 */
function updateDom(id){
 $('#'+id).removeAttr('onCLick');
 $(".db_click").dblclick(function() {
 $('#params').addClass('ready');
 _this = this;
 $('#params_title').html( $(this).attr('title'));
});
}

var ccc=0;

 /*
 * Реализзуем драгндроп
 */
$(function() {
$("#phone").draggable(); 
$("#menu").draggable();
 
 
 $(".map").droppable({
 accept: '.draggable',
 drop: function(event, ui) {
 var clon = $(ui.draggable).clone();
 $(this).append(clon);
 $("#map .draggable").addClass("item").css('position','absolute').css('position','absolute').css('left',x).css('top',y);;
 
 $(".item").removeClass("ui-draggable draggable");
 
 $(".item").draggable({
 containment: 'parent'
 });
 }
 });
 $(".draggable").draggable({
 helper: 'clone'
 }); 
 
 $('.draggable2').draggable({
 helper: "ui-resizable-helper",
 stop: function() {
 }
 }); 
 //приемник 
});

//------------------
function l(s){ console.log(s);}

[/javascript]
сам шаблон проекта
[html]
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Skok</title>
 <link type="text/css" href="css/main.css" rel="stylesheet"/> 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
 <script type="text/javascript" src="main.js"></script>
 </head>


<body>
 <!-- Карта -->
 <div class="map" id="map">
 </div>
 
 
 <!-- Панель обьектов -->
 <div class="menu" id="menu">
 <div class="comteiner"> 
 ширина <input id="width" class="input"><br>
 высота <input id="height" class="input">

 <a onclick="setwidth()" class="button">"задать ширину"</a> 
 </div>
 <div>
 <br>
 название карты
 <input type="text" id="inp_map_name" class="input">
 <a onclick="save()" class="button">Сохранить</a></div>
 <div id="imagarea">
 <?= $IMG; ?>
 </div>


 <br>
 <div id="platforms">
 <center>Платформы</center>
 <div class="platform draggable" style="background: url(img/platform.png); width:100px; height: 50px;" ></div>
 </div> 
 <div id="levels">

 </div> 
 </div>
 <!-- ДИСПЛЕЙ ТЕЛЕФОНА -->
 <div id="phone" class="item" 
 style="position: absolute; 
 width:800px;
 height:480px;
 border-radius: 5px; 
 border: 2px solid red">
 Дисплей телефона
 </div>
 
</body>
</html>
[/html]

Комментариев нет:

Отправить комментарий