Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 123
Запихнуть рогалик в десять килобайт на языке высокого уровня вместе с графикой?
Ребят, вы реально больные, вы это знаете?
Ребят, вы реально больные, вы это знаете?
вообще крутые вы!
Игра супер! Затягивает, очень трудно поверить, что это лишь 10 килобайт.
Это круто! Я даже где уже писал, мы в свое время писали на спор программы под windows кто меньше размером получит исходный pe executable
Ребята, вы реально крутые! Желаю вам победы в этом конкурсе.
А не было ли в мыслях доделать 3D версию и черт с ним, с IE9?
Очень хочется посмотреть на результат.
И да — очень круто!
Очень хочется посмотреть на результат.
И да — очень круто!
очень круто. еще и 10кб. вы просто демоны.
проголосовал
проголосовал
Реально молодцы, и игра интересная. Удачи в конкурсе.
Очень круто! Молодцы!
Отлично.
Только в ZIP алгоритм сжатия ZIP, а в PNG — DEFLATE. Кстати, а почему в PNG вы использовали только одну компоненту цвета? Вполне можно было использовать три компоненты цвета + прозрачность (она изменяется в пределах от 0 до 127, но у вас же алфавит ещё меньше).
Только в ZIP алгоритм сжатия ZIP, а в PNG — DEFLATE. Кстати, а почему в PNG вы использовали только одну компоненту цвета? Вполне можно было использовать три компоненты цвета + прозрачность (она изменяется в пределах от 0 до 127, но у вас же алфавит ещё меньше).
Подозреваю потому, что они использовали не полноцветный PNG, а с палитрой.
В Zip используется (по умолчанию) тот же самый Deflate, не пишите ерунды
«The ZIP file format permits a number of compression algorithms, but as of 2009, the Deflate method continues to be dominant»
Написано в Википедии.
А чуть-чуть пониже: «WinZip, starting with version 12.1, uses the extension .zipx for ZIP files that use compression methods newer than DEFLATE; specifically, methods BZip, LZMA, PPMd, Jpeg and Wavpack – the last 2 are applied to appropriate file types when «Best method» compression is selected»
Так что сами не пишите ерунды.
Написано в Википедии.
А чуть-чуть пониже: «WinZip, starting with version 12.1, uses the extension .zipx for ZIP files that use compression methods newer than DEFLATE; specifically, methods BZip, LZMA, PPMd, Jpeg and Wavpack – the last 2 are applied to appropriate file types when «Best method» compression is selected»
Так что сами не пишите ерунды.
Мля, zip стандарт, когда создавался, использовал в основном Deflate, и до сих пор это есть наиболее используемый алгоритм сжатия.
То, что потом его расширили для использования дополнительных алгоритмов, это уже другое дело.
Даже в вашей цитате имеется «but as of 2009, the Deflate method continues to be dominant»
Написать «Алгоритм сжатия ZIP» это полнейшее профанство.
То, что потом его расширили для использования дополнительных алгоритмов, это уже другое дело.
Даже в вашей цитате имеется «but as of 2009, the Deflate method continues to be dominant»
Написать «Алгоритм сжатия ZIP» это полнейшее профанство.
Нет, это не так.
Вы совершенно не учитесь на ошибках. DEFLATE появился только в версии 2.0, а не «когда ZIP был придуман». В первой версии использовался алгоритм, который назывался ZIP.
Вы совершенно не учитесь на ошибках. DEFLATE появился только в версии 2.0, а не «когда ZIP был придуман». В первой версии использовался алгоритм, который назывался ZIP.
И снова мимо.
Первые версие PKZip поддерживали алгоритмы Reduce & Implode.
Поддержка Deflate появилась в 1993 году (ага, совсем недавно).
И таже википедия, которую вы похоже не любите дочитать до конца, говорит про алгоритм Deflate:
PKZIP: the first implementation, originally done by Phil Katz as part of PKZip.
Первые версие PKZip поддерживали алгоритмы Reduce & Implode.
Поддержка Deflate появилась в 1993 году (ага, совсем недавно).
И таже википедия, которую вы похоже не любите дочитать до конца, говорит про алгоритм Deflate:
PKZIP: the first implementation, originally done by Phil Katz as part of PKZip.
А может где-то таки завалялся работающий изометрический пример?
Очень хотелось бы взглянуть…
Очень хотелось бы взглянуть…
После любого изменения, файл пережимался pngcrush'ем с параметром -brute, чтобы гарантировать наилучшее сжатие.Не нужно использовать эту устаревшую утилиту. Используйте связку optipng + pngout
optipng не смог больше ужать ни t.png, x.png, устаревший pngcrush смог ужать x.png на 1 байт. :D
Вы не прочитали мой комментарий внимательно. Там написано «связку optipng + pngout». Могу прислать вам ваш x.png, ужатый этой связкой ещё на 116 байт.
А он работает после этого? Блин, 100 байт хватит на какую-нибудь крутую фичу! :)
Лучше скажите как это делать, мы встроим в тулчейн, и попробуем.
Лучше скажите как это делать, мы встроим в тулчейн, и попробуем.
PNG это формат без искажений, так что обязан работать :)
Вот простой CMD-скрипт:
@ECHO OFF
IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in (`optipng -o4 -full -sim "%1"`) DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:~1,1% "%1" || EXIT 3
) ELSE (
pngout /k0 /n2 /f%f:~1,1% "%1" "%2" || EXIT 3
)
Подробно есть в книге: speedupyourwebsite.ru/books/reactive-websites/
Вот простой CMD-скрипт:
@ECHO OFF
IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in (`optipng -o4 -full -sim "%1"`) DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:~1,1% "%1" || EXIT 3
) ELSE (
pngout /k0 /n2 /f%f:~1,1% "%1" "%2" || EXIT 3
)
Подробно есть в книге: speedupyourwebsite.ru/books/reactive-websites/
Ну как, несмотря на то что png lossless, бывают loss оптимизации, например, сокращение палитры. Если кто-нибудь сократит палитру x.png, то всё развалится. Я попробую.
если к этому еще дописать перекомпоновщик исходного кода, который меняет местами методы (без потери работоспособности, ессно), то может еще больше экономии получиться
$ ./pngout-static -k0 -n1 -f0 -y x.png x2.png
In: 8229 bytes x.png /c3 /f0 /d8
Out: 8083 bytes x2.png /c3 /f0 /d8, 95 colors
Chg: -146 bytes ( 98% of original)
с -n2 — всего лишь 138 байт, но это все равно больше 116и
In: 8229 bytes x.png /c3 /f0 /d8
Out: 8083 bytes x2.png /c3 /f0 /d8, 95 colors
Chg: -146 bytes ( 98% of original)
с -n2 — всего лишь 138 байт, но это все равно больше 116и
собственно, интересно, это у меня pngout другой (порт на линух брал тут: www.jonof.id.au/pngout), или уже другую png-шку на 10kapart положили?
попробовал переделать png с палитрой в grayscale png:
$ convert x.png -channel R -separate x3.png && ./pngout-static -c0 -f0 -k0 -n1 -y x3.png x3crushout.png
In: 8072 bytes x3.png /c0 /f0 /d8
Out: 7807 bytes x3crushout.png /c0 /f0 /d8
Chg: -265 bytes ( 96% of original)
$ convert x.png -channel R -separate x3.png && ./pngout-static -c0 -f0 -k0 -n1 -y x3.png x3crushout.png
In: 8072 bytes x3.png /c0 /f0 /d8
Out: 7807 bytes x3crushout.png /c0 /f0 /d8
Chg: -265 bytes ( 96% of original)
вот вам еще ~100байт, ваш переписанный распаковщик
map=null;(function(f,j){var g=document,a=g.createElement(«canvas»),c,e=new Image,h=e.style,i=a.style,d=127;if(!a.getContext||!(c=a.getContext(«2d»))||!c.getImageData)alert(«No canvas»);else{h.position=«absolute»;h.top="-1000px";g.body.appendChild(e);e.onload=function(){a.width=a.height=d;i.width=i.height=d+«px»;c.drawImage(e,0,0);d=c.getImageData(0,0,d,d).data;b="";for(c=0;c<64516;c+=4){a=d[c];b+=String.fromCharCode(a>0?a+31:10)}j(b)};e.src=f}})(«x.png»,function(f){eval(f.replace(/@/g,«function»).replace(/\`/g,«this»));S()});
map=null;(function(f,j){var g=document,a=g.createElement(«canvas»),c,e=new Image,h=e.style,i=a.style,d=127;if(!a.getContext||!(c=a.getContext(«2d»))||!c.getImageData)alert(«No canvas»);else{h.position=«absolute»;h.top="-1000px";g.body.appendChild(e);e.onload=function(){a.width=a.height=d;i.width=i.height=d+«px»;c.drawImage(e,0,0);d=c.getImageData(0,0,d,d).data;b="";for(c=0;c<64516;c+=4){a=d[c];b+=String.fromCharCode(a>0?a+31:10)}j(b)};e.src=f}})(«x.png»,function(f){eval(f.replace(/@/g,«function»).replace(/\`/g,«this»));S()});
кстати g.body.appendChild(e); тоже не нужно — это еще +22bytes
ну и вместо
map=null;(function…
сделать
map=(function…
и; в конце убрать
еще +6 :)
map=null;(function…
сделать
map=(function…
и; в конце убрать
еще +6 :)
Думаете это все? ;)
Вот финальная версия первоначального распаковщика:
map=function(c,a,e){var d=document.createElement(a),b=new Image;b.onload=function(){d.width=d.height=a=127;c.drawImage(b,b=0,0);a=c[e](0,0,a,a).data;for(e="";b<64516;b+=4)e+=String.fromCharCode((d=a[b])?d+31:10);eval(e.replace(/@/g,«function»).replace(/\`/g,«this»));S()};d[c]&&(c=d[c](«2d»))&&c[e]?b.src=«x.png»:alert(«No „+a)}(“getContext»,«canvas»,«getImageData»)
368 байта против 636 байт первоначального вида, то есть +268 байт в ваше распоряжение :)
Идеи кончились: как пожать еще — не знаю :(
Вот финальная версия первоначального распаковщика:
map=function(c,a,e){var d=document.createElement(a),b=new Image;b.onload=function(){d.width=d.height=a=127;c.drawImage(b,b=0,0);a=c[e](0,0,a,a).data;for(e="";b<64516;b+=4)e+=String.fromCharCode((d=a[b])?d+31:10);eval(e.replace(/@/g,«function»).replace(/\`/g,«this»));S()};d[c]&&(c=d[c](«2d»))&&c[e]?b.src=«x.png»:alert(«No „+a)}(“getContext»,«canvas»,«getImageData»)
368 байта против 636 байт первоначального вида, то есть +268 байт в ваше распоряжение :)
Идеи кончились: как пожать еще — не знаю :(
И еще моменты для нахождения свободных байт:
— заменяйте не «this» а «this.»: ~15 «this» останутся незамещенными, зато код похудеет на 200+ байт (с 16108 до 15880)
— можно заменить еще return и length, и возможно еще другие частые слова. если нет возможности добавить еще символы, можно использовать безопасно @@, @`, ``, `@:
* после замены «return» -> @@, ".length" -> @` получаем еще +400 байт (от 15880 получаем 15478)
* а если есть возможность использовать новые символы то получает еще +90 байт (15388)
— переписать код с учетом того как жмет gcc, это может дать еще больше экономии и вполне вероятно более килобайта, так что можно будет засунуть еще что нить интересное ;)
Еще нужно смотреть как ведет себя код после сжатия, вполне возможно заменами вы можете ухудшить итоговый размер.
ЗЫ Если что, обращайтесь — поможем с дальнейшим сжатием ;)
— заменяйте не «this» а «this.»: ~15 «this» останутся незамещенными, зато код похудеет на 200+ байт (с 16108 до 15880)
— можно заменить еще return и length, и возможно еще другие частые слова. если нет возможности добавить еще символы, можно использовать безопасно @@, @`, ``, `@:
* после замены «return» -> @@, ".length" -> @` получаем еще +400 байт (от 15880 получаем 15478)
* а если есть возможность использовать новые символы то получает еще +90 байт (15388)
— переписать код с учетом того как жмет gcc, это может дать еще больше экономии и вполне вероятно более килобайта, так что можно будет засунуть еще что нить интересное ;)
Еще нужно смотреть как ведет себя код после сжатия, вполне возможно заменами вы можете ухудшить итоговый размер.
ЗЫ Если что, обращайтесь — поможем с дальнейшим сжатием ;)
Мы пробовали return, стало хуже сжиматься. Про this. это мы протупили, да, я сегодня утром сам догадался. :)
Можно попробовать заменить .length на ^. Спасибо. :)
На самом деле есть ещё 6 дней, можно добавить какую-нибудь смешную фичу.
Можно попробовать заменить .length на ^. Спасибо. :)
На самом деле есть ещё 6 дней, можно добавить какую-нибудь смешную фичу.
замена this на this. дало результирующий размер 10308. fail. :)
замена .length на @@, вместе с патчем загрузчика дало 10226, то есть 4 байта экономии :D
ой, насчёт this накосячил, там прилично -30 байт! Спасибо! :)
Я и писал, что нужно смотреть как замены влияют на результат — а то исходный текст может оказаться и меньшим, а жаться от этого лучше не будет — а может еще и хуже. По сути zip как раз и делает такие замены только для всего текста.
Были бы исходники — можно было бы посмотреть как пожать. Недавно имел опыт по оптимизации под сжатие gcc :) Для него порядок операторов может сыграть на результат, да еще и различные конструкции можно заюзить к которым gcc не сводит. Хотя опять же все изменения исходного кода могут оказаться пустой тратой времени и ухудшить конечный результат :)
Были бы исходники — можно было бы посмотреть как пожать. Недавно имел опыт по оптимизации под сжатие gcc :) Для него порядок операторов может сыграть на результат, да еще и различные конструкции можно заюзить к которым gcc не сводит. Хотя опять же все изменения исходного кода могут оказаться пустой тратой времени и ухудшить конечный результат :)
да, именно с этой развлекухой мы столкнулись и провели немало прекрасных часов :))))
исходники fontanero
habrahabr.ru/blogs/personal/116811/
habrahabr.ru/blogs/personal/116811/
оптипнг судя по выводу делает тоже самое. :) Я только что проверил.
Совсем подробно можно почитать в книге: speedupyourwebsite.ru/books/reactive-websites/
Мега чуваки =) Особенно идея с PNG.
Потрясающе! Вот это качественная работа!
Потому что выяснилось, что единственный вариант реализовать трансформацию в IE9 — это фильтр Matrix.Можно было попробовать рисовать в векторе (SVG).
Радуюсь комментариям на странице вашей игрушки:
И только один человек не стал выпендриваться и просто написал:
wow! great! pish pish!!! I will put it into my sait for bisnes!
Itc is the cool gama! Kstate, toooooo vacuum. HALLO !!1
very cute little game! obojayu takie igrushki!!!
И только один человек не стал выпендриваться и просто написал:
Молодцы! 5 баллов.
Прикольная игра, всю прошел. :) Жаль что не сделали Зал славы. :(
Молодцы! На мой взгляд, у вас лучшая работа на конкурсе.
This is AWESOME!
С удовольствием прочитал топик.
Вспомнилась книга Майкла Абраша, в которой он извращался над asm кодом с таким же упорством (цель, правда, была немного иной — там он бился за производительность, а не за сокращение объема кода)
а веб-приложений тогда не было (вздыхает)
Вспомнилась книга Майкла Абраша, в которой он извращался над asm кодом с таким же упорством (цель, правда, была немного иной — там он бился за производительность, а не за сокращение объема кода)
а веб-приложений тогда не было (вздыхает)
Прикоооольно )) Не веритсо даже что 10к. риальне
это круто
насчет графики и IE9: для этих целей правильнее использовать canvas или SVG, они и ускорены через GPU и возможностей больше дадут
но наверное не в рамках конкурса, но я надеюсь вы выкатите внеконкурсную версию с 3D :-)
насчет графики и IE9: для этих целей правильнее использовать canvas или SVG, они и ускорены через GPU и возможностей больше дадут
но наверное не в рамках конкурса, но я надеюсь вы выкатите внеконкурсную версию с 3D :-)
Ааа, проклятый кролик! Я был так богат!..
В IE8 ошибка No Canvas. В Мозилле не работают actions вообще… Короче я зря 5 звёзд поставил :)))
круто ;-) молодцы потратил N времени понравилось. В конце надо было чуть посложнее
PURE WIN!!!
Got $91093474
Being dead 0 times.
PURE WIN!!!
Got $91093474
Being dead 0 times.
Крутота! книжек к боссу принесли? :D
угу, только ниодной не воспользовался все берег их )))
да еще слишком быстро надо решать головоломки чтобы получить много денег… максимум что я выбил это 97 уе на 5х5 трубах. А босса убил случайно 2 раза стукнул 1 раз съел чего-то а он оказывается меня бьет в это время… стал убегать и случайно напоролся на него и убил… мне бы еще 1 удар и я был бы мертв
Awesome!
а я поставил 5 звезд и даже не играл.
Игры не люблю, а сделали все круто. За державу не обидно.
Спасибо ребята, промотивировали.
Игры не люблю, а сделали все круто. За державу не обидно.
Спасибо ребята, промотивировали.
А переход на 8-й уровень не влез в 10кб? :(
Я так заигрался…
Я так заигрался…
> (Как выяснилось позже — мы были не первыми, кому эта идея пришла в голову).
Там, кстати, на бэкграунде Марио, в который можно побегать. Правда всего 1 уровень и без монеток, грибов и монстров.
Там, кстати, на бэкграунде Марио, в который можно побегать. Правда всего 1 уровень и без монеток, грибов и монстров.
рабочий день потерян )
Из конкурса… автосимулятор :) 10k.aneventapart.com/Uploads/198/
А это вообще жесть: ~5kb javascript'а, без всяких ухищрений с png, к тому же сам код еще есть куда жать (думаю процентов на 25% еще можно)…
Забавно, что на Google Chrome машина едет быстрее, чем на Firefox. Именно машина, не сама игра — отрыв в 24 секунды.
физическая модель там работает с приближением кругового движения линейным %-)
И траса генерируется каждый раз рандомно.
И траса генерируется каждый раз рандомно.
не буду оригинальным:
прекрасная работа!
не понял, каким образом, но как-то справился со всеми трубами) каким-то образом смог убить кролика не умирая — в основном отжирался запасами, несколько раз стукнул)
прекрасная работа!
не понял, каким образом, но как-то справился со всеми трубами) каким-то образом смог убить кролика не умирая — в основном отжирался запасами, несколько раз стукнул)
Победа?
Молодчаги! Надеюсь, победа будет ваша :)
а vml тут разве не мог бы помочь?
А последнего кролика без книг не убить, получается? Пробовал пить все что можно — убивает быстрее.
Отличная игра! Прошел целиком и считаю, что с пользой потратил время.
Единственное что — есть несколько замечаний по поводу игрового процесса и багов:
1. Откуда такие астрономические суммы денег, выпадающие из монстров?
2. Монстры слишком слабые, я пробегаю по уровням как джаггернаут, изредка потребляя пару из десятков найденных напитков и еды
3. Если я решил выпить что-то, а потом передумал, как отменить?
4. Я отказался чинить две трубы из трех, но оно все равно пишет, что найдено и починено три.
Надеюсь, чем-то помогу сделать эту игру еще лучше :)
Единственное что — есть несколько замечаний по поводу игрового процесса и багов:
1. Откуда такие астрономические суммы денег, выпадающие из монстров?
2. Монстры слишком слабые, я пробегаю по уровням как джаггернаут, изредка потребляя пару из десятков найденных напитков и еды
3. Если я решил выпить что-то, а потом передумал, как отменить?
4. Я отказался чинить две трубы из трех, но оно все равно пишет, что найдено и починено три.
Надеюсь, чем-то помогу сделать эту игру еще лучше :)
1. Если из монстра выпадает золотишко, то выпадает от 1/20 до 1/10 суммы, нужной чтобы получить новый левел.
2. Мы не хотели задрачивать игрока, и сделали игру более казуальной. Монстры таки иногда бьют и иногда надо пить или есть.
3. Никак. Да и плевать, будто бы еда или выпивка — редкость. :) Достаточно нажать s и что-нибудь да выпадет. :)
4. Это кнопка(give up) значила не отменить, а сдаться. Если вы сдаётесь — получаете победный $1 на счёт и чините трубу. :)
2. Мы не хотели задрачивать игрока, и сделали игру более казуальной. Монстры таки иногда бьют и иногда надо пить или есть.
3. Никак. Да и плевать, будто бы еда или выпивка — редкость. :) Достаточно нажать s и что-нибудь да выпадет. :)
4. Это кнопка(give up) значила не отменить, а сдаться. Если вы сдаётесь — получаете победный $1 на счёт и чините трубу. :)
1. Тогда хотя бы количество денег делайте как X + 30%, а то реально жествко выглядит
2. Ну, хозяин-барин, но если есть пара лишних байт и можно воткнуть уровни сложности — было бы очень здорово, чтобы игрок хотя бы немножко думал, а не ломился сквозь игру
4. Лучше уж пусть она тогда оставляет трубу непочиненной
2. Ну, хозяин-барин, но если есть пара лишних байт и можно воткнуть уровни сложности — было бы очень здорово, чтобы игрок хотя бы немножко думал, а не ломился сквозь игру
4. Лучше уж пусть она тогда оставляет трубу непочиненной
Ну! Кто ещё скажет что Хабр не торт?!
Желаю удачи в конкурсе!
Желаю удачи в конкурсе!
Ждём изометрию! Исключите мини-игру, проведите все оптимизации, которые вам насоветовали…
Так же будет интересна диаграмма процентного распределения ресурсов. Ну, типа:
Javascript: 60%
— Генерация карты: 5%
— Управление: 5%
— Логика монстров, кроме кролика: 10%
— Логика кролика: 40%
CSS: 10%
Спрайты (графика): 30%
Так же будет интересна диаграмма процентного распределения ресурсов. Ну, типа:
Javascript: 60%
— Генерация карты: 5%
— Управление: 5%
— Логика монстров, кроме кролика: 10%
— Логика кролика: 40%
CSS: 10%
Спрайты (графика): 30%
> Жмём дальше, продолжение
:-( не работает
:-( не работает
Что именно не работает? Браузер? Ось?
Публикация private_face, которая скрывается под надписью "Жмем дальше, продолжение", не работает :(
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Наш опыт участия в 10K Apart или как ужать 40 Кбайт кода в 10