Как то мне срочно надо было создать карты для игры на 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]
Комментариев нет:
Отправить комментарий