Как написать ПингПонг при помощи LibCanvas

[Voenniy]

Неделя Canvas на хабре, это гуд.

Можно браться за танчики :)

[Voenniy]

Кстати.
А как лучше всего в данном случае отрисовывать землю?

[TheShock]

Можно на отдельном слое:

libcanvas.createLayer( 'ground' )

Если хотите заняться этим, то могу консультировать и помочь.

[Voenniy]

Окей, если появятся вопросы — то обращусь

[Devgru]

Вопрос не в слое :)
Там же тысячи взаимодействующих объектов — клеточным автоматом что ли обрабатывать? :)

[TheShock]

Таки объясните?) Я именно в эту реализацию не играл, но не вижу проблем)

[Devgru]

Имею в виду вообще большие количества маленьких точек, подчиняющихся физическим законам. Разве моделирование их поведения не требует каких-то ёмких вычислений?

[TheShock]

Ну, вроде, там особо сложных вычислений нету. В видео
Scorched Earth — Game Play песчинки падают по принципу «под мной нету песчинки — я должна опуститься на пиксель вниз». Это хорошо видно в 1:15. Берем все пиксели в радиусе взрыва и пересчитываем их. В современных флешках вообще векторная земля.

[sunsey]

подскажете как игра называется? по скрину вспомнил, что играл давным-давно на спектруме, может где-то на эмуляторе найду =)

[TheShock]

Scorched Earth

[TheShock]

Судя по скрину — идёт под DosBox ;)

[greedykid]

Какие темы вас интересуют? Если будут желающие — я их опишу.

Интересует возможность создания «серьезных» игр — т.е. не уровня Pong'а, а уровня по крайней мере старых DOS'овских игрушек — вроде тех же Space Quest, Kyrandia, и Dune 2.
И насколько я понимаю в возможностях создания полноценных MMOG Канвас пока проигрывает тем же HTML5+CSS3 (см. Aves Engine)?

[great_boba]

Осторожнее, можно нарваться на холивар

[greedykid]

Извините, я не специально. :)
Мне действительно интересно. Пока сложилось ощущение, что Canvas для таких вещей не очень подходит — но при этом быстро догоняет Флэш. Поэтому и хотел найти опровержение или подтверждение своим мыслям.

[TheShock]

Это холиварный вопрос. Но, имхо, не проигрывают. Aves Engine просто не умеют готовить Canvas.

[GreatRash]

Да. Хочется более серьезных туториалов. Может не таких серьезных как Dune 2, но вот про создание Lunar Lander я бы почитал с удовольствием.

[TheShock]

Ну Lunar Lander не намного серьёзнее пинг-понга)

[GreatRash]

Не сказал бы. По крайней мере присутствуют операции с векторами и примитивная физика. А в понге (в этом конкретно) нет ничего кроме тупо смены направления движения шарика при соударении с битой или со стеной.

[TheShock]

Там чем-то похоже на Asteroids.
Особенность в том, что impulse меняется зависимо от направления и гравитации. Спасибо за отзыв, я попробую написать)
пс. Можете попробовать сделать Вы, а я — помогу ;)

[GreatRash]

Я совсем не знаю Libcanvas. И у меня плохо с векторным анализом. Потому и клянчу туториал :)

На чистом яваскрипте могу попробовать написать что-то, но я совсем не представляю как определить расстояние от объекта (посадочного модуля) до поверхности.

[TheShock]

Будет возможность выучить)

[TheShock]

Просчёт столкновения с полем сделать очень легко. Это ведь всего-лишь набор прямых. Мы их храним в массиве:

var lines = [
  new Line(10, 10, 20, 20),
  ...
  new Line(710, 10, 720, 20)
];

А потом, кажде обновление кадра, проверяем расстояние корабля до линии

Ship = atom.Class({
	[...]
	collision: function (lines) {
		for (var i = lines.length; i--;) {
			if (lines.distanceTo( this.position ) < this.radius) {
				return true;
			}
		}
		return false;
	}
});

distanceTo относительно требовательна к ресурсам, потому можно оптимизировать за счёт того, что предварительно проверять, находится ли корабль достаточно низко:

Ship = atom.Class({
	[...]
	collision: function (lines) {
		if ( this.position.y > this.minCollisionHeight ) {
			return false;
		}

		for (var i = lines.length; i--;) {
		[..]
	}
});

Естественно, minCollisionHeight вычисляется один раз перед началом приложения. Достаточно пройти все отрезки, найти самый высокий Y им приплюсовать к ней радиус корабля:

Ship = atom.Class({
	[...]
	genMinCollisionHeight: function (lines) {
		var max = 0;
		for (var i = lines.length; i--;) {
			max = Math.max( max, lines[i].y );
		}
		return max + this.radius;
	}
});

Это, естественно, если использовать LibCanvas

[Elegar]

Черт, я подсел играть в понг сам с собой:)

Заметил, что даже несмотря на высокий ФПС (около 60) быстродвижущиеся объекты на канвасе (в вашем случае шарик) двигаются как-то малость дергано и неравномерно. Я, правда, ковырял библиотеку cake.js, думал может это она тормознутая, но у вас вот то же самое с шариком.