Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > Бесполезности

обо всем по-немногу...
Оценить эту запись

Starling Builder. Дождались?

Запись от cleptoman размещена 28.10.2015 в 16:51
Обновил(-а) cleptoman 29.10.2015 в 11:03

Не так давно появилась штука, которая свей целью ставит облегчить жизнь всем флэш-игроделам.
Речь идет о Starling Builder - визуальный редактор UI под Starling . Результатом манипуляций в нем будет конфиг, который можно сохранять и загружать в редактор и, ессно, использовать его в дальнейшем в вашем проекте. Об этом ниже.

Страничка проекта туц
Видюха с обзором возможностей туц

При первом открытии редактора он попросит указать воркспейс - папку где будет развернуто рабочее пространство редактора. При выборе ее редактор создаст кучу папок для текстур, конфигов, шрифтов и т.д.
(Кстати: указывать папку следует без русских букв в полном пути к ней)
Для примера разработчики сделали такой тестовый воркспейс
Его я и использовал для своего обзорчика. Файл проекта и все материалы внизу в архиве.
Итак. редактор очень простой в освоении (Хотя с локализациями я пока не разбирался - сразу принялся ваять что-нибудь).

в папочке textures лежат наши ассеты - это атласы с конфигами или просто пнгшки. Все поддерживаемые форматы не проверял и в коде самого редактора еще не лазил, но - поддерживает PNG и аталасы XML привычные нам по работе со Starling.

в папочке fonts лежат Битмап Шрифты. Собственно, если осмотреть папку textures в архиве, то там есть вложенная папка fonts - видимо они взаимодополняемые.

в папочке layouts лежат наши конфиги UI компонентов. Разработчики рекомендуют располагать их на одном уровне во избежание непоняток с путями.

в папке bakgrounds лежат картинки подложек (для нашего удобства. выбрали нужный - и визуально видно куда элементы контрола двигать). Он не попадает в дисплей лист при билде контрола в игре.

Вот пока все , что успел пощупать. для примера наваял test_layout, который состоит из задника и двух кнопок.

Что хочется сказать по редактору:
- хотелось бы при работе с элементами по DELETE удаление выбеленного элемента
- очень бомбовская фишка - использование уже созданных компонентов при создании нового. (По нажатию на external в редкторе можно выбрать и добавить уже созданый компонент)
- вторая бомбовская штука - линкование компонента к вашему классу этого компонента, который должен отнаследоваться от starling.display.Sprite.

Итак, мы открыли, пощупали, что-то накидали. Как теперь воткнуть это все в нашу игру. Для этого есть небольшой фреймворк от разработчиков.
В нем есть нужный нам UIBuilder. Конструктор принимает несколько аргументов. Один из них экземпляр IAssetMediator. И все бы хорошо, но реализации этого интерфейса я в фреймворке не нашел. Пришлось изобретать на базе старлинговского AssetManager, тем более что один метод интерфейса он реализует. второй метод он тоже по сути своей реализует , но обзывается по другому.
Вот что получилось:

Код AS3:
package ru.cleptoman.starling.builder.extension {
	import com.sgn.starlingbuilder.engine.IAssetMediator;
	import starling.textures.Texture;
	import starling.utils.AssetManager;
 
	/**
	 * ...
	 * @author Aleksey Kutov aka cleptoman
	 */
	public class AssetMediator extends AssetManager implements IAssetMediator {
 
		public function AssetMediator(scaleFactor:Number=1, useMipmaps:Boolean=false) {
			super(scaleFactor, useMipmaps);
 
		}
 
		/**
		 * @param	name
		 * @return
		 */
		public function getExternalData(name:String):Object {
			return super.getObject(name);
		}
 
	}
 
}
Далее. Сам билдер я тоже расширил:
Код AS3:
package ru.cleptoman.starling.builder.extension {
	import com.sgn.starlingbuilder.engine.IAssetMediator;
	import com.sgn.starlingbuilder.engine.localization.ILocalization;
	import com.sgn.starlingbuilder.engine.UIBuilder;
	import starling.display.DisplayObject;
 
	/**
	 * ...
	 * @author Aleksey Kutov aka cleptoman
	 */
	public class UIBuilder extends com.sgn.starlingbuilder.engine.UIBuilder {
 
		private var _assets:IAssetMediator;
 
		public function UIBuilder(assetMediator:IAssetMediator, forEditor:Boolean=false, template:Object=null, localization:ILocalization=null) {
			super(assetMediator, forEditor, template, localization);
			_assets = assetMediator;
		}
 
		public function buildByName(name:String):DisplayObject {
			var config:Object = _assets.getExternalData(name);
			if (!config) return null;
			return super.create(config) as DisplayObject;
		}
 
	}
 
}
Кстати, фреймворк немного отличается от того что лежит в репе - у меня ругался компилятор на несколько вещей в оригинальной реализации. Вообще, я бы перепилил некоторые вещи..хотя бы взять тот же IAssetMediator. Может уже и что-то исправили пока я тут щупал все это.

Собственно, долго думал - добавлять сюда весь код примера или оставить для скачивания и разбора, но решил выложить.

