HTML5 — Вопрос - ответ • Flashgamedev.ru | Разработка и Монетизация Флэш игр
Развитие игровой вспышки
Текущее время: Сб авг 18, 2018 2:18 pm

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 1426 ]  На страницу Пред.  1, 2, 3, 4, 5 ... 143  След.
Автор Сообщение
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Чт дек 12, 2013 9:12 pm 
Не в сети

Зарегистрирован: Чт май 19, 2011 8:23 pm
Сообщений: 80
Zebestov писал(а):
Про iframe подсмотрел на том же kongregate. Но вот на mobile.mindjolt.com, например, уже div.

Спасибо.


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Чт дек 12, 2013 11:57 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Ср май 12, 2010 3:31 pm
Сообщений: 2245
Zebestov писал(а):
Ответ на первый вопрос — iframe
На мобильных порталах вроде чаще отдельная страница. Но с точки зрения разработки разницы никакой, по большому счету.

Zebestov писал(а):
можно ли в HTML5 как-то "запечь" масштабированный и повернутый Image, чтобы потом уже именно его "штамповать"
Можно в отдельный канвас отрисовать предварительно, а затем его рисовать в экранный. Обычно на одну из ориентаций ставят заглушку через CSS media queries с картинкой о необходимости повернуть устройство. Масштабировать можно уже отрендеренный канвас через CSS свойства: canvas.style.width, canvas.style.height, на аппаратно ускоренном канвасе это практически бесплатная операция. Чтобы при растягивании пиксель-арт не мылился, можно задать режим интерполяции CRISP EDGES через CSS:
Код:
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
через JS (без оперы)
Код:
    ctx.imageSmoothingEnabled =
    ctx.mozImageSmoothingEnabled =
    ctx.msImageSmoothingEnabled =
    ctx.oImageSmoothingEnabled =
    ctx.webkitImageSmoothingEnabled = false;


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 12:43 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср сен 29, 2010 11:52 pm
Сообщений: 2705
Откуда: Одесса
Claymore писал(а):
На мобильных порталах вроде чаще отдельная страница. Но с точки зрения разработки разницы никакой, по большому счету.

Ну я пробовал решить скейлинг нашару с помощью мета-тега viewport. Если не iframe и не отдельная страница, а какой-то div — облом.

Остальную информацию беру на заметку! Однако на текущий момент наметил себе примерно такой препроцессинг:

– отрисовываем в канвас все необходимые образы (теребя его как Тузик тряпку)
– переносим с канваса в отдельные Image с помощью getImageData (дорого, но один раз)
– в каждом кадре (ыы отголоски) клепаем уже с подготовленных Image

Как такой вариант?


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 6:13 am 
Не в сети
Аватар пользователя

Зарегистрирован: Чт сен 17, 2009 6:10 pm
Сообщений: 3099
Откуда: Kaliningrad
Сайт: http://beastsbattle.com/
На счет картинок, я так и делаю, как ты описал Zebestov, в загрузочнике все картинки сначала загружаю
Код:
preload = new createjs.LoadQueue(false);
preload.addEventListener("complete", handleComplete);
preload.addEventListener("progress", handleProgress);

preload.loadManifest([{id: "img1", src:"images/img1.png"},
            {id: "img2", src:"images/img2.png"},
....
            {id: "imgn", src:"images/imgn.png"},]);

а затем уже в нужный мне момент помещаю на сцену

