HTML5

индекс
61,16

«LibCanvas» — фреймворк для работы с Javascript Canvas, запущен сайт + игра «Asteroids»

Здравствуйте. Я продолжаю развитие фреймворка для работы с Javascript Canvas, основанного на MooTools и предназначенного для создания анимаций, игр, ui и всего, что вы пожелаете. И сегодня — очень важный момент для этого фреймворка — публичный запуск официального сайта.

Добро пожаловать на

libcanvas.com



К запуску мы с greedykid и Nutochka портировали «Asteroids» — культовую игру восьмидесятых, но с более усовершенствованной графикой, которая работает во всех современных браузерах (да-да, про ie < 9 тут ничего не было). Работа над Астероидами показала мне потенциал этой технологии. Я уверен, что это далеко не предел, у меня есть идеи и даже интересные реализации и потому я продолжу развитие этого фреймворка. Ждите новых интересных приложений.

Для желающих помериться можно увеличить fps: libcanvas.com/games/asteroids?fps=60 и посмотреть, сколько оно выдает)
+75
9 августа 2010, 09:21
56

комментарии (81)

–4
KiLEX #
Круто, думаю скоро придет время и богомерзкий флеш полностью умрет.
а в игру очень тяжело играть ТК корабль огромный и пушки стреляют по очереди по бокам корабля. реквестую стрельбу из центра или одновременно из обоих орудий :)
+2
TheShock #
сделано так специально) чтобы внесту лепту неожиданности.
работает стабильно? =)
+6
NermaN #
У флеша есть лишь одно преимущество которое не исчезнет — он абсолютно одинаково ведет себя во всех браузерах. С JS, думаю, потом возникнут проблемы в более сложных приложениях в разных браузерах.
+1
TheShock #
JQuery ведет себя одинаково во всех браузерах. И MooTools. Есть кое-какие мелкие ньюансы, конечно. Но их очень мало
+3
Yaro #
Я думаю имеется в виду больше фактор скорости работы javascript'а на различных браузнерных движках.
+1
TheShock #
ну. меня, как Линуксоида, ваше заявление огорчает) да. такая ситуация есть. но с другой стороны это стимулирует конкуренцию — в каком браузере Канвас работает быстрее
+3
Elufimov #
Ну это со временем сгладится, движки без оптимизации отомрут :)
+2
TheShock #
да. более того, практика показывает, что оптимизировать есть куда. во многих тестах и приложениях хром показывает себя лучше фокса, а в астероидах 3.5 фокс иногда показывает себя немногим лучше хрома 6. следовательно есть куда оптимизироваться что хрому что фоксу.
+5
RussianNeuroMancer #
> он абсолютно одинаково ведет себя во всех браузерах
Но не во всех ОС.
+2
Gospodin #
Угу, особенно на разных платформах и в 64х браузерах.
+1
Drinker #
Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(
–1
Drinker #
Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(
НЛО прилетело и опубликовало эту надпись здесь
+2
TheShock #
К флешу было негативное отношение задолго до Стива Джобса, просто он первым из крупных игроков бросил вызов флешу
–2
fzn7 #
Вы видимо не застали 2008 год и эпичную историю портала top4top.ru
НЛО прилетело и опубликовало эту надпись здесь
+2
soltpain #
А звук нигде не регулируется? А то у корабля слишком уж противный тыр-тыр-тыр.
+3
TheShock #
пока нет. сегодня прикрутим mute. )
+1
0lympian #
Дааа… звук у реактивного корабля как у ушастого запорожца :D
+10
TheShock #
это дизельный реактивный корабль для технических заданий в 3000 году.
на что правительство выделило деньги — на то и выделило.
остальные пошли на откаты и покупку Энтерпрайзов-лимузинов
+2
DarkSilence #
На Intel Core i3 2.13 GHz, 3 Gb RAM, Mobility Radeon HD 5400 + Opera 10.61 Астероиды не более чем пошаговая стратегия, увы :(
+1
TheShock #
у меня послабее Intel Core 2 Duo CPU E4500 @ 2.20GHz с устаревшим Radeon X1600 без вменямых дров в Линуксе и fps не падает.

как работает в Фоксе и Хроме? Несмотря на все тесты Опера у меня показывает себя хуже всего, хотя, впринципе, сносно. Лучше всего показывает себя Фокс
+1
TheShock #
да, оперативки 2gb
0
DarkSilence #
В фоксе нормально в принципе, но есть небольшой лаг между нажатием клавиши и реакцией, в хроме просто супер — все летает и можно нормально поиграть.
+1
TheShock #
можно попробовать понизить fps: libcanvas.com/asteroids?fps=15 и посмотреть.
0
DarkSilence #
Попробовал — там где тормозит, тормозит точно также. Там где летает — летает также.
Время тестировать подробнее пока нету :(
0
neptune #
а у меня в хромиуме в ubuntu просто черный экран :( Не знаете что может быть?
+1
TheShock #
сейчас в личке разберемся)
+4
Cake_Seller #
Странно, у меня при менее мощном компьютере (Core 2 Duo T5550 1.83 GHz и 2 Gb оперативки) в этом же браузере все выглядит довольно сносно.
+4
snobit #
Safari 5.0.1 под Mac. Тормозов особых нет, но игра съела 100% CPU. Флеш пока получше.
0
Tagrim #
AMD Athlin 4200 64 X2, 1G Ram, Nvodia 8500 без кулера, Opera 10.61 идеально
0
Tagrim #
пардон, Athlon )
0
Tagrim #
и Nvidia, всю ночь за работой, мажу по клавишам :)
0
r0zh0k #
То же самое, только видео встроенное — все летает.
+1
VDG #
FF 3.6.8 (2ГГ, 2ГБ) — пошаговая стратегия
+2
habraname #
ЙОУ! здравствуй, понедельник! здравствуй, либканвас! здравствуй, астероидс!
прощай, работа!

там выше спрашивали про скорость работы… принято считать, что в хромоклонах она выше за счёт встроенного в8 и конкуренты им только опера, ибо запилили свой шустрый транслятор. на деле зависит от конкретной платформы, сборки итп. тесты есть и на хабре habrahabr.ru/blogs/browsers/82362/ habrahabr.ru/blogs/ie/97302/

зы: астероидс на хтмл5! теперь с трактором! ;)
не хватает только взрывающегося вертолёта
+1
Roler #
Невероятно.
Жаль в моём Firefox тормозит, пришлось Хром загрузить.
+1
TheShock #
а какой Фокс? что значит тормозит? какое железо?
+1
Roler #
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Железо: ADM Athlon 4200 2x, 3GB RAM, GeForce 9600GT.
Всё под WinXP 32 SP3

