Архив

Архив раздела ‘Графика’

Новые демки Alternativa3D

6 Ноябрь 2008 1 комментарий

В блоге проекта "Alternativa Platform" появились новые демки. Смотрим, восхищаемся :)

Мобильный телефон


+ версия для Flash Player 10

Пример трехмерного демонстрирования предметов. В отличие от распостраненных сегодня 3D-панорам, созданных на базе фотографий, вы можете задействовать каждую деталь предмета и наделить ее необходимым функционалом. К примеру, клавиши на телефоне можно нажимать — таким образом есть возможность продемонстрировать и его интерфейс.

Демо казуальной игры

lev1.jpg
Уровень 1
lev2.jpg
Уровень 2

Прототип казуальной игры Ballance. За счет наклона поверхности вы управляете двумя шариками — синим собираете бонусы, в то же время избегаете столкновения с красным. В случае столкновения синий шарик становится все прозрачнее, вплоть до полной невидимости. Восстановить видимость можно докатив шарик до “сердечка”.

Ремонт квартиры


+ версия для Flash Player 10

В этой демонстрации вы видите квартиру на стадии завершения строительства — бетонные стены, пол и потолок. Кликая по поверхностям вы выбираете вариант отделки.

Google Lively – новая социальная сеть на основе виртуального пространства

9 Июль 2008 3 comments

Компания Google сегодня представила публике свой новый сервис. К поиску он пока имеет мало отношения: Lively.com - виртуальный мир в браузере.:

Пользователи Lively могут создать виртуального персонажа и ходить по виртуальным “комнатам”, общаясь с их посетителями.

Принцип работы во многом напоминает игру Second Life. Однако, в отличие от популярного конкурента, Lively работает прямо в браузере (пока только в среде Windows в Firefox и Internet Explorer) после установки плагина.

Разработка плагина для использования Lively под Mac OSX является приоритетной задачей.

Как будет развиваться этот сервис - никому не известно. Поговаривают, что Гугл собирается внедрять множество сервисов внутрь Lively. Так что будем ждать API для взаимодействия с вирутальным миром... :)

