Вопросы по Canvas
Изучаю как сделать игрушку на html5 и canvas по мануалу http://habrahabr.ru/post/125857/ Проблема в том, что чел., который писал ман. решил воспользоваться левым фреймворком (CraftyJS). Я решил переписать его без фреймворка и столкнулся с такой проблемой: человек перемещается - соотв. часть холста где он был ранее надо очистить. Но если я это сделаю, я сотру траву тоже. z-index canvas не поддерживает. Как быть?
|
daima,
ну в двух канвасах сделать, либо все точки места позиции перемещения запоминать в буфер - с началом движения -восстанавливаем место где чел был и перирисовываем чела в новое(хотя не спец по канвe) должны быть и методы лучше |
daima, делайте в 2-х canvas'ах - в одном всё, что не изменяется, а во втором - наоборот, всё, что изменяется и перерисовывается... позиционируете канвы друг над другом (они ведь прозрачные) и всё
|
Цитата:
а идея с несколькими канвасами мне почему-то :nono: не нравится |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
допустим у нас стратегия с кучей солдат, которые куда-то несутся или много деревьев и анимированных зданий. Ваять кучу канвасов?
Цитата:
|
Цитата:
Я даж где-т читал, что лучше всего использовать 2 канваса так, как написано выше...и именно 2, а не больше |
Цитата:
посмотрите html код |
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="js/jquery.js" type="text/javascript"> <script src="js/crafty.js" type="text/javascript"> <script src="js/objects/flower.js" type="text/javascript"> <script src="js/objects/bush.js" type="text/javascript"> <script src="js/objects/grass.js" type="text/javascript"> <script src="js/objects/unit.js" type="text/javascript"> <script src="js/objects/player.js" type="text/javascript"> <script src="js/objects/fourway_ai.js" type="text/javascript"> <script src="js/objects/monster.js" type="text/javascript"> <script src="js/scenes/loading.js" type="text/javascript"> <script src="js/scenes/main.js" type="text/javascript"> <script src="js/scenes/win.js" type="text/javascript"> <script src="js/scenes/lose.js" type="text/javascript"> <script src="js/game.js" type="text/javascript"> <link charset="utf-8" media="screen" type="text/css" href="css/game.css" rel="stylesheet"> <title>Simpe RPG</title> </head> <body> <i style="background:url(//www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/0)"></i> <script type="text/javascript" src="//mc.yandex.ru/metrika/watch.js"> <div style="display:none;"> <script type="text/javascript"> </div> <noscript><div><img src="//mc.yandex.ru/watch/9281845%%ut%%" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <div id="cr-stage" style="width: 400px; height: 320px; overflow: hidden; position: relative; background: none repeat scroll 0% 0% rgb(0, 0, 0);"> <div style="position: absolute; z-index: 1;"></div> <canvas width="400" height="320" style="position: absolute; left: 0px; top: 0px;"></canvas> </div> </body> </html> Всего 1 |
Цитата:
http://www.pirateslovedaisies.com/ там их 8
<div id="piratesLoveDaisies">
<canvas id="fallingDaisies1" width="980" height="700" style="position: absolute; top: 0px; "></canvas>
<div id="preloader">
<canvas id="preloaderBar" width="240" height="36"></canvas>
<img src="img/ui/preloaderGraphic.png" width="488" height="386" />
</div>
<canvas id="fallingDaisies2" width="980" height="700" style="position: absolute; top: 0px; "></canvas>
здесь 3 остальные найдете |
хм. надо посмотреть. пока что вожусь с буфером.
var canvas = document.getElementById('scene'); c = canvas.getContext('2d'); дальше в с чего-то рисуем. Теперь пытаюсь закешировать некую область : var cache_canvas = document.createElement('canvas').getContext('2d'); cache_canvas.drawImage(c,0,0,16,16,100,100,16,16); и фаирбаг мне пишет NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage] как же сделать копию области? |
Цитата:
а обратно ctx.putImageData(ImageData,x,y) |
спасибо, помогло, правда пишут что putImageData слишком ресурсоемкий и по возм. его не использовать. Есть еще варианты?
и еще вопросы. есть объект Цветок:
var wind;
var pos=0;
var flower= {
init: function(x,y,sprite){
function animateFlower(){
c.putImageData(cache_canvas,x,y);
var imgFlower=new Image();
imgFlower.src=sprite.spriteimg;
c.drawImage(imgFlower,(sprite.flower[0]+pos)*16,sprite.flower[1]*16,16,16,x,y,16,16)
pos<3 ? pos++ : pos=0;
x+=16;
}
var cache_canvas=c.getImageData(x,y,16,16)
animateFlower();
wind=setInterval(animateFlower,500)
},
clear: function(){
clearInterval(wind);
}
}
где х, у - координаты места на холсте, sprite - ссылка на спрайт-объект Инициализируем flower.init(100, 100,sprite); во время анимации его координата х меняется. 1. Как мне ее получить чтобы потом обрабатывать столкновения? добавляю в объект flover: posX: function(){ return x } но alert(flower.posX) печатает мне function(){return x} 2. допустим я захочу на игровое поле добавить еще цветок: flower.init(150, 150,sprite); как мне теперь обратиться к нужному? например я захочу переместить 1й или 2й или скажем остановить анимацию какого-то из них |
daima, а вы это без библиотек без всяких спрайт анимируете?
|
Цитата:
http://www.html5rocks.com/ru/tutoria...s/performance/ |
Цитата:
|
Цитата:
var p = flower.posX(); alert(p); Цитата:
|
Цитата:
|
Цитата:
var flower= {
init: function(x,y,sprite){
var wind;
var pos=0;
function animateFlower(){код анимации цветка}
var cache_canvas=c.getImageData(x,y,16,16)
animateFlower();
wind=setInterval(animateFlower,500)
},
clear: function(){
clearInterval(wind);
}
}
Запускаем var rose = flower.init(150, 100,sprite); где 150 - позиция по х, 100 - позиция по y. 1. Что мне нужно написать в коде чтобы считывать позицию по х и y и как будет выглядеть этот вызов? rose.posX? 2. когда чел наступит на цветок - его нужно удалить. для этого я ввел ф-ю clear только непонятно как добраться до ссылки на таймер wind и как ее в этом случае запустить. |
Цитата:
function Flower(x, y)
{
this.x = x;
this.y = y;
this.posX = function(){return this.x};
}
var rose = new Flower(10, 20);
alert(rose.posX());
|
Цитата:
ВО! Переписал.
var flower= {
init: function(x,y,sprite){
var wind;
var pos=0;
function animateFlower(){//alert(cache_canvas);
c.putImageData(cache_canvas,x,y);
var imgFlower=new Image();
imgFlower.src=sprite.spriteimg;
c.drawImage(imgFlower,(sprite.flower[0]+pos)*16,sprite.flower[1]*16,16,16,x,y,16,16)
pos<3 ? pos++ : pos=0;
}
this.posX = x;
this.posY = y;
var cache_canvas=c.getImageData(x,y,16,16)
animateFlower();
this.wind=setInterval(animateFlower,500)
},
clear: function(){
clearInterval(this.wind);
},
}
Допустим, хотим несколько цветков: var rose[0] = flower.init(150, 200,sprite); var rose[1] = flower.init(150, 100,sprite); Теперь, как получить позицию скажем rose[1]? |
На что ссылается this в вашем коде?
Попробуйте создать var rose = flower.init(150, 200,sprite) и запросить rose.posX и flower.posX. |
Цитата:
<script>
var flower= {
init: function(x,y){
var wind;
var pos=0;
function animateFlower(){
}
this.posX = x;
this.posY = y;
return this;
},
clear: function(){
clearInterval(this.wind);
}
}
var rose=new Array();
for(var i = 0; i < 2; i++) {
rose.push(flower.init(i*100, i*100));
}
alert(rose[0].posX+" "+rose[0].posY+" "+rose[1].posX+" "+rose[1].posY);
</script>
Непонятно мне, почему возвращаются координаты последнего объекта |
Цитата:
|
беда :( Как же быть то?
|
Можно посмотреть в сторону предложенного мной сначала решения. Или еще такой вариант:
function createObject(x, y)
{
return {x: x, y: y}
}
var o = createObject(2,3);
var o2 = createObject(7,8);
|
Цитата:
У нас есть объект flower, у него есть свойства init (инициализация), posX,posY - его текущие координаты, clear (удаление). Вот с ним и работаем. Никакие непонятные ф-и не нужны :nono: |
Ну так добавьте функцию из предыдущего моего сообщения в ваш объект flower, если вам никак не хочется менять структуру своего кода. Чтобы ваш метод init возвращал каждый раз новый объект, а не изменял сам flower. Это ведь не так сложно.
|
Как узнать координаты пикселя x и y?
Как узнать координаты пикселя x и y?
|
Ура! С этим кажись разобрались. А не видел ли кто:
1) понятный скрипт по генерации ландшафта (горы, водоемы) 2) алгроритм который позв. определить могу я в даном месте строиь здание с некими габаритами или нет |
Yes,
ЧТо ? 0_0=) |
Цитата:
Цитата:
Ответ : 1.По 1ому напиши сам или заплати за него :) Все зависит от сложности этого алгоритма . 2. Элементарно! Находишь размеры твоего здания (это очень просто), а затем вычисляешь есть ли объект (который строится) в этой области или нет! |
Цитата:
|
daima,
Ссылки дать ? P.S. а в чем проблема со 2ым алгоритмом? Этого я не могу понять ! |
При создании игры, я разделил динамические объекты и статичные, динамические объекты анимируешь с помощью перерисовки всего canvas, а статичные вещаеш через css и в js управляеш просто их положением и все)
|
Но это не мешает просчитать траекторию здания! X,Y объекта + ширина и длина !
"вещаеш через css " Плохой опыт у меня с этим! Лучше уже просто отдельный слой canvas ! Такой же эффект только возможностей больше ! |
если объекты должны взаимодействовать друг с другом то все рисуешь на одном холсте, можно написать класс который эмулирует слои рендеринга, то есть чтоб манипулировать уровнем отрисовки. В CSS полезно размещать все объекты которые не включены в игровую логику а просто я вляются интерьером игры или интерфейсом.
пример: bug-wars.com/bugwars.html один canvas элемент |
| Часовой пояс GMT +3, время: 16:05. |