Ну именно тормозит, прыгает, дёргается.
+1
shifttstas #
На последнем Dev Chrome прекрасно все работает )
+8
Setti #
Вы очень крутой
+2
Virusmater #
при разрешении 1024*768 игровое поле полностью не помещается на экран) приходится скролить
+1
TheShock #
прошу прощения. согласно статистики только 4% пользователей не влезут в экран Астероиды)
0
Virusmater #
да ничего)
0
Guria #
browsersize.googlelabs.com/ — приводит несколько другую статистику. А даже на довольно распространённом 1280*1024 цифры Death и Time уползают за правую границу экрана.
+1
TheShock #
1280x1024  31,25 %
1680x1050  16,76 %
1280x800   10,70 %
1440x900   10,13 %
1920x1080   7,53 %
1366x768    4,45 %
1024x768    4,02 %
1920x1200   3,46 %
1600x900    2,04 %
2704x1050   1,80 %

+1
Lord_Daedra #
хром, мак ос, 6.0.472.25 dev всё оч сильно тормозит, поиграть нормально не смог…
+1
TheShock #
железо какое?
0
Lord_Daedra #
Аппаратные средства:

Название модели: iMac
Идентификатор модели: iMac8,1
Имя процессора: Intel Core 2 Duo
Скорость процессора: 2.66 ГГц
Количество процессоров: 1
Общее количество ядер: 2
Кэш 2-го уровня: 6 МБ
Память: 4 ГБ
Частота шины: 1.07 ГГц