зы: с реальным миром мы взаимодействовать тоже будем через API ??? :(

Визуализация 3D поверхностей во Flex

17 Март 2008 1 комментарий

Я решил еще немного поработать с предыдущим примером и сделал простенькое Flex приложение. Исходники прилагаются.

Оперирование визуализацией произвольных 3D поверхностей

14 Март 2008 2 comments

В продолжение предыдущей публикации, я попробовал расширить наглядность примера. Для этого я создал новый 3D-объект, который представляет собой набор из 11 параметрических поверхностей (взято из туториала "A Demonstration of Customizable Features of Our 3D Surfaces") :

Класс Surfaces:

package lib3d {
	import lib3d.Object3D;

	/**
	 * @author Michael
	 */
	public class Surfaces extends Object3D {
		private var _exampleNum : int = 1;

		public function set exampleNum(n : Number) : void {
			_exampleNum = n;
			setTilesArray();
		}

		public function get exampleNum() : Number {
			return _exampleNum ;
		}

		private const cubeSize : Number = 100;

		public function Surfaces() {
			super();
		}

		override public function setTilesArray() : void {
			var i : int;
			var j : int;
			var istep : Number;
			var jstep : Number;
			var tmin : Number;
			var tmax : Number;
			var smin : Number;
			var smax : Number;
			var curt : Number;
			var curs : Number;

			tmin = 0;
			smin = 0;

			switch (_exampleNum) {
				case 1:
					tmax = Math.PI;
					smax = 7 / 4 * Math.PI;
					break;
				case 2:
					tmax = 2 * Math.PI;
					smax = 2 * Math.PI;
					break;
				case 3:
					tmax = 1.5 * Math.PI;
					smax = 2 * Math.PI;
					break;

				case 4:
					tmax = Math.PI;
					smax = 1.5 * Math.PI;
					break;

				case 5:
					tmax = Math.PI;
					smax = 2 * Math.PI;
					break;

				case 6:
					tmax = Math.PI;
					smax = 1.5 * Math.PI;
					break;

				case 7:
					tmax = 1;
					smax = 2 * Math.PI;
					break;

				case 8:
					tmax = 1.5 * Math.PI;
					smax = 2 * Math.PI;
					break;

				case 9:
					tmax = 1.5 * Math.PI;
					smax = 2 * Math.PI;
					break;

				case 10:
					tmax = Math.PI;
					smax = 2 * Math.PI;
					break;

				case 11:
					tmax = Math.PI;
					smax = 3 * Math.PI;
					break;
			}
			istep = (smax - smin) / nMesh;
			jstep = (tmax - tmin) / nMesh;
			tilesArray = new Array();
			for(i = 0;i <= nMesh; i++) {
				curs = istep * i + smin;
				tilesArray[i] = new Array();
				for(j = 0;j <= nMesh;j++) {
					curt = jstep * j + tmin;
					switch (_exampleNum) {
						case 1:
							tilesArray[i][j] = [cubeSize * Math.cos(curs) * Math.sin(curt),cubeSize * Math.sin(curs) * Math.sin(curt),cubeSize * Math.cos(curt)];
							break;
						case 2:
							tilesArray[i][j] = [cubeSize / 4.4 * (curt) * Math.cos(curs + Math.PI) * Math.sin(Math.cos(curt)),cubeSize / 4.4 * (curt) * Math.sin(curs + Math.PI) * Math.sin(Math.cos(curt)),cubeSize / 3.7 * (curt) * Math.cos(Math.cos(curt)) - 0.8 * cubeSize];
							break;
						case 3:
							tilesArray[i][j] = [cubeSize / 4.3 * Math.cos(curs) * (2 + Math.cos(curt) * 2),cubeSize / 4.3 * Math.sin(curs) * (2 + Math.cos(curt) * 2),cubeSize / 2.6 * (3 - curt) - 0.3 * cubeSize];
							break;

						case 4:
							tilesArray[i][j] = [cubeSize / 1.6 * Math.sqrt(curt) * Math.sin(2 * curt) * Math.cos(curs - Math.PI),cubeSize / 1.6 * Math.sqrt(curt) * Math.sin(2 * curt) * Math.sin(curs - Math.PI),cubeSize / 1.6 * Math.sqrt(curt) * Math.cos(2 * curt) - 0.15 * cubeSize];
							break;

						case 5:
							tilesArray[i][j] = [cubeSize / 3.5 * Math.cos(curs) * (Math.cos(4 * curt) + 2),cubeSize / 3.5 * Math.sin(curs) * (Math.cos(4 * curt) + 2),cubeSize / 2 * curt - 0.8 * cubeSize];
							break;

						case 6:
							tilesArray[i][j] = [3.2 * cubeSize * Math.sin(curt) * Math.cos(Math.PI / 2 * Math.sin(curt) * Math.cos(curs)) / 2 * Math.sin(curt) * Math.cos(curs),2.2 * cubeSize * Math.sin(curt) * Math.cos(Math.PI / 2 * Math.sin(curt) * Math.cos(curs)) / 2 * Math.sin(curt) * Math.sin(curs),2.2 * cubeSize * Math.sin(curt) * Math.cos(Math.PI / 2 * Math.sin(curt) * Math.cos(curs)) / 2 * Math.cos(curt)];
							break;

						case 7:
							tilesArray[i][j] = [cubeSize / 2.4 * (2 * Math.cos(curs) + (curt - 0.5) * Math.cos(curs / 2)),cubeSize / 2.4 * (2 * Math.sin(curs) + (curt - 0.5) * Math.cos(curs / 2)),cubeSize / 2.4 * 4 * (curt - 0.5) * Math.sin(curs / 2) - 0.1 * cubeSize];
							break;

						case 8:
							tilesArray[i][j] = [cubeSize / 4.3 * (curt) * Math.cos(curs + Math.PI) * Math.sin(curt),cubeSize / 4.3 * (curt) * Math.sin(curs + Math.PI) * Math.sin(curt),cubeSize / 4.3 * (curt) * Math.cos(curt)];
							break;

						case 9:
							tilesArray[i][j] = [cubeSize / 2.8 * (curt) * Math.cos(curs + Math.PI) * Math.sin(Math.cos(curt)),cubeSize / 2.8 * (curt) * Math.sin(curs + Math.PI) * Math.sin(Math.cos(curt)),cubeSize / 2.8 * (curt) * Math.cos(Math.cos(curt)) - cubeSize];
							break;

						case 10:
							tilesArray[i][j] = [cubeSize / 1.15 * Math.cos(curs) * Math.sin(2 * curt),cubeSize / 1.15 * Math.sin(curs) * Math.sin(2 * curt),cubeSize / 1.15 * Math.cos(curt)];
							break;

						case 11:
							tilesArray[i][j] = [cubeSize / 2.7 * Math.pow(4 / 3, curs - 5) * Math.sin(curt) * Math.sin(curt) * Math.cos(curs - 5),cubeSize / 2.7 * Math.pow(4 / 3, curs - 5) * Math.sin(curt) * Math.sin(curt) * Math.sin(curs - 5) + 0.2 * cubeSize,cubeSize / 2.7 * Math.pow(4 / 3, curs - 5) * Math.sin(curt) * Math.cos(curt) - 0.2 * cubeSize];
							break;
					}
				}
			}
		}
	}
}

Небольшие изменения для управления альфа-каналом пришлось сделать в классе View3D. Попробуйте сами его "доработать лобзиком" :) Ну а нетерпеливые могут скачать архив.

