Спасибо, еще один вопрос назрел: что лучше юзать для браузерной игры (тоесть не только чата), в которой надо записывать и считывать много разной инфы. Например игроку видно поле 30х30, на нем 400 предметов, у которых есть свои свойства и т.д. Некоторые из них изменяються в рилтайме. Mysql или NoSql типа MongoDB, CouchDB и т.д.??? До этого имел опыт общения только с мускулом))
Сообщение отредактировал Sektoid - Воскресенье, 27 Ноября 2011, 04:01
Спасибо, значит останусь на мускуле. Хотя почитал о монгоДБ - вроде показалось что больше подходит для этого. Там и данные в JSON и скорость говорят выше... С нодом наконец-то разобрался, все работает Хм, вот отправляю я на запущеный сервер нода user_id чтоб в ответ получить аву, координаты и управление правильным персонажем. Но насколько я знаю javascript можно изменить на клиентской стороне(можно же?). Как проверить что это именно тот пользователь? Есть идея при логине записывать айпи на сам сервак нода в глобальную переменную, которая будет создаваться для каждого клиента, который онлайн, и при каждом запросе обращаться к ней и проверять его. Какие еще есть варианты?
Сообщение отредактировал Sektoid - Воскресенье, 04 Декабря 2011, 06:36
Да. Айпи у многих пользователей меняется, только если по маку (мак адрес сетевой карты - уникален). Есть масса способов проверки... Например, при авторизации записывать ид сессии, а далее по нему проверять... Можно при авторизации записать ид в сессию, потом по нему проверять..
client.query( ('SELECT id_user, user_sector_x, user_sector_y FROM '+TABLES_USERS+' WHERE online = 1'), function(err, results, fields) { if (err) {throw err;}
io.sockets.on('connection', function (socket) { socket.emit('infa', results); });
Клиент:
Code
var socket = io.connect('http://127.0.0.1:8080'); socket.on('infa', function (data) {
});
Как теперь эту дату перевести в обьекты JS? Ато в консоли пишет что-то типа "Сокет отправлен: {"name":"infa","args":[[{"id_user":1,"user_sector_x":0,"user_sector_y":0}]]} " Пробовал var ddd = JSON.parse(data); не работаеь
Сообщение отредактировал Sektoid - Понедельник, 05 Декабря 2011, 00:54
Добавлено (26.12.2011, 01:08) --------------------------------------------- и эта тоже решена)
Добавлено (08.01.2012, 01:20) --------------------------------------------- Так, с серверной частью пока-что все норм - нода при запуске считывает инфу с мускула, работает с ней и при закрытии потом будет отправлять инфу обратно в базу. Авторизация похожая на это
Quote (anton-gar)
Например, при авторизации записывать ид сессии, а далее по нему проверять...
Потом заморочусь с куками. Игроки сейчас могут перемещаться по карте, видеть перемещения друг друга и т.д. Теперь встал вопрос о том, чтоб сделать это все плавно и красиво, с анимацией и эффектами. Вот тут советовали jquery. Кто знает какие плагины к нему будут полезны при разработке браузерки рилтайм-рпг? Скоро начну его изучать, но намного легче будет если кто-то ткнет носом в самые полезные вещи И спасибо всем еще раз, кто помогал - без вас я наверное забил бы на игру, как делают 95% людей, которые решают сделать игру с нулевыми знаниями программирования.
Сообщение отредактировал Sektoid - Воскресенье, 08 Января 2012, 07:28
Хм, я вот думаю как лучше сделать - чтоб игрок всегда был в центре и карта, динамически подгружаясь, двигалась за ним, или чтобы карта была фиксированой и игрок двигался по ней? Но получаеться, что второй вариант требует разбить мир на локации?
И еще - видел во флэше такую фичу - там есть одна анимация персонажа, и когда на него навешиваешь шмотки, то анимация не изменяеться, но шмотки подстраиваються под модель персонажа и двигаються тоже. Такое реально сделать без флеша и если да, то насколько сильно такие штуки грузят клиент? Допустим можно сделать 20 таких анимаций 60х60 пикселей и чтоб это все не тормозило? У меня по этому поводу пока-что есть только одна садо-мазо идея - делать анимацию сначала спрайтов персонажа, потом поверх него еще одну на каждую шмотку, ну кроме тех, что закрывают друг друга и заставить их двигаться синхронно
Сообщение отредактировал Sektoid - Понедельник, 09 Января 2012, 00:49
Хм, я вот думаю как лучше сделать - чтоб игрок всегда был в центре и карта, динамически подгружаясь, двигалась за ним, или чтобы карта была фиксированой и игрок двигался по ней? Но получаеться, что второй вариант требует разбить мир на локации?
Как тебе удобно и какой вариант ты сможешь осилить.
Quote (Sektoid)
И еще - видел во флэше такую фичу - там есть одна анимация персонажа, и когда на него навешиваешь шмотки, то анимация не изменяеться, но шмотки подстраиваються под модель персонажа и двигаються тоже. Такое реально сделать без флеша и если да, то насколько сильно такие штуки грузят клиент? Допустим можно сделать 20 таких анимаций 60х60 пикселей и чтоб это все не тормозило? У меня по этому поводу пока-что есть только одна садо-мазо идея - делать анимацию сначала спрайтов персонажа, потом поверх него еще одну на каждую шмотку, ну кроме тех, что закрывают друг друга wacko и заставить их двигаться синхронно biggrin
Я думаю там рисуются каждое положение шмотки и потом в зависимости от действия воспроизводятся.
Нашел много интересных изо движков на javascript\jquery, но большинство либо обфусцированы так, что хрен че поймешь если захочешь изменить, либо не подходят по некоторым критериям, либо слишком грузят систему. Так что ковыряния продолжаються))
Вот кстати маленький кусок кода, который я не могу понять почему рисует тайлы не ровно, а так: ниже\выше\ниже\выше\ниже\выше буквально на 1-2 пикселя. Из-за этого вместо сплошной "воды" образуеться зигзаго-образная вода. Можно, конечно обрезать по 1 пикселю с обеих сторон и оно будет выглядеть более гладко, но все же хочеться узнать что это за глюк)) Может кто поймет в чем дело... example.html:
<script> function debug(msg) { document.getElementById('debug').innerHTML = msg; }
var tileDict = ['grass.png', 'water.png']; var tileImg = []; var map = [[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0],[1,0,0,0,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0]]; for (var i = 0; i < tileDict.length; ++i) { (function (i) { var img = new Image(); img.onload = function () { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; canvas.getContext('2d').drawImage(this, 0, 0); tileImg[i] = { canvas: canvas, img: img }; }; img.src = tileDict[i]; })(i); }
var sprites = []; var focussed = -1; var ctx;
function draw_frame() { for (var i = 0; i < sprites.length; ++i) { var sprite = sprites[i]; var img = sprite.img.canvas; ctx.drawImage(img, sprite.x, sprite.y); if (i == focussed) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; ctx.drawImage(img, sprite.x, sprite.y); ctx.restore();
} } }
function draw_frame_delta(new_focus, old_focus) { if (new_focus == old_focus) return;
for (var i = sprites.length-1; i >= 0; --i) { var sprite = sprites[i]; if (sprite.x <= x && sprite.y <= y && sprite.x + sprite.w > x && sprite.y + sprite.h > y) { var dx = Math.floor(x - sprite.x); var dy = Math.floor(y - sprite.y); var imgdata = sprite.img.canvas.getContext('2d').getImageData(dx, dy, 1, 1); if (imgdata.data[3] > 127) { focussed = i; return; } } } focussed = -1; }
function setup_sprites() { sprites = []; for (var x = 0; x < map.length; x++) { for (var y = 0; y < map[x].length; y++) { var img = tileImg[map[x][y]]; var sprite = { x: ((x-y)*25) + 256, y: ((x+y)*25/2), w: img.img.width, h: img.img.height, img: img, }; sprites.push(sprite); }}
draw_frame(); }
window.onload = function () { var canvas = document.getElementById('c'); ctx = canvas.getContext('2d'); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
setup_sprites();
var mousemoveTimeout; canvas.addEventListener('mousemove', function (evt) { var x = evt.pageX, y = evt.pageY; x -= canvas.offsetLeft; y -= canvas.offsetTop;
//debug(x+' '+y); if (mousemoveTimeout) clearTimeout(mousemoveTimeout);
setTimeout(function () { var old_focussed = focussed; var t0 = new Date(); mouse_move(x, y); var t1 = new Date(); draw_frame_delta(focussed, old_focussed); var t2 = new Date(); debug('Frame processing time: '+(t2-t0)+'ms'); }, 10); }, false); } </script>
Картинки закинуть в ту же папку
Вот так получается:
А и еще если в setup_sprites написать вместо
Code
x: ((x-y)*25) + 256,
вот так
Code
x: ((x-y)*img.img.height) + 256,
, то тайлы рисуються еще более криво, хотя по сути img.img.height = 25
Сообщение отредактировал Sektoid - Воскресенье, 15 Января 2012, 20:36
Тайлы земли тоже рисуются ненормально, просто у них нету черной границы и поэтому это не заметно сразу - посмотри на скриншот внизу, там где тайлы земли идут в два ряда. Там где они заканчиваются можно увидеть, что они идут не ровно. Думал это из-за того, что земля больше, чем вода - не помогло. Попробовал сделать поле только из воды, которая 50х25 - та же фигня.
Добавлено (15.01.2012, 22:39) --------------------------------------------- Точнее помогло, но только частично. Теперь вот эта проблема решена:
Quote (Sektoid)
А и еще если в setup_sprites написать вместо
Code
x: ((x-y)*25) + 256,
вот так
Code
x: ((x-y)*img.img.height) + 256,
, то тайлы рисуються еще более криво, хотя по сути img.img.height = 25
Но как и раньше они выше\ниже\выше\ниже на 1 пиксель.
Сообщение отредактировал Sektoid - Воскресенье, 15 Января 2012, 22:40
Я так тоже пробовал, но это обман зрения За счет того, что 1 пиксель сьедаеться и они перекрывают друг друга + цвет у них одинаковый, так что не сразу можно заметить)) Но опять если посмотреть на границу нижних тайлов, то будет такое:
Сообщение отредактировал Sektoid - Воскресенье, 15 Января 2012, 23:12
Эм... так мне же нужна изометрия. Просто не представляю как отрисовать изометрическую карту не ромбом? Ну тоесть понятно, что можно сделать область видимости в форме прямоугольника, но всеравно это будет урезаный ромб. Во всех изо движках встречал только ромб. Ну можно еще гексы использовать, но это еще сложнее.
Добавлено (16.01.2012, 00:01) --------------------------------------------- Ладно, буду обрезать каждый тайл на 1 пиксель Решение не идеальное, но по-другому я пока-что не знаю как сделать
Сообщение отредактировал Sektoid - Понедельник, 16 Января 2012, 00:06
for (var i = 0; i < tileDict.length; ++i) { (function (i) { var img = new Image(); img.onload = function () { var canvas = document.createElement('canvas'); canvas.width = this.width; // = 50, числом тоже пробовал ставить canvas.height = this.height; // = 25, числом тоже пробовал ставить canvas.getContext('2d').drawImage(this, 0, 0); tileImg[i] = { canvas: canvas, img: img }; }; img.src = tileDict[i]; })(i); }
и
Quote (Sektoid)
var sprite = { x: ((x-y)*25) + 256, y: ((x+y)*25/2), w: img.img.width, //числом тоже пробовал ставить h: img.img.height, //числом тоже пробовал ставить img: img, };
Но получаеться вот такое.
А с grass.png, у которого на 1 пиксель больше высота, вот так.
И не видно разрезов из-за того, что на 1 пиксель больше чем надо и он их закрывает. Поэтому я в прошлом сообщении писал, что придеться обрезать тайлы на 1 пиксель (либо рисовать их на 1 пиксель большими, чем надо).
Quote (Assasin)
А вот отрисовка карты как я предлагал
А как там сектора считаются? Ну тоесть у меня 0,0 находиться на вершине ромба и Х и У расходяться по сторонам. А там как? Мне впринципе твой вариант больше нравиться, поскольку не надо лишний раз обрезать карту чтоб подогнать её под прямоугольное окно))
Сообщение отредактировал Sektoid - Понедельник, 16 Января 2012, 16:56
1 - 0,0 2 - 0,1 3 - 0,2 31 - 1,0 32 - 1,1 и т.д. Вот код
Code
function setup_sprites() { sprites = []; var _tmp = 0; for (var x = 0; x < map.length; x++) { for (var y = 0; y < map[x].length; y++) { var img = tileImg[map[x][y]]; if(y%2!=0){ var sprite = { x: (x*50)+25, y: (y*25)/2, w: 50, h: 25, img: img, }; } else { var sprite = { x: (x*50), y: (y*25)/2, w: 50, h: 25, img: img, }; } sprites.push(sprite); _tmp++; } }
draw_frame(); }
Quote (Sektoid)
Хм, ну вот мой water.png: Тип изображения: png (Формат изображений PNG) Ширина: 50 пикселов Высота: 25 пикселов
Нет, нет. Не параметры картинки должны такими быть, а сам тайл должен быть нарисован с высотой 25 и шириной 50. Возможно он где то на 1 пиксель кривой, поэтому получается смещение.
и заставить их двигаться синхронно 
Решение не идеальное, но по-другому я пока-что не знаю как сделать 
