Подкаст FGB - выпуск 5 (Sbat про HTML5)

ну и зачем ты это добавил?

Это же московское время )

Круто, спасибо. А что за телефон?

Кстати, хинт. Chrome Developer tools могут подключиться к мобильному хрому и собирать много статистики. В том числе, пофреймово показывать, сколько и что жрет процессорного времени.

В целом Андроиды до 4.1-4.2 были в отстающих. Сафари (отчасти из-за быстрого выкатывания иОС) стал нормальным гораздо раньше.

Всякие спец. порталы со словом HTML5 в названии гуглятся легко, и они часто не очень интересны.

С точки зрения бизнеса интересны две группы.

1) Классические Flash порталы, которые делают ставку на HTML5. Их находить нетрудно, идешь с телефона на классические порталы и смотришь, кто и что там показывает:
m.spielaffe.de (это Кайзеровский портал)
m.agame.com
m.yepi.com

2) Сети, которые распространяют HTML5 игры. softgames.de, www.boostermedia.com, www.buongiorno.com. Они их раздают другим порталам, операторам и т.п.

3) Kongregate, Newgrounds и некоторые другие принимают HTML5 игры. Но повторю еще раз мысль из подкаста: никакого смысла писать «только для десктопа» на HTML5 сейчас нет. Флэш в 100500 раз удобнее и мощнее. На нем нужно писать игры для мобильных браузеров. Если «вдруг» управление подходит и для десктопов, то можно выложить и на НГ-Конг. Но управление сразу «для всего» — редкость. Из трех игр у меня в разработке на десктопе удобно можно играть только в одну.

В целом любым заинтересованным в этом нужно идти на www.html5gamedevs.com/, там обсуждаются спонсоры, клиенты, аспекты разработки.

В твиттере он только о Unity говорит:)

Что, кстати, с твоим участием в подкасте? Помню, был как-то разговор в комментариях к одному из подкастов, но не помню, чем закончилось.

Меня как игрока 99% ХТМЛ5 игр тоже не сильно привлекает.

Что касается «легко тырятся», то в среднем серьезных отличий от флешки мало. Хочется заморочиться — компилируй в advanced режиме Google Closure compiler. Все идентификаторы будут заобфусцированы, control flow несколько запутается. Необфусцированная флешка тянется вообще несколько легче, т.к. там все в одном файле.

Ну и самое главное — клиентов (как и в мире флеш) в подавляющем большинстве случаев абсолютно не волнует, насколько игра легко «тырется». Я даже кодом для сайтлока не заморачиваюсь.

Ну а ограничения по функционалу… У любой платформы есть ограничения. Если рассматривать с точки зрения бизнеса только в том, готовы ли платить (и сколько) за продукты в рамках этих ограничений.

Не знаю какие возможные ограничения существуют в ХТМЛ5 в перспективе, но такое привлечение денег приятно как минимум разработчикам. Ты делаешь что-то и тебе за это платят. Конкуренция небольшая. Игры можно делать простенькие. Годно же.

А я бы про флеш послушал.
А то сам уже неделю на Unity завис клепая прототипы. Нужно что-то родное, флешевое :)

Если не ошибаюсь, в подкасте Сергей сказал, что вся инфа на www.html5gamedevs.com/

Спилы в следующем году инвестируют пять миллионов в HTML5.

Скорее всего 1е, с темже glue и microsoft, он же говорил что был ексклюзив как вариант.

Обе:
1) Я не отдал Gluey на эксклюзив и это было отличное решение (Майкрософт, Яху, куча других сайтлоков). Примерно в 3 раза превысило изначальную планку лучшего эксклюзива.
2) По той же Gluey и Sticky Linky я отдал мобильные права, хитами, как можно увидеть в appannie они не стали, хотя какие-то деньги принесли. Признаюсь, абсолютно не факт, что я сам бы сделал лучше (хотя всегда так кажется задним умом). Но мне кажется, что в мобильных версиях был сделан упор на некоторые не очень важные вещи (количество игровых режимов в той же Gluey) и не сделан упор на важные вещи (качество и плавность рендеринга анимации в ней же).

JavaScript — быстрый язык, даже по сравнению с C++. Именно с этим связана популярность NodeJS.

benchmarksgame.alioth.debian.org/

Это вычислительные задачи, и в них он всего в 2-5 раз медленнее C++.

JavaScript сравним с AS3 по производительности. Это уже сильно зависит от задач, но прямой порт (читай «тупой порт») V8 benchmark на AS3 работал в 2011 сильно медленнее, чем в JS на Chrome:

Спасибо за отзыв! А что значит подход к геймдизайну? Т.е. про что конкретно спрашивать? Откуда идеи берутся и как из них выбирать хорошие? Как уровни придумываются или как балансируется игра? Поясни, что ты имеешь ввиду?

Typescript + Visual Studio (Intellij Idea тоже неплоха) + CreateJS

Haxe только в контексте того, что какой-то паблишер недавно на ФГЛ искал игры на Хаксе. Сам я на нем не писал.

А какие есть техники для защиты кода и графики?

