romixx → Создаем красивый космос + туманность. PhotoShop/Flash IDE/AS3

Очень давно хотел поделиться этим методом, но все никак руки не доходили. Вот, таки дошли :)
Туториал конечно слегка сумбурно написан, но будет понятен даже новичкам.
Методика построения космоса, основана на фотошоповском уроке, я же ее немного доработал.
В самом фотошопе нам понадобится лишь 1 картинка, все остальные действия происходят во флеше.

• 1
Открываем фотошоп, создаем новое изображение нужного нам размера и Filter — Render — Clouds. Можно понажимать несколько раз CTRL+F для достижения максимально нужного вам эфекта. Полученую картинку созраняем как jpg с максимальным качеством.

• 2
Открываем флеш, создаем новый проект, или открываем ваш. Импортируем в библиотеку полученое в фотошопе изображение. Создаем новый символ (CTRL+8). Вписываем все как показано на рисунке и нажимаем ОК.

Вставляем наше изображение на координаты x:0 y:0. Возвращаемся на Scene.
• 3
Создаем новый символ (CTRL+8). Вписываем все как показано на рисунке и нажимаем ОК.

Произвольно рисуем цветные кружки разного размера. Затем возвращаемся на Scene.

• 4
Если вы создавали новый проект, то в свойствах проекта, указываем Document Class — SpaceSystem.

• 5
Создаем новый ас3 класс и копируем туда следующий текст
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;

	public class SpaceSystem extends Sprite {
		
		private var starContainer:Sprite;
		private var cloud:Sprite;
		private var cloudLight:CloudLight;
		//private var galaxy:Galaxy;
		private var bitmap:Bitmap;
		private var bitmapData:BitmapData;
		
		public function SpaceSystem() {
			addEventListener(Event.ADDED_TO_STAGE, initThis);
		}
		
		private function initThis(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, initThis);
			initVariables();
		}
		
		private function initVariables():void {
			// Создаем контейнер который будет содержать все наши чилды космоса.
			starContainer = new Sprite();
			addChild(starContainer);
			
			// Циклом создаем звезды - это обычный шейп 
			for (var i:int = 0; i < 2000; i++) {
				var size:int = Math.random() * 1 + 1;
				var alpha:Number = Math.random() * 1;
				var partShape:Shape = new Shape()
				partShape.graphics.beginFill(0xffffff, alpha);
				partShape.graphics.drawRect(1, 1, size, size);
				partShape.graphics.endFill();
				starContainer.addChild(partShape);
				partShape.x = Math.random() * 1024 + 1;
				partShape.y = Math.random() * 768 + 1;
			}
			//Если у вас есть картинка ее можно также добавить на фон.
			//galaxy = new Galaxy();
			//galaxy.blendMode = "lighten";
			//galaxy.alpha = .75;
			//starContainer.addChild(galaxy);
			
			//Создаем подсветку облаков
			cloudLight = new CloudLight();
			starContainer.addChild(cloudLight);
			cloudLight.filters = [new BlurFilter(255, 255, 3)];
			cloudLight.blendMode = "lighten";
			cloudLight.alpha = .5
			
			//Создаем облака
			cloud = new Clouds();
			starContainer.addChild(cloud);
			cloud.blendMode = "overlay";
		
			makeBitmap();
		}
		
		private function makeBitmap():void {
			//Создаем битмапу и добавляем в нее полученый космос
			bitmapData = new BitmapData(1024, 768, false, 0x000000);
			bitmap = new Bitmap(bitmapData);
			bitmapData.draw(starContainer);
			addChild(bitmap);
			
			//Удаляем элементы космоса
			removeChild(starContainer);
			starContainer = null;
			//galaxy = null;
			cloud = null;
			cloudLight = null;
		}
	}
}

Сохраняем его с именем SpaceSystem в папке проекта.
• 5
Компилируем — радуемся результату!

• 6
Если вы интегрируете данный класс в ваш проект, достаточно в нужном месте дописать
spaceSystem = new SpaceSystem();
addChild(spaceSystem);

и добавить переменную
private var spaceSystem:SpaceSystem;

• 7
Красота космоса зависит в первую очередь от цветов и расположения элементов в CloudLight
  • +11
  • 22 сентября 2011, 23:18
  • romixx

Комментарии (11)

RSS свернуть / развернуть
+
0
Годно. Как я понимаю, можно эту красоту делать более-менее динамической? Иначе был бы смысл всё сразу в Фотошопе сделать — и возможностей больше, и производительность не страдает вообще.
avatar

iLORd

  • 22 сентября 2011, 23:26
+
0
Данный способ можно дорабатывать в любых направлениях, изменять «облака» изменять им цвет, прозрачность, позицию, плюс звезды каждый раз динамически генерируются. А на выходе получаем туже битмапу, что и с фотошопа.
avatar

romixx

  • 22 сентября 2011, 23:30
+
0
Красиво. Но переделывать свой космос, нарисованный во флеше не буду:)
avatar

p0lter

  • 22 сентября 2011, 23:26
+
0
Просто и со вкусом :). Как там FPS? Не страдает?
avatar

WeslomPo

  • 23 сентября 2011, 01:28
+
0
Так битмапа же ;)
avatar

romixx

  • 23 сентября 2011, 01:43
+
0
А… ок…
Я потом увидел, когда вверх проматывал… голова не работает, спать надо :)
avatar

WeslomPo

  • 23 сентября 2011, 02:26
+
0
Семен Семеныч! Красивый космос уже создан задолго до нас: www.jpl.nasa.gov/spaceimages/


и т.д. :)
avatar

GameTelegraph

  • 23 сентября 2011, 02:30
+
0
Отличный урок. Медитировал минут десять :)
avatar

flashguy

  • 23 сентября 2011, 10:35
+
0
Не помешало бы ещё рандомно задавать звездам размер и может частичную прозрачность маленьким звездам, чтобы глубину передать. Сам я уже не раз рисовал космос и туманности и немного набил в этом деле руку.
avatar

Massagames

  • 23 сентября 2011, 15:17
+
0
Именно так и происходит: в цикле, первые два параметра как раз отвечают за размер и прозрачность!
avatar

romixx

  • 23 сентября 2011, 17:26
+
0
а, точно, я код-то не посмотрел, а в финальной картинке как-то не заметил, мне показалось что все звезды одинаковые…
avatar

Massagames

  • 23 сентября 2011, 17:43

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