Слоты памяти:

ECC: Откл.

BANK 0/DIMM0:

Размер: 2 ГБ
Тип: DDR2 SDRAM
Скорость: 800 МГц
Статус: ОК
Производитель: 0x7F98000000000000

BANK 1/DIMM1:

Размер: 2 ГБ
Тип: DDR2 SDRAM
Скорость: 800 МГц
Статус: ОК
Производитель: 0x7F98000000000000

ATI Radeon HD 2600 Pro:

Модель набора микросхем: ATI Radeon HD 2600 Pro
Тип: GPU
Шина: PCIe
Ширина полосы PCIe: x16
VRAM-память (всего): 256 МБ
Производитель: ATI (0x1002)
ID устройства: 0x9583
Ревизия: 0x0000
Ревизия ROM: 113-B2250L-259
Версия драйвера EFI: 01.00.259
Мониторы:
iMac:
Разрешение: 1680 x 1050
Пиксельная глубина: Цвет 32-бит (ARGB8888)
Основной монитор: Да
Синхронизация: Выкл.
Онлайн: Да
Встроенный: Да
0
TheShock #
все дело в частоте шины, стопудово)

пс. спасибо
0
Lord_Daedra #
:-)
+1
egoserg #
Если начать очень часто стрелять, то игра начинает тормозить, это только у меня или это у всех?
+1
TheShock #
я играю с зажатым пробелом)
разве что когда очень много камней разлетаются на щепки — оно кеширует сильно. впринципе, через минуту игры нагрузка на проц должна упасть.
+1
Bonch #
TheShock, выложи уже проект на Github, второй раз прошу. Это будет полезно для развития, поверь.
+1
TheShock #
извини, сегодня планировали это сделать) и в Фордж тоже. я даже структуру проекта подстроил для Форджа
+2
TheShock #
github.com/theshock/libcanvas скоро будет на MooTools Forge
+1
Oniestel #
FireFox 3.6.8 работает, но весьма притормаживает; Chrome 5 — только после повторной загрузки страницы, но в разы быстрее, чем FireFox. P4-3Ghz, 2Gb Ram.
0
Scioner #
Intel E5300@2.6Ghz, 3GB RAM,
win7, опера 10.60, фф 4.0b4pre

в обоих браузерах всё летает. только в файрфоксе иногда звук отстаёт.
–1
tenshi #
у меня в экран не влезает
+1
babarun #
основанного на MooTools

— что имел ввиду? события им перехватываешь? или еще что-то мутулс полезное даёт… я вот думаю привязываться к jquery, или делать независимый фреймворк.
+4
TheShock #
Я высказывал свое мнение во второй части:
Я очень люблю jQuery. Прям души не чаю в нем. Он прекрасен. Изумителен. Но…
Он совершенно не подходит для разработки на canvas. Что есть, что нету. jQuery == DOM
Сначала я делал свой миниатюрный фреймворк для этой библиотеки, но потом осознал, что я изобретаю MooTools. Я успел полюбить этот фреймворк за время работы с ним (а узнал я его после jQuery), и я вам скажу, что он не менее прекрасен! Конечно, для работы с DOM jQuery подходит значительно лучше, но для таких целей, как рисование в канвас без него было бы очень сложно. Каждый класс, каждый метод в LibCanvas просто пропитан мутулзом и без него это все не получилось бы так красиво и изящно

У мутулза отличные расширения прототипов. Есть куча возможностей, которые нужны при геймдевелопинге и вообще при рисовании Мутулз. ДжиКвери для Канваса — не нужен, а вот Мутулз — нужен:
$extend(), $merge(), $random(), Array: [getLast(), getRandom(), each(), contains(), include(), erase()]

