Солнечная система на LibCanvas



    Вчера был отличный топик, "История одного хабраспора", о создании «галактики» на HTML5 Canvas, который сам по себе да своими комментариями вдохновил меня на ответный код. Думал, до окончания документации, не писать новых вещей на Хабру, но, как видите, сорвался) Спасибо kibizoidus за это.

    В топике вы увидите описание процесс создания звёздной системы на последней версии LibCanvas. Быстро, оптимизированно, кратко.

    Сразу скажу, что ТЗ выполнена не полностью. Причина очень проста — придя вчера в 3 часа ночи с «Хоббита» я поставил перед собой чёткий дедлайн — не больше часа на всё. Честно говоря, я считил, добавив ещё утром за завтраком изменение курсора, но это детали) В час я уложился.

    В отличии от предыдущего автора мне не пришлось создавать «Virtualhost в своем dev-окружении, git-репозиторий» и всё остальное — всё это у меня всегда в бою для libcanvas.github.com. Потому я взял стандартный шаблон и сразу рынулся в бой, установив небо в качестве фона, чтобы не смотреть на одинокую черноту:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>LibCanvas :: Solar</title>
    		<link href="/files/styles.css" rel="stylesheet" />
    		<style> html, body { background: url(im/sky.png) } </style>
    		<script src="/files/js/atom.js"></script>
    		<script src="/files/js/libcanvas.js"></script>
    	</head>
    	<body>
    		<p><a href="/">Return to index</a></p>
    		<script>
    new function () {
    	LibCanvas.extract();
    
    	atom.dom(function () {
    		new Solar.Controller();
    	});
    };
    		</script>
    		<script src="js/controller.js"></script>
    	</body>
    </html>
    


    Первые шаги


    В первую очередь нам необходимо добавить само приложение. Сразу скажу — срок был очень ограничен, так что архитектурой я не заморачивался и по всему коду разбросаны магические числа и неверные решения, но в качестве реализации идеи подойдёт. Кроме создания приложения сразу добавим предзагрузку двух картинок — изображения Солнца и нарезку с изображениями всех планет. Добавляем картинки в ресурсы приложения, чтобы всегда можно было легко до них достучаться.
    /** @class Solar.Controller */
    atom.declare('Solar.Controller', {
    	initialize: function () {
    		this.size = new Size(840, 840);
    
    		this.app = new App({ size: this.size });
    
    		atom.ImagePreloader.run({
    			planets: 'im/planets.png',
    			sun    : 'im/sun.png'
    		}, this.start.bind(this));
    	},
    	
    	start: function (images) {
    		// images ready
    		this.app.resources.set( 'images', images );
    	}
    });
    


    Все астрономические объекты у нас будут на специальном слое. Их особенность в том, что каждый из них обновляется каждый кадр и нету смысла решать что-то особенное с перерисовкой. Просто ставим intersection: all, чтобы они все перерисовывались и invoke: true, чтобы у каждого из них вызывался метод onUpdate
    /** @class Solar.Controller */
    	// ..
    	initialize: function () {
    	// ..
    		this.geoLayer = this.app.createLayer({
    			name: 'geo',
    			invoke: true,
    			intersection: 'all',
    			zIndex: 2
    		});
    	// ..
    


    Самое простое, что мы можем сделать — это добавить отрисовку Солнца. Оно статическое и банально стоит в центре кадра. Создаём для него класс, который будет отрисовывать необходимую картинку в точку, наследуемся от App.Element, чтобы можно было добавить в приложение:
    /** @class Solar.Sun */
    atom.declare('Solar.Sun', App.Element, {
    
    	renderTo: function (ctx, resources) {
    		ctx.drawImage({
    			image : resources.get('images').get('sun'),
    			center: this.shape.center
    		});
    	}
    
    });
    


    После этого в нашем контроллере создаём наше Солнце:
    /** @class Solar.Controller */
    	// ..
    	start: function (images) {
    	// ..
    		this.sun = new Solar.Sun(this.geoLayer, {
    			shape: new Circle(this.app.rectangle.center, 50)
    		});
    	// ..
    


    Теперь у нас в системе горит одинокое Солнце:


    Планеты


    Следующая цель — планеты. У нас 12 планет. Первая будет на расстоянии 90 пикселей от центра система, каждая следующая на 26 пикселей дальше. Первая проходит круг за 40 секунд, каждая следующая на 20 секунд дольше. И у каждой планеты есть имя

    /** @class Solar.Controller */
    atom.declare('Solar.Controller', {
    	names : 'Selene Mimas Ares Enceladus Tethys Dione Zeus Rhea Titan Janus Hyperion Iapetus'
    		.split(' '),
    	
    	// ..
    	start: function (images) {
    	// ..
    		for (var i = 12; i--;) {
    			var planet = new Solar.Planet(this.geoLayer, {
    				sun   : this.sun,
    				radius: 90 + i * 26,
    				time  : 40 + i * 20,
    				image : i,
    				zIndex: 0,
    				name  : this.names[i]
    			});
    		}
    	// ..
    


    Выводим планету на орбиту очень легко — сначала размещаем её в центре системы, а потом смещаем вправо на радиус орбиты.

    	this.center = this.solarCenter.clone();
    	this.center.move([ this.radius, 0 ]);
    


    Скорость вращения найти не сложнее — нам необходимо пролетать 360 градусов за 'time' в секундах или 360/1000 за время в миллисекундах:

    	this.rotatePerMs = (360).degree() / 1000 / this.settings.get('time');
    


    Необходимая картинка из спрайтов вырезается очень просто — смещаемся вправо на индекс планеты:

    	getImagePart: function () {
    		var x = this.settings.get('image');
    
    		return this.layer.app.resources.get('images')
    			.get('planets')
    			.sprite(new Rectangle([ x*this.size.width,0 ],this.size));
    	},
    


    Сам процесс вращения планеты — просто вращаем центр планеты вокруг центра системы методом LibCanvas.Point.rotate. normalizeAngle нужен, чтобы угол всегда находился в пределах 0 и 360 градусов.

    	rotate: function (angle) {
    		if (angle == null) angle = Number.random(0, 360).degree();
    
    		this.angle = (this.angle + angle).normalizeAngle();
    		this.center.rotate(angle, this.solarCenter);
    
    		return this;
    	},
    


    Добавляем интерактивности — каждый вызов метода onUpdate вертим планету, не забывая делать поправку на время, которое прошло с предыдущего вызова. onUpdate, как и renderTo — встроенные в фреймворк LibCanvas методы, которые можно переопределить и изменить поведение.
    	onUpdate: function (time) {
    		this.rotate(time * this.rotatePerMs);
    		this.redraw();
    	},
    


    Ну и самое главное — добавляем отрисовку картинки:

    	renderTo: function (ctx) {
    		ctx.drawImage({
    			image : this.image,
    			center: this.center,
    			angle : this.angle
    		});
    	}
    


    Скрытый текст
    /** @class Solar.Planet */
    atom.declare('Solar.Planet', App.Element, {
    
    	angle: 0,
    
    	configure: function () {
    		this.size = new Size(26, 26);
    
    		this.center = this.solarCenter.clone();
    		this.center.move([ this.radius, 0 ]);
    
    		this.rotatePerMs = (360).degree() / 1000 / this.settings.get('time');
    		this.shape = new Circle(this.center, this.size.width/2);
    		this.image  = this.getImagePart();
    		this.rotate();
    	},
    
    	getImagePart: function () {
    		var x = this.settings.get('image');
    
    		return this.layer.app.resources.get('images')
    			.get('planets')
    			.sprite(new Rectangle([x*this.size.width,0],this.size));
    	},
    
    	get radius () {
    		return this.settings.get('radius');
    	},
    
    	get solarCenter () {
    		return this.settings.get('sun').shape.center;
    	},
    
    	rotate: function (angle) {
    		if (angle == null) angle = Number.random(0, 360).degree();
    
    		this.angle = (this.angle + angle).normalizeAngle();
    		this.center.rotate(angle, this.solarCenter);
    
    		return this;
    	},
    
    	onUpdate: function (time) {
    		this.rotate(time * this.rotatePerMs);
    		this.redraw();
    	},
    
    	renderTo: function (ctx) {
    		ctx.drawImage({
    			image : this.image,
    			center: this.center,
    			angle : this.angle
    		});
    	}
    
    });
    



    Теперь у нас в системе появились планеты:


    Орбиты


    Дальнейшая задача — добавить орбиты. У них есть существенные отличия от планет, потому мы будем использовать другой подход и отдельный слой.
    Во-первых, они статичны. В отличии от планет — не меняются, или меняются очень редко. Кроме этого — они значительно больше планет и их отрисовка ресурсозатратнее, потому будем её производить как можно реже.

    Создаём слой. Вызов onUpdate нам тут не нужен, а пересечениями мы будем управлять вручную. Всё-равно этих пересечений объектов между собой, как мы видим, особо и нету. Кроме этого, чтобы не возвращаться, сразу добавим метод создания орбиты у планеты
    /** @class Solar.Controller */
    	// ..
    	initialize: function () {
    	// ..
    		this.orbitLayer = this.app.createLayer({
    			name: 'orbit',
    			intersection: 'manual',
    			zIndex: 1
    		});
    	// ..
    	
    	start: function (images) {
    	// ..
    		for (var i = 12; i--;) {
    			var planet = new Solar.Planet(this.geoLayer, {
    				// ..
    			});
    			planet.createOrbit(this.orbitLayer, i); // <===
    
    			// ..
    		}
    	// ..
    	
    


    /** @class Solar.Planet */
    	// ..
    	createOrbit: function (layer, z) {
    		return this.orbit = new Solar.Orbit(layer, { planet: this, zIndex: z });
    	},
    	// ..
    


    Изначальный код орбиты достаточно простой. Создаём Circle, который будет основой нашей отрисовки, в методе renderTo просто stroke'аем этот круг. Единственно, что теперь ещё добавился метод clearPrevious, который изменяет принцип очистки слоя от этого объекта — мы не грубо очищаем содержимое BoundingRectangle, а аккуратненько зарисовываем обводку круга при помощи инвертированного строука ctx.clear(this.shape, true):
    /** @class Solar.Orbit */
    atom.declare('Solar.Orbit', App.Element, {
    
    	configure: function () {
    		this.shape = new Circle(this.planet.solarCenter, this.planet.radius);
    	},
    
    	get planet () {
    		return this.settings.get('planet');
    	},
    
    	clearPrevious: function (ctx) {
    		ctx.clear(this.shape, true);
    	},
    
    	renderTo: function (ctx, resources) {
    		ctx.stroke(this.shape, 'rgba(0,192,255,0.5)');
    	}
    
    });
    


    Теперь наше приложение приобрело вид, близкий к окончательному и осталось добавить взаимодействие с пользователем.


    Подписываемся на мышь


    Создадим объект LibCanvas.Mouse, который ловит события мыши определённого dom-элемента и объект LibCanvas.App.MouseHandler, который будет обрабатывать эти события и перенаправлять соответствующему элементу приложения
    /** @class Solar.Controller */
    
    	// ..
    	start: function (images) {
    		var mouse, mouseHandler;
    
    		mouse = new Mouse(this.app.container.bounds);
    		mouseHandler = new App.MouseHandler({ mouse: mouse, app: this.app });
    
    		this.app.resources.set({
    			images: images,
    			mouse : mouse,
    			mouseHandler: mouseHandler
    		});
    		
    		// ..
    		
    		for (var i = 12; i--;) {
    			var planet = new Solar.Planet(this.geoLayer, {
    				// ..
    			});
    			planet.createOrbit(this.orbitLayer, i);
    			
    			mouseHandler.subscribe( planet );
    			mouseHandler.subscribe( planet.orbit );
    		}
    	}
    	
    	// ..
    


    Мышь уже ловиться, но пока мы это никак не можем заметить. Начнём с орбит. Сейчас она ловиться просто если находится внутри неё. Т.Е. любое место в пределах между солнцем и планетой считается триггером для срабатывания орбиты. Мы это изменим, переопределив метод isTriggerPoint. Теперь события мыши будут срабатавать на орбиту только в пределах 13 пикселей от неё.
    /** @class Solar.Orbit */
    
    	// ..
    	isTriggerPoint: function (point) {
    		var distance = this.planet.solarCenter.distanceTo(point);
    
    		return (this.planet.radius - distance).abs() < 13;
    	},
    	
    	// ..
    


    Сразу же, чтобы проверить, как оно работает — активируем событие hover при помощи поведения Clickable и слегка изменим метод отрисовки:

    /** @class Solar.Orbit */
    
    	// ..
    	configure: function () {
    		// ..
    		new App.Clickable( this, this.redraw ).start();
    	},
    	// ..
    
    	renderTo: function (ctx, resources) {
    		if (this.hover) {
    			ctx.stroke(this.shape, 'rgba(255,64,64,0.8)');
    		} else {
    			ctx.stroke(this.shape, 'rgba(0,192,255,0.5)');
    		}
    	}
    	// ..
    




    Сейчас мы видим, что орбиты меняются при наведении мыши. Но при наведении на планету мышь блокируется и до орбиты уже не достаёт. Слегка изменим это поведение, добавив hover к планете и проверяя оба этих состояния:

    /** @class Solar.Orbit */
    
    	// ..
    	
    	isHover: function () {
    		return this.hover || this.planet.hover;
    	},
    
    	renderTo: function (ctx, resources) {
    		if (this.isHover()) {
    		// ..
    	}
    	// ..
    


    А т.к. при наведении на планету нам всё-равно понадобится перерисовывать орбиту каждый кадр (круг вокруг планеты смещается то) — добавляем redraw в onUpdate
    /** @class Solar.Planet */
    
    	// ..
    	configure: function () {
    		// ..
    		new App.Clickable( this, this.redraw ).start();
    	},
    	// ..
    
    	onUpdate: function (time) {
    		// ..
    		if (this.orbit.isHover()) this.orbit.redraw();
    	},
    	// ..
    


    Теперь планета не блокирует hover и мы можем занятся стилизацией орбиты. Задачу мы выполним очень легко. Сначала отрисовываем орбиту. Потом стираем shape планеты, а потом обводим shape планеты. Таким образом получится быстро и ненапряжно достичь результата:

    /** @class Solar.Orbit */
    	// ..
    	renderTo: function (ctx, resources) {
    		if (this.isHover()) {
    			ctx.save();
    			ctx.set({ strokeStyle: 'rgb(0,192,255)', lineWidth: 3 });
    			ctx.stroke(this.shape);
    			ctx.clear(this.planet.shape);
    			ctx.stroke(this.planet.shape);
    			ctx.restore();
    		} else {
    			ctx.stroke(this.shape, 'rgba(0,192,255,0.5)');
    		}
    	}
    


    Но тут нас застанет неприятность — наш «чистильщик» ничего не знает ни про толщину орбиты ни, тем более, о том, что на ней ещё есть «грыжа» от планеты. Переопределяем очередной метод LibCanvas — saveCurrentBoundingShape, который будет сохранять, где именно в последний раз была грыжа, если была вообще. Он так же будет вызываться, когда необходимо автоматически:
    /** @class Solar.Orbit */
    	// ..
    
    	saveCurrentBoundingShape: function () {
    		if (this.isHover()) {
    			this.previousBoundingShape = this.planet.shape.clone().grow(6);
    		} else {
    			this.previousBoundingShape = null;
    		}
    		return this;
    	},
    


    Теперь мы можем сообщить нашему чистильщику о новых условиях. Если грыжи не было — чистим по старому. Иначе — увеличиваем толщину, чтобы хорошо стереть, чистим грыжу и потом востанавливаем настройки холста:
    /** @class Solar.Orbit */
    	// ..
    
    	clearPrevious: function (ctx) {
    		if (this.previousBoundingShape) {
    			ctx.save();
    			ctx.set({ lineWidth: 4 });
    			ctx.clear(this.previousBoundingShape);
    			ctx.clear(this.shape, true);
    			ctx.restore();
    		} else {
    			ctx.clear(this.shape, true);
    		}
    	},
    


    Результат ровно ожидаемый:


    Информация о планете


    Последнее, что необходимо добавить — всплывающее окошко с названием планеты. Мы бы могли подписаться на события mouseover и mouseout у Solar.Planet, но они срабатывают только при движении мыши, т.е. если планета уедет из под неподвижной мыши — mouseout не сработает. Потому мы берём точку мыши и каждый кадр проверяем, не находится ли она над нашей планетой.
    /** @class Solar.Planet */
    	// ..
    
    	configure: function () {
    		// ..
    		this.mousePoint = this.layer.app.resources.get('mouse').point;
    		this.info = new Solar.Info(this.layer, { planet: this, zIndex: 1 });
    	},
    
    	checkStatus: function (visible) {
    		if (this.info.isVisible() != visible) {
    			this.info[visible ? 'show' : 'hide']();
    		}
    	},
    
    	onUpdate: function (time) {
    		// ..
    		this.checkStatus(this.isTriggerPoint(this.mousePoint));
    		// смещаем фигуру инфо блока за нашей планетой
    		if (this.info.isVisible()) this.info.updateShape(this.shape.center);
    	},
    	
    	// ..
    


    settings: { hidden: true } — одна из настроек LibCanvas. Этот элемент никак не будет учавствовать в отрисовке, но всё так же ловит события мыши, если подписан. Потому мы создаём простой и логичный класс Solar.Info, используя эту возможность.

    /** @class Solar.Info */
    atom.declare('Solar.Info', App.Element, {
    
    	settings: { hidden: true },
    
    	get planet () {
    		return this.settings.get('planet');
    	},
    
    	configure: function () {
    		this.shape = new Rectangle(0,0,100,30);
    	},
    
    	updateShape: function (from) {
    		this.shape.moveTo(from).move([20,10])
    	},
    
    	show: function () {
    		this.settings.set({ hidden: false });
    		this.redraw();
    	},
    
    	hide: function () {
    		this.settings.set({ hidden: true });
    		this.redraw();
    	},
    
    	renderTo: function (ctx) {
    		ctx.fill(this.shape, '#002244');
    		ctx.text({
    			to   : this.shape,
    			text : this.planet.settings.get('name'),
    			color: '#0ff',
    			align: 'center',
    			optimize: false,
    			padding: 3
    		})
    	}
    });
    


    И получаем предсказуемый результат:

    Единственное, что осталось — добавить изменение курсора мыши при наведении на планету:
    /** @class Solar.Planet */
    	// ..
    
    	checkStatus: function (visible) {
    		if (this.info.isVisible() != visible) {
    			this.info[visible ? 'show' : 'hide']();
    			this.layer.dom.element.css('cursor', visible ? 'pointer' : 'default');
    		}
    	},
    	
    	// ..
    


    Результат


    Смотрим результат на GitHub, а также исходники.

    Так же сравним с решением из предыдущего топика:
    1. Значительно меньше кода
    2. Значительно выше производительность

    Проверим в профайле. Чем выше процент (program) — тем лучше. На пустом приложении он доходит до 100%.

    Оригинальная версия:


    Версия на LibCanvas:


    Пустая вкладка:


    Также я проверил на слабом ноуте фактическую производительность (фпс/загрузка одного ядра проца):

    Оригинальная версия — загрузка до 100%, 44 fps:


    Версия на LibCanvas — загрузка до 40%, стабильные 60 fps:


    Пишите код в удовольствие, пользуйтесь хорошими инструментами, наслаждайтесь. Если есть вопросы, а на Хабре задать не имеете возможности — пишите на емейл shocksilien@gmail.com
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 147

      –26
      Вы меня конечно все извините, но у Канваса есть одна большая беда по сравнению с тем же Флешем. Отсутвтие GUI для создания подобных даже галактик. На рисование всего этого ушло около часа — неплохой результат, но… Вот дизайнер просто не сможет этого создать — он ЯП обычно не изучает, тогда как во Флеше сможет скорее всего накидать.

      Пока такая сложность создания таких вот вещей сохранится, Флеш будет на коне…
        +19
        боюсь, что галактику даже на флеше хрен кто «накидает»
          +2
          Зря вы такое пишите. В отличие от html5 во flash уже есть нативный движок с иерархическим дисплей-листом и нужными функциями отрисовки. Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.
            +2
            Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.

            Ну где же код? Почему все так любят чесать языками, но не любят давать никаких пруфов? Только virtualtoy показал хоть какой-то результат, но он не соответствует тому, что вы утверждаете. Просто тут в комметах Флешу прям чудеса приписывают. Вообще проц не грузит, описанное в топике за 20 минут реализуется мышкой через GUI и так далее, а как доходит до дела — так куча подводных камней.
              0
              К сожалению, лично я сейчас работаю. И не могу все бросить ради доказательства. Но как появится свободное время обязательно сделаю пример. Через GUI можно сделать, но с минимумом кода и максимум графических элементов.
                +1
                Вот только, надеюсь, мы увидим именно галактику, а то меня уж очень зацепило ваше «Зря вы такое пишите» и поэтому невероятно сильно хочется посмотреть на результат работы нативного движка с иерархическим дисплей-листом при отрисовке такого количества объектов.
                  +1
                  Меня тоже задело:

                  хрен кто

                  Так что пример будет.
                    +2
                    Вы, кажется, не поняли шутку gmist

                    Evengard сказал:
                    Отсутвтие GUI для создания подобных даже галактик


                    На что gmist ответил:
                    боюсь, что галактику даже на флеше хрен кто «накидает»


                    В галактике миллионы объектов, потому и хочется посмотреть на результат.
                      0
                      Извините, читал сквозь строк.
          +7
          Вы имеете ввиду что-то вроде конструктора, когда мышкой накликал и оно заработало? Да, согласен, без этого Html5 Canvas будет доступен только для программистов, как бы ужасно это ни звучало ;)
            0
            Да, именно это.
              0
              Да появится все это — уже есть подобные он-лайн инструменты (Canvas — HTML5 — анимация и все дела).
              Значит, распространение всего этого дело времени не более того.
                0
                Ну лично я и не сомневаюсь ;)
              +1
              Дизайнер сделает этот GUI на HTML+CSS :) А если нужен жестокий realtime то и во флеше и тут придётся поработать кодеру.
                0
                Советую вам посмотреть наработки Виктора Брата по данному вопросу, флеш там просто нервно курит в сторонке.
                  0
                  А ссылку можно?)
                    +1
                      0
                      Дааа, смотрится вкусно.
                      +2
                      Простите оговорился Bret Victor вот vimeo.com/36579366
                        0
                        Это просто потрясающе, спасибо вам за эту ссылку.
                          0
                          Пожалуйста
                    0
                    Посмотрите в сторону Adobe Edge
                    • НЛО прилетело и опубликовало эту надпись здесь
                      +1
                      Ждем версию на чистом html+js )
                        0
                        Дивами, чтоли?) А орбиты рисовать картинками?
                          +3
                          Зачем картинками? border-radius же )
                            0
                            Ждём на чистом CSS, что уж там! :)
                              0
                              А дырку под планету — как?)
                                0
                                Я думаю, можно что-нибудь придумать )
                                  +3
                                    0
                                    Не, там дырки под планету в орбите нету ведь,
                                      +7
                                      И это можно jsfiddle.net/qCKmh/
                                        +1
                                        Оригинально :)
                                          0
                                          Чит ведь) Но он не решит главной проблемы — рисуем орбиту, на неё накладываем этот объект, но орбита остаётся внутри дырки. В топике это решается в этом отрывке:
                                          Сначала отрисовываем орбиту. Потом стираем shape планеты, а потом обводим shape планеты
                                            0
                                            Fixed&Improved jsfiddle.net/qCKmh/3/
                                              0
                                              Хорошоо) А теперь под ним орбиту пропустить)
                                                +2
                                                И это можно jsfiddle.net/qCKmh/4/
                                                  0
                                                  У меня в дырке то звёздочки просматриваются ;)
                                                  image

                                                  Но ладно, всё-равно решение прикольное)
                            +3
                            Я уж думал вы забросили свой проект, к счастью ошибся :)

                            Кстати, помнится вы упоминали про игру на libCanvas
                            Уже есть какое-нибудь демо?
                              +3
                              Я уж думал вы забросили свой проект, к счастью ошибся :)

                              Ни в коем случае) Развивается и очень активно. Просто пока без публикаций. Надо исправить)

                              Кстати, помнится вы упоминали про игру на libCanvas
                              Уже есть какое-нибудь демо?

                              Ну люди уже играют, но пока закрыто. Обещает быть шедевром)

                              Можете, кстати, глянуть видео Berserk: Rebirth, тоже на LibCanvas игрушка (ещё на прошлой версии). Я сам в разработке участие не принимал, но консультировал. Сильная команда делала.
                              0
                              www.casus-belli.com/ru интересно на чем написан. сама по себе она не очень интересная, интересен тот факт, что она на js.
                                +4
                                Даешь больше топиков про канвас, хороших и разных!
                                И да, это решение жрет значительно меньше ресурсов.
                                Кстати, кто-то там обещал решение на флеше?)
                                  +28
                                  Кстати, кто-то там обещал решение на флеше?)

                                  Ща, погодите, пока у них билдер запустится, пока проект создадут, пока поймут как делать. Может, к завтрашнему дню кто-то и осилит) Это ведь вам не комменты в топики по html5 писать.
                                  –12
                                  Шок, вы, конечно, молодец, но флеш опускаете зря.
                                    +11
                                    Ну в топике ни слова про флеш. Но от комментов просто уже устал. Обязательно в любом топике про Canvas появится что-то в духе: «ууу, html5 — фигня, на флеше это сделать значительно проще». Да вот, посмотрите хоть прям этот топик и первый коммент. Хоть кто-то бы сделал, да выложил, да описал. И без закидонов в сторону html5, а просто так, чтобы люди поучились, да и я сам с удовольствием вспомнил бы, как это делается.

                                    Ещё раз обратите внимание — я в топике сухо рассказал о технологии, не акцентируя внимания ни на каких альтернативах, но всё-равно первый коммент был про флеш.
                                      +1
                                      Эмм… «пока у них билдер запустится, пока проект создадут, пока поймут как делать. Может, к завтрашнему дню кто-то и осилит» — ваши слова? :) Если бы я был флешом — я бы обиделся :) Пойду билдер открывать…
                                        +8
                                        Ну как без лёгкой иронии в комментах? Тем более, про флеш уже вспомнили, а примеров так и не показали ;)
                                          +2
                                          Просто тут уже грозились, ещё в прошлом топике, что типа на флэше такое наваять — 30 минут. Да что-то результатов до сих пор не видно.
                                            0
                                            Подождите чуток
                                              +8
                                              Ок, подождём. Просто ещё сутки назад грозились сделать за «20 минут от силы» :)
                                                +1
                                                Ну где же?)
                                                  +3
                                                  Готово, заняло 1 час 10 минут. Не бейте за них, пожалуйста. Сейчас выложу куда-нибудь
                                                    +1
                                                    Что-то мне и класть некуда :( пока так:
                                                    04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system.swf
                                                      +6
                                                      Смотрится хорошо. За одинаковое время почти так же, как на LibCanvas. Но… на одном и том же компе:





                                                      27% загрузка проца от флеша и 2% загрузка проца от канваса. Где ж обещанная производительность? ;)
                                                        0
                                                        Попросили добавить сравнение с SVG вариантом.
                                                        На том же железе — 7% загрузка проца при 36 fps

                                                          +1
                                                          Если сравнивать этот флешевый клип с реализацией из статьи про Хабраспор, то на моем FF 10 c Celeron B815 работает в стопятьсот раз адекватнее — можно двигать курсором мыши, переключаться по вкладкам, заниматься любыми делами без 100% загрузки процессора (что характерно, при тесте на HTML-канве FF потреблял не более 40% процессора, но зато неожиданно X-сервер стал кушать всё оставшееся). Ваш вариант, к моей бурной радости (хе-хе), работает ничуть не хуже, чем вариант на flash. Браво!
                                                          +2
                                                          Быстродействие не впечатлило. Как-то так:

                                                          Browser   CPU
                                                          Opera     100%
                                                          IE 8       70%
                                                          Chrome    100%
                                                          FF        100%
                                                          
                                                            0
                                                            Извините, апдейт:
                                                            04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v2.swf
                                                            Я оперные числа возьму. У меня флеш жрет 30-50%, канвас 40-50%, сейчас проверю еще
                                                              0
                                                              Всё тех же 25%. У вас вариант из топика жрёт 40-50%? Где? На каком железе?
                                                                0
                                                                Да, скачет примерно 35-50% в опере 12.11. Ноут HP pavilion dv6000. 2 гб озу, core2duo 2.2, видео geforce 8400m gs
                                                                А хром флеш опустил, да-да :)
                                                                  0
                                                                  Ну опера вообще относительно тормозная, да( Она скорее исключение. Даже в Фоксе вменяемая производительность.
                                                                    0
                                                                    Правда. Жаль, а я так люблю оперу :(
                                                                    Попробую подвести итог.
                                                                    1. флешевый вариант сделан с нуля, не использовано никаких движков (сознаюсь, стырил где-то функцию для рисования дуги), оптимизация никакая (TheShock, низкий вам поклон, вы сколько либканвас разрабатываете и оптимизируете?). Возможно, что вариант с использованием bitmapdata и блиттинга был бы производительнее.
                                                                    2. не все поняли, зачем было сделано демо: задели слова «пока у них билдер запустится, пока проект создадут, пока поймут как делать Может, к завтрашнему дню кто-то и осилит». Извините, иронию не заметил.
                                                                    3. флеш не защищаю, у него, как и у html5 свои плюсы и минусы. Кричать «flash, die!», равно как «html5 sucks!» неразумно.
                                                                      +3
                                                                      1. Ну Флеш ведь сам по себе движок. Вы ведь не юзаете там прямую отрисовку в холст, события как-то к элементам цепляете ;) LibCanvas'у уже почти 3 года.
                                                                      2. Ну просто во всех топиках кричат, что на флеше это за 15 минут делается, да ещё и не тормозит в сравнении с html5) А как сделать — то никого)
                                                                      3. Это да) Но на туториалы по Флешу html'щики не набегают с криками «Canvas! Только Canvas!»
                                                                        +1
                                                                        1. подловили
                                                                        2. я не кричал, а сделал
                                                                        3. :)
                                                                        извините, не смог успокоиться (совершенно забыл о bitmapcaching):
                                                                        04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v3.swf
                                                                        теперь в хроме флеш жрет 15-25%, а канвас 13-18%
                                                                        вот такие как я и дискредитировали флеш *посыпаю голову пеплом*
                                                                          0
                                                                          2. Вы молодец, не спорю)
                                                                          3. Во, теперь загрузка 5%, это уже результат, спасибо)
                                                                  0
                                                                  К слову, у меня на одном из компов ваш пример скачет в пределах 40-50% CPU при 60 FPS. Вчерашний пример — 86% :) (Chrome 23)

                                                                  А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.
                                                                    0
                                                                    А что за комп? И какой FPS на каждом из вариантов? (fpsможно смотреть по shift-esc)

                                                                    А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.

                                                                    Ну это просто к рендеру мало относилось, потому его отрезал с чистой совестью, чтобы вписаться в доступное время.
                                                                      +1
                                                                      TheShock, запускай WebGL-2d покажем этим флэшерам, что такое перфоманс!
                                                                        0
                                                                        Stage3d тоже интересная штука. Подскажите, пожалуйста, canvas аппаратно ускорен?
                                                                          0
                                                                          На сколько я понимаю только композитинг слоёв
                                                                            0
                                                                            Все же что-то, наверное, добавляет. Флешевый пример — полностью софтовый (писал я его в flash cs3, которому уже лет 6). Вариант с каким-нибудь современным starling framework'ом будет бегать не медленнее канваса, хотя, видимо, придется поизвращаться с векторными линиями
                                                                              0
                                                                              Как у вас во флеше всё сложно ;)
                                                                            0
                                                                            В той или иной мере да. Для Opera, Chrome можно посмотреть тут about:gpu
                                                                          0
                                                                          Core2Duo E7400 Ubuntu 12.04.

                                                                          По FPS: 59-60 ваш пример, 34-36 вчерашний пример.

                                                                          P.S. solar_system_v3.swf от virtualtoy выдает 65% CPU.

                                                                          P.P.S. WebGL Aquarium на 1000 рыб тянет все те же 30FPS. Это к вопросу про производительность в целом.
                                                                            0
                                                                            Ноут? Случайно не от батареи работает сейчас?
                                                                              0
                                                                              Нет, десктоп.

                                                                              Другой десктоп (i5 750, система и браузер те же):
                                                                              • ваш пример — 40%
                                                                              • вчерашний — 82%
                                                                              • флеш — 51%
                                                                                0
                                                                                Очень странная нагрузка для такого мощного проца. Но относительно всё равно результат радует)
                                                                                  0
                                                                                  Может дело в этом:
                                                                                  * Canvas: Software only, hardware acceleration unavailable
                                                                                  * Accelerated 2d canvas is unstable in Linux at the moment.
                                                                                    0
                                                                                    Угу, примерно такая же картинка под 12.10 у меня (с поправкой на более слабый проц). Этот пример около 50, вчерашний и флэш около 90.
                                                                              0
                                                                              у меня везде скачет с 43 до 60 — т.е. на полсекунды тормоз с определенной периодичностью.
                                                                                0
                                                                                Может кто-то частотой процессора балуется, меняя уровни?
                                                        +4
                                                        Шок, вы, конечно, молодец, но флеш опускаете зря.

                                                        Зря? — Лично я последнее время очень ненавижу(раньше просто не любил его) флеш потому что у меня из за него падает хром.
                                                        П.с Мне кажется что флешу пора на пенсию с его багами и дырками в безопасности…
                                                          0
                                                          Отключите его. А мне иногда приятно в флешевые игрушки поиграть. И не только мне.
                                                            0
                                                            Он у меня в основном отключен(уже больше года), но иногда приходиться включать что бы видео по смотреть, и бывает через пару минут падает хром или флеш.
                                                        +1
                                                        Какие милые масштабы орбит и размеров планет!
                                                          +2
                                                          Согласно первоначальному условию, это ведь всего лишь модель)
                                                            +1
                                                            В реальном масштабе она не то что в монитор, в комнату не уместится.
                                                              0
                                                              А если вместится — то мелких планет будет не разглядеть.
                                                              Но равномерные радиусы идеально круглых орбит и одинаковый размер планет — это совсем уж картонно :)
                                                            0
                                                            А можно узнать технические параметры «слабого ноута»?

                                                            И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?
                                                              0
                                                              И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?

                                                              Вообще это не проблема. Берём прозрачно-чёрный градиент от солнца и накладываем его поверх планеты с globalCompositeOperation, если не ошибаюсь, source-in. Но я решил сделать поближе к оригиналу.

                                                              А можно узнать технические параметры «слабого ноута»?

                                                              на самом деле «слабый» — это образно. Проц i5, но в энергосберегающем режиме да на старой версии браузера. У меня сейчас на том же проце на стационарнике 1-2% загрузка проца, так что как абсолютный результат не пойдёт — только в качестве сравнения.
                                                              0
                                                              Планеты качаются влево-вправо, аж укачивает
                                                                +3
                                                                Объясните? Не вижу такого эффекта
                                                                  0
                                                                  сейчас попробую описать (в предыдущем примере от другого автора такого не было) а у вас происходит колебание планеты влево-вправо (помимо движения его по орбите)
                                                                    0
                                                                    Такое впечатление, будто координаты планет только целые числа. В предыдущем варианте видимо вещественная арифметика была и движение плавнее выглядит.

                                                                    UPD это зависит от браузера, в FF оба варианта плавные
                                                                      0
                                                                      UPD2 в «стандартных» браузерах (FF, Opera, Chromium) оба варианта плавные. В нестандартных (я использую Konqueror), варант от kibizoidus — плавные изменения координат, вариант TheShock — прыгают картинки по целым позициям.
                                                                        0
                                                                        Посмотрел в rekonq. Вижу дрожание, да
                                                                  0
                                                                  Планеты не по центру обводки расположены, особенно это заметно на внешних орбитах.

                                                                  Например:
                                                                  habrastorage.org/storage2/318/de0/b0c/318de0b0c4696e852089cda4fa1319e7.png

                                                                  Видно как сверху между обводкой и планетой просвечивают звезды, снизу такого нет :)
                                                                    0
                                                                    Это недостатки торопливой нарезки)
                                                                    0
                                                                    Спасибо за топик! Только это не галактическая система, а звездная система
                                                                      0
                                                                      Вы правы, вечером исправлю)
                                                                      +1
                                                                      Господа, это ТЗ заразно. Мне тоже пришлось выпилить свой вариант. На мой взгляд чудес никто не продемонстрировал (если не считать, что Вы так быстро и классно написали статью с готовой демкой). Хром и IE 10 ожидаемо лучше всех, Опера и FF плетутся в конце.
                                                                        +2
                                                                        выпилить

                                                                        таки «Запилить». «Выпилить» — это «уничтожить» ;)

                                                                        быстро и классно

                                                                        ну так в том то и дело, что это работает быстро и оптимизированно) и работает у меня хорошо даже в iPad ;)
                                                                          0
                                                                          Не могу понять почему, но движение рывками. У меня в игре тоже подобная ситуация происходит.
                                                                            0
                                                                            Кажется проблема найдена) И называется она requestAnimationFrame. Попробуйте все таки рендерлуп поместить в таймаут, чисто для проверки.
                                                                              0
                                                                              У меня, кстати, в таймауте, а не в раф
                                                                                0
                                                                                Вероятно, оно не может 62 кадра в секунду вытягивать постоянно, от того и рывки. Что бы не было рывков, график кадров в секунду должен быть ровный, как поверхность зеркала на хаббле:)
                                                                                  0
                                                                                  Ну проц ведь не перегружён, даже с запасом. Или ты о том, что надо ставить ровно 60?)
                                                                                  Хотя я рывков не вижу, правда)
                                                                                    0
                                                                                    хз, надо поглядеть на график FPS. вот я искуственно понизил до комфортных 31 FPS, рывков не наблюдаю и график выглядит вот так:
                                                                                    image
                                                                                      0
                                                                                      А дайте ка эту мерялку fps, пожалуйста)
                                                                            +1
                                                                            Орбиты неправильно выделяются в ff17
                                                                            +4
                                                                              +1
                                                                              Смотрится невероятно, конечно. Но WebGL ведь)
                                                                              +2
                                                                              Просто замечательно! Даже на смартфоне вполне сносно работает.
                                                                                0
                                                                                Спасибо. А какой смарт?)
                                                                                  +1
                                                                                  Айфон 5, айпад 2 не намного отстает — что-то в районе 15 кадров
                                                                                0
                                                                                *приготовил попкорн*
                                                                                А кто возьмется на сильверлайте? =) Думаю, производительность у него будет в минусе, а простота написания наобротот в плюсе.
                                                                                  +3
                                                                                  Это на который даже сам MS забил?
                                                                                    0
                                                                                    не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.
                                                                                    но это не олимпиада и мне не 15 лет, чтобы бросаться делать «за час» — я бы предпочел посмотреть на такую реализацию от настоящих специалистов сильверлайта :)
                                                                                      +2
                                                                                      не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.

                                                                                      О! Ещё и Сильверлайтеры подтянулись с «языкочесательством». Я не бросался «успеть за час». Я просто ограничил время для себя, чтобы не тратить излишне много. Что успел — то успел.
                                                                                        0
                                                                                        в том и суть, что я не сильверлайтер, так бы уже рвал и метал, утверждал, что мой подход лучше и всякое такое :)
                                                                                        но как минимум пробовал писать под эту штуку и теперь хочу сравнить производительность, удобство и пр.
                                                                                        0
                                                                                        Не очень понятно почему Вы утверждаете, что там это сделать элементарно. Я по работе немного пользую WPF (как сервелат, только лучше :)) и не сказал бы, что там это сделать прямо уж так просто. По крайней мере мне это так не кажется.
                                                                                          +1
                                                                                          Вращение планет, орбиты и тултипы делаются элементарно. Накодил в перерывах между растапливанием печки и чисткой снега :)
                                                                                          Выделение делается относительно сложно и заняло чуть ли не в два раза больше времени, с рисованием ArcSegment через задницу и затем вращением его через Transform.
                                                                                          runserver.net/temp/SolarSystem.html

                                                                                          Что я не делал, так это выделение орбиты по Mouse Hover.
                                                                                          В тестах процессор жрется как бешеный, правда у меня Chrome + Mac, но на винде наверное так же.

                                                                                          К плюсам этой технологии можно отнести программинг на C#, относительную простоту реализации базовых вещей (ArcSegment — не базовая, потому и сложности), к минусам — прожорливость плагина, его слабую распостраненность.

                                                                                          Имхо, единственное, ради чего есть смысл использовать Silverlight, так это для реюзабельности кода на других платформах: программу за минимум времени сделать десктопной WPF, мобильной для WP 7-8, или за чуть большее время Metro/Modern приложением для Windows Store. Если же отделить бизнес-логику от интерфейса, то ее можно использовать на iOS и Android в MonoTouch/MonoDroid. Собственно, так я и делаю при портировании своих проектов по цепочке Android -> iOS (MonoTouch) -> Mac OS X (MonoMac) -> Win 8.
                                                                                            0
                                                                                            А сколько времени ушло на этот пример? В винде проц жрётся не очень. Где-то так же, как html5 в Опере. А почему не сделали выделение орбиты по hover?
                                                                                              0
                                                                                              пол-часа на базовую часть вчера вечером, час сегодня утром на выделение.
                                                                                              изредка приходилось гуглить, потому как с Path до этого в Silverlight не работал — я далеко не гуру по этой технологии, да и вообще не гуру и не из Бобруйска :)

                                                                                              Выделение изначально орбиты по hover не сделал, потому, что используется встроенный ToolTipService — он связывает объект ToolTip с объектом на Canvas и привязывается к видимой части объекта. У орбит видимая часть очень тонкая, потому наводиться будет очень тяжело.

                                                                                              Выложил обновленную версию, в ней я добавляю еще одну «невидимую» орбиту с толщиной в 20 пикселей и к ней привязываю другой тултип, без надписи. Ссылка та же:
                                                                                              runserver.net/temp/SolarSystem.html
                                                                                                0
                                                                                                Кстати, оно часто или вообще не реагирует на мышь или реагирует на мышь с существенной задержкой. Винда 7, 64 бита.
                                                                                                  0
                                                                                                  Ага, у системных тултипов есть базовая задержка. Чтобы ее не было, надо все переделывать на MouseOver и пр.
                                                                                                  Вообще, все хоть чуточку нестандартное в винляндии делается через задницу с горой дополнительного кода… Потому я и поставил крест на 5ти годах работок для AD и ушел программить на Mac, чего и всем желаю :)
                                                                                              0
                                                                                              У меня отъедает 3% на 2x2 ядрах. Значит где-то 12% на ядро. Пока это одно из самых производительных решений. Кстати небольшие рывки все равно заметны и здесь. Из минусов — сначала ИЕ мне предложил установить сервелат, потом сказал, что его версия устарела и предложил установить новую версию :). И только после этого все завелось.
                                                                                                0
                                                                                                У меня в маке жрет намного больше, но ни о каких рывках и речи нет.
                                                                                                Может это глаз реагирует на фиксированные 33 FPS? Или рывки видны, когда выбрана какая-то орбита?
                                                                                                  0
                                                                                                  Может это глаз реагирует на фиксированные 33 FPS
                                                                                                  Причин не знаю, но без всяких мышкодвижений и выделений орбит наблюдаются небольшие мелкие рывки.
                                                                                                  Microsoft Silverlight x64 5.1.10411.0 на Windows 7 prof sp1 x64 на Core i3-2100 3.1 GHz, 8 Gb, GeForce GT 520.
                                                                                                    0
                                                                                                    окей, посмотрю на досуге, почему такое может быть. все-таки там копеечные отрисовки, не должно дергаться.
                                                                                                    Если не сложно, проверьте, будет ли дергаться карта при перетаскивании вот тут:
                                                                                                    runserver.net/temp/sol/Solitaire.webTestPage.html
                                                                                                    Технология одна и та же, но в планетах движение по таймеру, а тут по событию мыши.
                                                                                                      0
                                                                                                      Дергается даже сильнее. Сужу по тому, что если смотреть на перемещающийся курсор, то относительно него карта заметно подрагивает. Если перемещать окна со включенным Aero, то ничего подобного не наблюдается.
                                                                                                        0
                                                                                                        Значит какие-то баги с акселерацией Silverlight в этом браузере, или вообще на этой ОС :)
                                                                                                        Окей, спасибо за тесты!
                                                                                        0
                                                                                        В сервелате писать смысла большого не вижу, лучше уж флеш использовать — он хоть большим числом платформ поддерживается.
                                                                                        Вот на что и вправду было бы интересно взглянуть, так это на решение на CSS3.
                                                                                          +1
                                                                                          Так есть же, azproduction выше привёл: codepen.io/juliangarnier/pen/idhuG
                                                                                          И 2d, и 3d. Феерично! Но css-кода там много…
                                                                                            0
                                                                                            Да, очень круто! Я как-то пропустил, спасибо. Правда, нормально только в Хроме заработало, Opera, FF и IE 10 дружно пасуют. Что касается загрузки CPU, то цифры сопоставимы с оптимизированным JS + Canvas или тем же flash. Мне кажется, что это говорит о том, что сами по себе ни JS ни Canvas особых тормозов не вносят, тормозит именно отрисовка самим браузером.
                                                                                        +1
                                                                                        Спасибо вам за отличную статью! И отдельное спасибо всем, кто делал разные версии.
                                                                                        Теперь бы ещё на Fabric.js версию… Может, kangax сделает?..

                                                                                        P.S. Как вам «Хоббит»? :)
                                                                                          +1
                                                                                          Пожалуйста)
                                                                                          Ждём kangax, отписался ему в Скайп)
                                                                                          Хоббит просто прелестный. До сих пор аж тепло в груди от просмотра.
                                                                                          С удовольствием схожу на него ещё раз.
                                                                                            0
                                                                                            Наконец нашёл пару свободных минут, вот пожалуйста — fabricjs.com/solar-system/

                                                                                            Заняло где-то 2 часа. По размеру получается приблизительно также как и LibCanvas. Хотя сама Fabric весит меньше :P

                                                                                            Было бы хорошо подробно написать о том как реализовал всё это, но нет времени. В двух словах:

                                                                                            — В принципе всё было более менее очевидно
                                                                                            — В Fabric нет hover событий (не хотел добавлять из-за производительности), поэтому пришлось сделать небольшой «monkey-patching» одного из методов, чтобы это событие симулировать (~20 линий)
                                                                                            — В Fabric нет ничего для работы со спрайтами (так как мы на игры, например, сильно не ориентируемся), поэтому тоже пришлось вручную. Рендерил спрайт прямо на маленький канвас в памяти, с отступом, потом читая через data-url создавал картинки (~15 линий)
                                                                                            — Архитектурой не занимался. Можно было бы создать специальный класс для планеты с подсветкой, но я сделал всё тупо и линейно. Подсветка вокруг планеты — просто круг который показываем в нужном месте или прячем за холстом. Ну и всё остальное тоже как отдельные простые объекты — планеты как картинки (fabric.Image), орбиты как круги (fabric.Circle), текст как текст (fabric.Text). Всё создаём, добавляем на холст, запускаем анимацию вокруг центра, и следим за hover событиями. Вот и всё.

                                                                                            Недостаток по сравнению с LibCanvas в том что рендерим всё на одном слое, поэтому производительность скорее всего хуже. И ещё иногда вижу какой-то глюк с разпознанием планет. Иногде не подсвечиваются кажется; не уверен в чём проблема, буду разбираться как будет время.

                                                                                            Ну а так в общем всё вроде более менее работает.
                                                                                              0
                                                                                              Ещё иногда МаусАут не срабатывает, если быстро двигать(


                                                                                              Ну и в Фоксе проверь, пожалуйста.
                                                                                            +2
                                                                                            Ох… Только добрался до комментариев.
                                                                                            Чувствуется — вывел мой топик холивары на новый уровень — не просто между Canvas vs Flash, а уже Canvas Native vs Canvas Libraries. И, думается мне, это далеко не конец.
                                                                                            По поводу примеров выше на Flash… Да, возможно — удобнее, но, прежде всего, только потому, что многие решения Flash-плеера решают и оптимизируют за программиста. Это, конечно же, хорошо, но теряется непосредственная связь между программистом и объектом программирования.
                                                                                            В общем и целом, пример показателен. По большей части в том, что мне есть куда стремиться и оптимизация и доведение до «товарного вида» важна не меньше, чем реализация концепта. И я за это благодарен всем присутствующим.
                                                                                            To be continued. Soon ^_~
                                                                                              +1
                                                                                              А ещё лучше — присоединяйся ко мне! Буду рад тебя видеть в команде LibCanvas)
                                                                                              0
                                                                                              Реализация от hizahazahub на флэше под stage3d, в качестве displaylist'а использован starling framework:
                                                                                              g-pixel.ru/star_system/
                                                                                                0
                                                                                                4% проца. Хм. Есть к чему стремиться!
                                                                                                  0
                                                                                                  А LibCanvas-версия сколько?

                                                                                                  Пс. stage3d-based версия очень зависима от окружения:




                                                                                                  250-280% загрузка проца на свежем Линуксе.
                                                                                                0
                                                                                                Попробовал LibCanvas-версию на недавнем приобретении — WP8 смарте. Работает лучше и плавнее, чем на iPad! Один косяк — при тапе канвас выделяется серым, выделение исчезает само примерно через полсекунды.
                                                                                                  0
                                                                                                  Спасибо за фидбек)

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

                                                                                                Самое читаемое