Пример простой 3D визуализации

11 Март 2008 1 комментарий

Прочитав туториал "Simple 3D Drawing in Flash CS3", я решил разобраться в исходниках и немного их "классифицировать" (для большей универсальности). И у меня получились следующие классы:

  • Object3D - прототип 3D объекта;
  • Sphere - параметрически описанный объект сферы
  • View3D - класс, рисующий 3D объект
  • Main - основной класс документа

Смотреть результат.

Читать далее...

Построение рельефного освещения в «Alternativa Game»

26 Декабрь 2007 Нет комментариев

Товарищи из проекта «Alternativa Game» несмотря на приближающиеся праздники напряженно работают и радуют новыми фичами (вернее ПОТЕНЦИАЛЬНЫМИ возможностями) в своем движке... Речь идет о построении рельефного освещения при помощи карт нормалей. Я с удовольствием потестировал качество/скорость отрисовки и был несомненно впечатлен:
Карты нормалей
Размер: 1.6Мб
Управление:

  • Мышь — перемещение источника света
  • Клик — изменение цвета освещения
  • Колёсико — изменить бликовость материала
  • Пробел — следующая текстура

Интересный компонент “Зажигай-ка” от Г.Скиннера

16 Ноябрь 2007 1 комментарий

Грант Скиннер опубликовал интересный компонент для Flash CS3, который позволяет создать эффект горения мувика, а при изменении некоторых настроек, и прочие эффекты:

Те, кто заинтересовался возможностью исследовать код, могут скачать компонент и исходники.

Categories: Графика Tags: ,

Alternativa Game – потрясающий 3D движок

26 Октябрь 2007 1 комментарий

Многие разработчики профессионально используют возможности ActionScript 3.0 и FlashPlayer 9 API, но Антон Волков и Ко на сегодняшний день впереди планеты всей! Смотрите и удивляйтесь. Демо-версия движка Alternativa3D…

null

Основные особенности:

  • Трёхмерная геометрия и 3D-спрайты. Здания и ландшафт выполняются в “честном” 3D, объекты со сложной геометрией — в виде спрайтов, в т.ч. многофазных.
  • Система освещения, включающая направленные и точечные источники света. Изменение времени суток, рассеянный и солнечный свет, автоматическое затенение в углах, динамические тени, включая тени от спрайтов.
  • Настраиваемое качество текстур и освещения (при отсутствии аппаратной поддержки 3D-графики во Flash это особенно важно).
  • Низкая нагрузка на процессор (исключая моменты изменения освещения и вращения камеры, что происходит нечасто и не критично для игры).

Ждем продолжения. Хотелось бы войти в группу закрытого бета-тестирования. ;)

Categories: Графика Tags: ,

Растрирование текста или “Per aspera – ad astra”

6 Октябрь 2007 10 comments

Под впечатлением анонса нового Flash Player-а под кодовым именем "Astra" я вспомнил свою старую публикацию, в которой я демонстрировал эффект появления текста из звездочек. Но там это было реализовано под ActionScript 2. И вот решил я сделать что-то подобное под ActionScript 3.

Давайте смотреть что получилось.

Сначала создаем класс, реализующий эффект собирания текстовой строки из точек:

package
{
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.text.TextField;
	import flash.text.TextFormat;

	public class StarText extends Sprite
	{
		public function StarText(text:String)
		{ // передаем в виде параметра текстовую строку
			var textWidth:int
			var textHeight:int
			var tf:TextField = new TextField();
			var bmp:BitmapData;
			var tformat:TextFormat = new TextFormat("_sans", 12); // задаем формат текста
			tf.autoSize="left";	// текстовое поле будет автоматически расширяетmcz
			tf.text=text; // заполняем текстовое поле текстом
			tf.setTextFormat(tformat); // присваеваем формат текста

			bmp = new BitmapData(tf.width, tf.height, false); // создаем растр с размерами текста
			bmp.draw(tf); // растрируем текст
			textWidth = bmp.width; // ширина растровой картинки
			textHeight = bmp.height; // высота растровой картинки
			for (var x:int=0; x

Теперь собственно "Звездочка", которая летит-летит и прилетает куда нужно.

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;

	public class Star extends Sprite {
		private var starCoord:Point;
		public function Star(coord:Point):void { // в параметрах передаем координаты
			starCoord=coord;		// в которые наша точка дожна прилететь
			var bmpStarSrc:BitmapData = new BitmapData(1,1,false,0x00ff00); // рисуем точку зеленую
			var bmpStar:Bitmap = new Bitmap (bmpStarSrc);
			bmpStar.x = Math.random()*300-Math.random()*150; // помещаем в случайные координаты
			bmpStar.y = Math.random()*300-Math.random()*150;
			bmpStar.addEventListener(Event.ENTER_FRAME, fly); // добавляем вызов периодической функции
			addChild(bmpStar); // возвращаем созданый объект
		}
		private function fly(e:Event):void { // эта функция будет двигать точку в нужные координаты
			var trgt = e.target;
			var tox:Number = (trgt.x - starCoord.x)/16; // вычисляем смещение
			var toy:Number = (trgt.y - starCoord.y)/16;
			if (Math.abs(tox)>0.5 || Math.abs(toy)>0.5) { // если смещение не очень маленькое
				trgt.x-=tox; // смещаем точку
				trgt.y-=toy;
			}
			else // иначе
			{
				trgt.removeEventListener(Event.ENTER_FRAME, fly); // убираем повторение

				trgt.x=starCoord.x; // выставляем точку в конечные координаты
				trgt.y=starCoord.y;

			}
		}
	}
}

теперь базовый класс:

package {
	import flash.display.Sprite;
	public class Main extends Sprite
	{
		public function Main()
		{
			var st:StarText = new StarText("БОЛЬШАЯ ИСТОРИЯ СОЗДАНИЯ МАЛЕНЬКОГО ПРИЛОЖЕНИЯ")
			st.x=100
			st.y=170
			addChild(st)
		}
	}
}

ну с ним, наверное, все понятно?... если нет, милости просим в комментарии ;)

Использование символов из библиотеки

30 Сентябрь 2007 6 comments

Некоторые программисты напрочь отвергают использование Flash IDE за неудобный редактор кода, который на самом деле не очень подходит для написания больших приложений с использованием элементов пользовательского интерфейса (GUI).

Тем не менее рано или поздно каждому программисту приходится работать с SWF файлами ( с так называемым "дизайном", который так не любят программисты :) ), которые были созданы именно во Flash CS3 IDE. И очень часто возникают трудности в работе с такими флэшками из-за их несовместимости с "правильным" кодом.

Итак. Постановка задачи: Нужно создать два символа фигур (квадрат и круг) в библиотеке и назначить им одинаковую модель поведения. То есть любой из этих символов, добавленный на сцену, должен при нажатии на них кнопкой мышки переместиться на передний план и "прилипнуть" к курсору. При отпускании мышки - "отлипнуть" от курсора. Короче говоря, когда посмотрите результат - поймете что я имел в виду :-D

Первое, что мы сделаем, это создадим класс, описывающий поведение наших фигур.

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;

	class Figure extends MovieClip {
		public function Figure() {
			addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
			addEventListener(MouseEvent.MOUSE_UP, StopDrag);
		}
		private function StartDrag(e:Event) {
			var trgt = e.target
			var mc_parent = trgt.parent
			mc_parent.removeChild(trgt)
			mc_parent.addChild(trgt)
			trgt.startDrag();
		}
		private function StopDrag(e:Event) {
			e.target.stopDrag();
		}
	}
}

Разберемся по порядку

импортируем необходимые библиотеки:

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;

Объявляем класс и инициирующий метод. При создании экземпляра класса к нему добавляются два слушателя событий, реагирующих на нажатие и отпускание левой кнопки мыши:

	class Figure extends MovieClip {
		public function Figure() {
			addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
			addEventListener(MouseEvent.MOUSE_UP, StopDrag);
		}

При нажатии левой кнопки мыши вызывается функция StartDrag (не путать с методом startDrag) в которой мувик удаляется со сцены, потом снова добавляется на нее (таким образом перемещается наверх) и включается startDrag()
При отпускании левой кнопки мыши вызывается функция StopDrag

		private function StartDrag(e:Event) {
			var trgt = e.target
			var mc_parent = trgt.parent
			mc_parent.removeChild(trgt)
			mc_parent.addChild(trgt)
			trgt.startDrag();
		}
		private function StopDrag(e:Event) {
			e.target.stopDrag();
		}
	}
}

Теперь нужно создать два символа и присвоить им класс Figure в роли базового. Для этого рисуем на сцене круг, и превращаем его в символ нажатием клавиши [F8]

Теперь подобным же образом создаем квадрат.

Следующий шаг - создаем базовый класс мувика в котором берем символы из библиотеки и помещаем их на сцену:

package {
	import flash.display.Sprite;

	public class Main extends Sprite {
		public function Main() {
			var a:Square = new Square();
			var b:Circle = new Circle();
			addChild(a);
			addChild(b);
		}
	}
}