Рут класс проекта:
Код AS3:
package{
	import flash.display.Sprite;
	import flash.events.Event;
	import starling.events.Event;
	import starling.core.Starling;
 
	/**
	 * ...
	 * @author Aleksey Kutov aka cleptoman
	 */
	public class Main extends Sprite {
 
		private var _starling:Starling;
 
		public function Main() {
			if (stage) init();
			else addEventListener(flash.events.Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:flash.events.Event = null):void {
			removeEventListener(flash.events.Event.ADDED_TO_STAGE, init);
			// entry point
			/**
			 * создаем старлинг
			 */
			_starling = new Starling(StarlingRoot,stage);
			_starling.addEventListener(starling.events.Event.ROOT_CREATED, onStarlingRootCreated);
			_starling.start();
		}
 
		private function onStarlingRootCreated(e:starling.events.Event):void {
			_starling.removeEventListener(starling.events.Event.ROOT_CREATED, onStarlingRootCreated);
		}
 
	}
 
}
Рут класс старлинга:
Код AS3:
package {
	import ru.cleptoman.starling.builder.extension.AssetMediator;
	import ru.cleptoman.starling.builder.extension.UIBuilder;
	import starling.display.Sprite;
 
	/**
	 * ...
	 * @author Aleksey Kutov aka cleptoman
	 */
	public class StarlingRoot extends Sprite {
 
		private static const PATH_PREFIX:String = "../workspace/";
		private static const LAYOUT:String = "test_layout";
		private static const RESOURCES:String = "ui";
 
		private var _assets:AssetMediator;
		private var _builder:UIBuilder;
		private var _window:Window;
 
		public function StarlingRoot() {
			super();
			/**
			 * созадем билдер
			 */
			_assets = new AssetMediator();
			_assets.verbose = true;
 
			_builder = new UIBuilder(_assets);
 
			/**
			 * добавляем ресурсы в очередь
			 */
			addResourcesToQueue(RESOURCES);
			/**
			 * добавляем конфиг окошка в загрузку
			 */
			addLayoutConfigToQueue(LAYOUT);
 
			/**
			 * грузим
			 */
			_assets.loadQueue(onLoadProgress);
		}
 
		private function onLoadProgress(ratio:Number):void {
			if (ratio < 1) return;
			/**
			 * теперь строим наше окошко
			 */
			_window = _builder.buildByName(LAYOUT) as Window;
			addChild(_window);
		}
 
		private function addResourcesToQueue(name:String):void {
			_assets.enqueue(PATH_PREFIX + "textures/"  +name + ".xml");
			_assets.enqueue(PATH_PREFIX + "textures/"  +name + ".png");
		}
 
		private function addLayoutConfigToQueue(name:String):void {
			_assets.enqueue(PATH_PREFIX + "layouts/"  + name + ".json");
		}
 
	}
 
}
Класс нашего окошка, который прилинкован в редакторе:
Код AS3:
package {
	import feathers.display.Scale9Image;
	import starling.display.Button;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.events.Touch;
	import starling.events.TouchEvent;
	import starling.events.TouchPhase;
 
	/**
	 * ...
	 * @author Aleksey Kutov aka cleptoman
	 */
	public class Window extends Sprite {
 
		private static const CLOSE_NAME:String = "generic_exit";
		private static const BUTTON_NAME:String = "generic_button_blue";
		private static const BACK_NAME:String = "generic_check_bg";
 
		private var _button:Button;
		private var _close:Button;
		private var _back:Scale9Image;
 
		public function Window() {
			super();
			addEventListener(Event.ADDED_TO_STAGE, onAddToStage);
		}
 
		private function onAddToStage(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddToStage);
			_button = getChildByName(BUTTON_NAME) as Button;
			_close = getChildByName(CLOSE_NAME) as Button;
			_back = getChildByName(BACK_NAME) as Scale9Image;
			_button.addEventListener(TouchEvent.TOUCH, onTouch);
			_close.addEventListener(TouchEvent.TOUCH, onTouch);
		}
 
		private function onTouch(e:TouchEvent):void {
			var touches:Vector.<Touch> = e.getTouches(this, TouchPhase.ENDED);
			var touch:Touch;
			for each(touch in touches) {
				trace("click ", touch.target.name);
			}
 
		}
 
	}
 
}
Вложения
Тип файла: zip starling_builder_test.zip (2.94 Мб, 203 просмотров)
Всего комментариев 5

Комментарии

Старый 02.11.2015 12:47 Tails вне форума
Tails
 
Аватар для Tails
Отличная новость!
Старый 08.11.2015 10:25 Astraport вне форума
Astraport
 
Аватар для Astraport
А мне что-то не понравилось. Ожидал большего.
Старый 08.11.2015 22:55 Zebestov вне форума
Zebestov
 
Аватар для Zebestov
Как я понимаю, следует ожидать нашествия гуёв-близнецов?
Старый 11.11.2015 11:01 cleptoman вне форума
cleptoman
 
Аватар для cleptoman
немного в нем поработав понял, что сам редактор ужас какой неудобный и недоработаный.
Вадик, а с чего ты взял про близнецов?..это же не набор графики, а редактор для верстки, по сути
Старый 11.11.2015 13:59 Zebestov вне форума
Zebestov
 
Аватар для Zebestov
Но показанные на видео ассеты имеются же по умолчанию?
 

 


Часовой пояс GMT +4, время: 20:08.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.