Если говорить о html5 — то лишь извращенная фантазия программиста защитит.
Минимально можно графику складывать в base64 и прямо в JS коде хранить в виде строки. Отсеит школьников. Есть разные варианты. Конечно, можно вскрыть всё. Вопрос лишь в желании и наличии свободного времени.

Я сейчас пишу фреймворк свой — я компилирую JS код в hex код. Создаю словарь из используемых слов в коде. Слово тут не как строковое имею ввиду, а вообще любой символ, отличающийся от пробела ) function, var, x, «hello world» — это все «слово» в данном контексте. Дальше каждому слову присваивается код.

Шаг 1

function say(){
   alert("hello world");
}

Шаг 2

function say(){alert("hello world");}

dict['function '] = 01;
dict['say('] = 02;
dict['){'] = 03;
dict['alert('] = 04;

«hello world» преводим вместе с кавычками в hex и получаем 2268656C6C6F20776F726C6422 строку.

dict['«hello world»'] = 2268656C6C6F20776F726C6422;
dict[');}'] = 05;

На выходе у нас строка 010203042268656C6C6F20776F726C642205

Во-первых одна длинная и во-вторых работать не будет. Почему? Потому, что декодер, который надо еще создать — не поймет где начнется «hello world».
По-этому дописываем в парсер к примеру F0, который будет понимать «начало строки», дальше длинну. У 2268656C6C6F20776F726C6422 это составит 26 символов. 26 в hex будет 0х1A — откидываем 0х

Значит F01A будет значить «после 1А читаем 26 символовов
правим результирующую строку 01020304F01A2268656C6C6F20776F726C642205

дальше делаешь декодер, который будет иметь словарь :)
но не в в таком виде, dict['function '] = 01;, а тоже закодированном. Не буду приводить явные примеры — долго, лень и сами дуймате

На выходе иметь будем dict['66756E6374696F6E20'] = 01; что можно сократить ) как — не скажу.

Как будет выглядеть наш файл с функцией?

var data = '01020304F01A2268656C6C6F20776F726C642205';

распарсим его по значениям ключей dict и соберем назад
1) function
2) say(
3) ){
4) alert(
5) „hello world“
6) );}

склеим эту String в одну и засунем в eval() и у нас Javascript создаст функцию в памяти

дальше тупо вызываем say(); и без видимой say функции в коде — она все же сработает.

А чтоб защититься от любителей смотреть тело функций через alert(say) — просто делаем еще один код (лучше его первым делом делать)

Function.prototype.toString = function(){
return 'function alert(parameter){ [native code];}';
}

зачем 'function alert(parameter){ [native code] ;}'?

Просто все. Чтоб отпугнуть людей :) Конечно, можно вернуть „Cheater f*ck off“ :) Но я всегда советую страшные и похожие на какие-то серьезные вещи походить, чтоб автоматически сработало в голове „А, ну да мы тут ниче не сделаем — это ж native code“ и большая часть людей отвалит нафиг.

Потом мы в после eval должны удалить скрипт наш из кода )



проходим по всему html dom и ищем тег script где src=»js/game.js" и пернюрим ему innerHTML = "";

Что интересно — у нас в коде становится пусто, если смотреть дебаггером (именно дебагерры видят изменения на страницах в dom). Но после запуска такого дела — дебаггер нифига не увидит — будет пустой innerHTML , а самое классное — функции то в памяти будут уже и будут работать без проблем :) Можем туда для отвода глаз насувать мусора, который не работает :) Я небольшие пустышки советую туда вписывать. Чтоб человек интуитивно увидел, что там что-то есть, но править там нечего и забросил ковырять нашу игрулину. Это как в политике — воруют миллионы, но ставят скаймейки дешевые. Чтоб пенсионеры говорили «какой молодец, мне скаймейку поставил». А за миллионы забывали украденные.

Теперь что касается eval. Нельзя вызывать его так явно. Eval это часть js движка ) так же как и window == this; А у window есть этот самый eval )

если сделаем обманку:

var compiler = window['eval'];
то у нас легко будет работать такой код:

var compiler = window['eval'];
var stringMethod = 'function say(){alert("hello world");}';
compiler(stringMethod);
say();

Возращаясь к видимым и не запутанным частям кода — лично я бы не хранил window['eval'] такую строку. Как по мне то уже лучше так:

var compiler = window['\x65\x76\x61\x6C']; // в любом hex редакторе пишешь eval и в hex коде 6576716с видишь )
var stringMethod = 'function say(){alert("hello world");}';
compiler(stringMethod);
say();

но и '\x65\x76\x61\x6C' я не храрнил бы ) я бы закодировал это все так, что пока ты раскодируешь — кофе закончится и азарт :)

Теперь давай про сжатие кода.

Было function say(){alert(«hello world»);}
Стало 01020304F01A2268656C6C6F20776F726C642205

И теперь считай, сколько у тебя раз в коде будет function, ){, ;} и прочих приколов )

3 раза строка function function function (с пробелами в конце) либо 010101 ) компрессия ) да! Суть уловил? Давай теперь сам :)

Вот, похоже, самый действенны кодировщик JavaScript — кавайный, при одном только взгляде у злоумышленника растает его черное каменное сердце, и он уже никогда больше не захочет заниматься постыдными делишкам ^_^

Развитие игровой верстки :D