Код:
var img = preload.getResult("bgUpgrades");
var scaleBg = Math.max(_W/700, _H/600);
var background = new createjs.Bitmap(img);
background.scaleY = scaleBg
background.scaleX = scaleBg;
background.x = _W/2 - background.image.width/2*background.scaleX;
stage.addChild(background);


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 7:21 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср май 02, 2012 8:18 pm
Сообщений: 3330
ресурсы часто приходится брать, поэтому для preload.getResult(" удобно сделать обертку, типа:

Код:
function getres(resname)
{
return preload.getResult(resname);
}


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 7:47 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср май 12, 2010 3:31 pm
Сообщений: 2245
Zebestov писал(а):
переносим с канваса в отдельные Image с помощью getImageData (дорого, но один раз)
Можно просто предварительно отрисовать группу объектов во внеэкранный канвас, и в основой канвас через drawImage рисовать уже этот вспомогательный, в CreateJS так реализовано кэширование экранных объектов. Также есть прием с использованием нескольких слоев канвасов, которые обновляются с разной частотой, вроде задний фон со статическими объектами и передний слой с динамическими, композитинг будет на GPU. Но эффективность пререндера и прочих ухищрений нужно тестировать на конкретных задачах и наборах данных, запросто может оказаться, что простая отрисовка "в лоб" картинок на GPU, забатченных в один атласс, будет быстрее.


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 7:59 am 
Не в сети
Аватар пользователя

Зарегистрирован: Чт сен 17, 2009 6:10 pm
Сообщений: 3099
Откуда: Kaliningrad
Сайт: http://beastsbattle.com/
Claymore писал(а):
Также есть прием с использованием нескольких слоев канвасов, которые обновляются с разной частотой, вроде задний фон со статическими объектами и передний слой с динамическими, композитинг будет на GPU.


а можешь привести пример кода, если не сложно.


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 8:10 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср май 02, 2012 8:18 pm
Сообщений: 3330
В createJS выглядит так.

Допустим есть некий image класса container, к которому чайлдами добавлены разные там спрайты и прочие имэйджи, и все это условно-статично.
Для контейнера делаем:
image.cache(<x0>,<y0>,<xres>,<yres>) - и все, контейнер у нас закешировал все, что у него внутрях в пределах указаного прямоугольника и при stage.update() - содержимое image не перерисовывается, что ускоряет общую скорость отрисовки.
Если внутри image что-то меняется, то кэш надо обновлять: image.updateCache();

Но если обновлять кэш на каждом кадре - то общая скорость отрисовки будет ниже. Т.е. кэшировать имеет смысл лишь тогда и те объекты, которые обновляются редко или вообще статичны.

(Добавлено)
Сам закэшированые контейнер можно невозбранно двигать, масштабировать, делать видимым или не видимым - это не требует обновления кэша, нужен лишь общий апдейт stage. Координаты кэшируемой области - локальные для контейнера.


Вернуться наверх
 Профиль  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 9:19 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср май 12, 2010 3:31 pm
Сообщений: 2245
ADF, это ты пишешь о кэшировании, в CreateJS же в итоге все рисуетсе в общий канвас. Многослойные канвасы, это когда на странице распалагаются сразу несколько, друг над другом:
Код:
<canvas id="background" width="640" height="960" style="position: absolute; z-index: 0"></canvas>
<canvas id="foreground" width="640" height="960" style="position: absolute; z-index: 1"></canvas>
Такой подход использовался в портированных Cut the rope и Contre Jour

З.Ы. Но еще раз повторюсь, нужно тестировать на конкретных задачах, целевых устройствах и браузерах, эти приемы будут не всегда одинаково эффективны. Обратить внимание нужно не только на частоту перестроения кэша. При склеивании может сильно увеличиться площадь заливки: например, после склеивания получился тонкий объект вытянутый по диагонали, на деле будет отрисовыван огромный AABB с пустотами конских размеров, когда по раздельности объекты были прямоугольной формы и имели AABB впритык. Также для закэшированных кусков понадобятся отдельные draw call'ы на GPU-рендере, когда до склеивания объекты были в одном атласе, например. И так далее. Хотя кэширование объектов в один большой канвас-атлас и тайление больших неказистых объектов, наверное, благоприятно скажется в таких случаях (не проверял).


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: HTML5 — первые шаги
СообщениеДобавлено: Пт дек 13, 2013 9:28 am 
Не в сети
Аватар пользователя

Зарегистрирован: Чт сен 17, 2009 6:10 pm
Сообщений: 3099
Откуда: Kaliningrad
Сайт: http://beastsbattle.com/
http://www.fabiobiondi.com/blog/2012/08 ... d-layouts/
Статья на счет верстки, resize(). Думаю новичкам поможет.


Вернуться наверх
 Профиль Отправить e-mail  
 
Показать сообщения за:  Сортировать по:  
Начать новую тему Ответить на тему  [ Сообщений: 1426 ]  На страницу Пред.  1, 2, 3, 4, 5 ... 143  След.

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Русская поддержка phpBB