очень понравился метод .bind у ф-ции, который позволяет задать контекст.

а чего стоит работа с классами. у меня сейчас в LibCanvas — 37 полноценных классов. многое строится на множественном наследовании — от тех же LibCanvas.Interfaces.*.

Без мутулз было бы очень тяжело держать это все в голове. Я это знаю, так как я начинал без Мутулз и к Мутулз я пришёл. Зато теперь — очень изящный код. Достаточно посмотреть примеры)
+4
TheShock #
вот пример объекта, который можно двигать, прилинковывать к другим объектам, кидать в другие объекты, ловить все события мыши, а еще он меняет стиль зависимо от состояния — синий при нажатии, зеленый при наведении и красный в обычном состоянии. без Мутулз, имхо, было бы не так изящно
Interface.Shape = new Class({
   Extends : 
LibCanvas.Interfaces.Drawable,
   Implements : [
      
LibCanvas.Interfaces.MouseListener,
      
LibCanvas.Interfaces.Draggable,
      
LibCanvas.Interfaces.Clickable,
      
LibCanvas.Interfaces.Linkable,
      
LibCanvas.Interfaces.Moveable,
      
LibCanvas.Interfaces.Droppable
   
],
   
getStyle : function () {
      return (
this.active && { fill "#99f"stroke "#006"})
          || (
this.hover  && { fill "#9f9"stroke "#060"})
          ||                 { 
fill "#f99"stroke "#600"};
   },
   
draw : function () {
      var 
ctx this.libcanvas.ctx.save();

      
this.lineWidth && ctx.set('lineWidth'this.lineWidth);

      
ctx.fill(this.shapethis.getStyle().fill)
       .
stroke(this.shapethis.getStyle().stroke)
       .
restore();
   }
});

0
tenshi #
(Shape= function(){
}).prototype= new function(){
MouseListener.prototype.apply( this )
//…
Droppable.prototype.apply( this )
this.getStyle= function(){… }
this.draw= function(){… }
}

0
tenshi #
;(Shape= function(){
}).prototype= new function(){
MouseListener.prototype.constructor.apply( this )
//…
Droppable.prototype.constructor.apply( this )
this.getStyle= function(){… }
this.draw= function(){… }
}
+1
TheShock #
я про это и говорю. у тебя пример ужасной записи. мутулз же — «облагораживает» эту запись
–1
tenshi #
что в ней ужасного, кроме того, что не используется слово «класс»?
0
TheShock #
Напиши полный вариант — обсудим
0
tenshi #
полный вариант чего? фреймворка?
0
TheShock #
Полный вариант представленного выше класса для сравнения твоего варианта и варианта с Мутулзом
0
tenshi #
а так не сравнить?
0
TheShock #
тяжело сравнивать два варианта, если второй в три раза короче логически
0
tenshi #
и ты путаешь понятие интерфейсов и примесей…
+1
TheShock #
я знаю, что это не те интерфейсы, которые интерфейсы в Джаве и остальных
0
tenshi #
это вообще не интерфейсы
0
TheShock #
Обсудили в команде и решили, что в твоих словах все-таки есть рациональное зерно. LibCanvas.Interfaces.* заменено на LibCanvas.Behaviors.*
0
j3d1 #
мде, теперь чтобы поиграть в простенькую игрушку с нормальным фпс нужно пипец какие мощности, не маразм ли?!
0
babarun #
это лишь первые шаги
–1
stogerc #
Этот вариант asteroids мне нравится больше.
0
SKYnv #
игра виснет если зажать шифт и попробовать стрелять
+2
TheShock #
ну и что? вы показываете мне Астероиды. А я показываю вам фреймворк, на котором можно сделать астероиды. Ну и астероиды)

пс. я так и не смог в них играть — ну очень быстро летает корабль. да и без звука скучно)
+1
auror #
Поразительно. Когда я начинал играть в игры, о такой графике даже нельзя было мечтать.
А о том, что это в будет в браузере…

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.