Jump to content
Korean Random

Создание GUI с помощью Flash Professional

aks1983

By aks1983
in ActionScript & Python

 Share

Recommended Posts

aks1983

aks1983

Posted
Posted

Итак, вы уже создали библиотеки lobby.swc, battle.swc и common.swc, а потом программным образом создали окно, а в нём контролы.

Всё хорошо, но хотелось бы в визуальный редактор, типа gui-builder. К тому же, чтобы сделать окно, нужно создавать классы, и добавлять в него контент программно. На самом деле это можно делать во Flash, только с некоторыми оговорками.

 

Для начала, рассмотрим как работает GUI в танках. Что мы знаем:

  • есть набор классов net.wg.gui
  • есть файлы gui*.swf c графикой и анимацией
  • во Flash есть возможность использовать символы из внешних swf
  • во Flash есть возможность подключать swc

Итак, поехали.

Делаем окно с кастомными кнопками - MainView.as

import net.wg.gui.components.controls.SoundButtonEx;
import net.wg.gui.lobby.header.FightButton;
import net.wg.infrastructure.base.AbstractWindowView;

import scaleform.clik.events.ButtonEvent;

public class MainView extends AbstractWindowView {

    public var redButton:FightButton;
    public var buttonNormal:SoundButtonEx;

    public function MainView() {
        super();
    }

    override protected function configUI():void {
        super.configUI();
        window.title = "Моё окно";
        if (redButton) { // можно смело убрать эти if
            redButton.label = "Просто кнопка";
        }
        if (buttonNormal) { // можно смело убрать эти if
            buttonNormal.label = "Закрыть окно";
            buttonNormal.addEventListener(ButtonEvent.CLICK, this.onClickHandler);
        }
    }

    override protected function onDispose():void {
        if (redButton) { // можно смело убрать эти if
            redButton.dispose();
        }
        if (buttonNormal) { // можно смело убрать эти if
            buttonNormal.removeEventListener(ButtonEvent.CLICK, this.onClickHandler);
            buttonNormal.dispose();
        }
        super.onDispose();
    }

    private function onClickHandler(param1:ButtonEvent):void {
        onWindowCloseS();
    }
}

Создаём пустой Flash, идём в File -> ActionScript Settings... и добавляем в Source Path путь к MainView.as; На втором табе подключаем lobby.swc; снимаем галку "Automatically declare stage instances". В поле Document Class вписываем MainView.

Нажимаем Ctrl+L, создаём новый символ - RedButton с классом RedButton ставим галку "Import for runtime sharing" и вписываем в поле "guiControlsLogin.swf". Аналогично, делаем ButtonNormal, только вместо guiControlsLogin.swf импортируем из guiControlsLoginBattle.swf

Теперь надо создать инстансы символов. Перетащим на сцену RedButton и назовём его redButton, перетащим ButtonNormal и назовём его buttonNormal (они выглядят пустыми). Вы заметили, что в классе MainView есть два публичных поля с аналогичными именами? Попробуем сделать Publish и полученный файл - MainView.swf - поместим в \res_mods\[VERSION]\gui\flash

 

Когда эта swf загрузится, она будет иметь класс документа MainView, в котором redButton и buttonNormal проинициализируются импортированными символами.

Последнее - загрузчик в \res_mods\[VERSION]\scripts\client\gui\mods\mod_test.py:

#
# mod_test.py
#

from gui.Scaleform.framework import ViewTypes
from gui.Scaleform.framework import g_entitiesFactories, ViewSettings, ScopeTemplates
from gui.Scaleform.framework.entities.abstract.AbstractWindowView import AbstractWindowView
from gui.app_loader import g_appLoader
from gui.app_loader.settings import APP_NAME_SPACE
from gui.shared import EVENT_BUS_SCOPE
from gui.shared import events
from gui.shared import g_eventBus

MAIN_VIEW_ALIAS = 'test/mainview'


class MainViewMeta(AbstractWindowView):
    pass


class MainView(MainViewMeta):
    def __init__(self, ctx):
        super(MainView, self).__init__()

    def _populate(self):
        super(MainView, self)._populate()

    def _dispose(self):
        super(MainView, self)._dispose()

    def onWindowClose(self):
        self.destroy()


def onLobbyAppInitialized(event):
    if event.ns != APP_NAME_SPACE.SF_LOBBY:
        return

    app = g_appLoader.getDefLobbyApp()
    app.loadView(MAIN_VIEW_ALIAS, ctx={})


g_entitiesFactories.addSettings(ViewSettings(MAIN_VIEW_ALIAS, MainView, 'MainView.swf', ViewTypes.WINDOW, None, ScopeTemplates.GLOBAL_SCOPE, False))

# покажем окно сразу после загрузки лобби
g_eventBus.addListener(events.AppLifeCycleEvent.INITIALIZED, onLobbyAppInitialized, EVENT_BUS_SCOPE.GLOBAL)

Вот такой результат получился у меня, кнопки нажимаются (две голубые кнопки вверху - другой эксперимент):

shot_004.jpg

 

 

Думаю, теперь понятно, как делать более сложные интерфейсы - надо импротировать другие контролы. Где они находятся, можно выяснить только посмотрев, что внутри файлов gui*.swf

 

Подводные камни:

  • во Flash не видно размеров контролов, вообще ничего не видно
  • (не проверял, но думаю что) не все gui*.swf можно использовать, некоторые - не загружены
  • Upvote 4
Link to comment
Short link
Share on other sites
SkepticalFox

SkepticalFox

Posted
Posted (edited)

Подводные камни:

Flash Professional покупать ради такого перебор, а пиратить в 2к16 это зашквар...

P.S. в FlashDevelop можно на mxml описать интерфейс, но при этом линкуется в swf всякая бурда ненужная...

Edited by SkepticalFox
  • Downvote 1
Link to comment
Short link
Share on other sites
POLIROID

POLIROID

Posted
Posted (edited)

(не проверял, но думаю что) не все gui*.swf можно использовать, некоторые - не загружены

При проставлении параметра "Import for runtime sharing", никаких проблем с "не загружены" не возникнет.

Проблемы такого рода возникают если создавать на лету с помощью AS без пред загрузки нужных библиотек.

 

во Flash не видно размеров контролов, вообще ничего не видно

Ну почему же видно, если перед проставлением символу параметра "Import for runtime sharing" добавить на него то что хотите видеть.

У Wargaming-a во flash-е контролы выглядят вот так клик, и знаете, это таки удобно =)

Еще могу посоветовать обратить внимание на "Component definition..." клик, клик, клик, клик, клик, если его использовать количество написанного вручную AS кода уменьшается.

 

вы уже создали библиотеки lobby.swc, battle.swc и common.swc

Вместо создания оных можно использовать swc которые предоставляет Wargaming (находятся по пути gui/flash/swc, внутри gui.pkg)

 

Flash Professional покупать ради такого перебор, а пиратить в 2к16 это зашквар...

Согласен, но там подписка копеечная, а если софт еще и прибыль приносит то грех его не купить.

 

 

UP ввиду того что картошка как всегда и файлы из под коробки на данный момент битые, то вот swc.zip

Edited by POLIROID
Link to comment
Short link
Share on other sites
  • 9 months later...
CyToTV

CyToTV

Posted
Posted
В 28.12.2016 в 16:43, aks1983 сказал:

Итак, вы уже создали библиотеки lobby.swc, battle.swc и common.swc, а потом программным образом создали окно, а в нём контролы.

Всё хорошо, но хотелось бы в визуальный редактор, типа gui-builder. К тому же, чтобы сделать окно, нужно создавать классы, и добавлять в него контент программно. На самом деле это можно делать во Flash, только с некоторыми оговорками.

 

Для начала, рассмотрим как работает GUI в танках. Что мы знаем:

  • есть набор классов net.wg.gui
  • есть файлы gui*.swf c графикой и анимацией
  • во Flash есть возможность использовать символы из внешних swf
  • во Flash есть возможность подключать swc

Итак, поехали.

Делаем окно с кастомными кнопками - MainView.as 


import net.wg.gui.components.controls.SoundButtonEx;
import net.wg.gui.lobby.header.FightButton;
import net.wg.infrastructure.base.AbstractWindowView;

import scaleform.clik.events.ButtonEvent;

public class MainView extends AbstractWindowView {

    public var redButton:FightButton;
    public var buttonNormal:SoundButtonEx;

    public function MainView() {
        super();
    }

    override protected function configUI():void {
        super.configUI();
        window.title = "Моё окно";
        if (redButton) { // можно смело убрать эти if
            redButton.label = "Просто кнопка";
        }
        if (buttonNormal) { // можно смело убрать эти if
            buttonNormal.label = "Закрыть окно";
            buttonNormal.addEventListener(ButtonEvent.CLICK, this.onClickHandler);
        }
    }

    override protected function onDispose():void {
        if (redButton) { // можно смело убрать эти if
            redButton.dispose();
        }
        if (buttonNormal) { // можно смело убрать эти if
            buttonNormal.removeEventListener(ButtonEvent.CLICK, this.onClickHandler);
            buttonNormal.dispose();
        }
        super.onDispose();
    }

    private function onClickHandler(param1:ButtonEvent):void {
        onWindowCloseS();
    }
}

Создаём пустой Flash, идём в File -> ActionScript Settings... и добавляем в Source Path путь к MainView.as; На втором табе подключаем lobby.swc; снимаем галку "Automatically declare stage instances". В поле Document Class вписываем MainView.

Нажимаем Ctrl+L, создаём новый символ - RedButton с классом RedButton ставим галку "Import for runtime sharing" и вписываем в поле "guiControlsLogin.swf". Аналогично, делаем ButtonNormal, только вместо guiControlsLogin.swf импортируем из guiControlsLoginBattle.swf

Теперь надо создать инстансы символов. Перетащим на сцену RedButton и назовём его redButton, перетащим ButtonNormal и назовём его buttonNormal (они выглядят пустыми). Вы заметили, что в классе MainView есть два публичных поля с аналогичными именами? Попробуем сделать Publish и полученный файл - MainView.swf - поместим в \res_mods\[VERSION]\gui\flash

 

Когда эта swf загрузится, она будет иметь класс документа MainView, в котором redButton и buttonNormal проинициализируются импортированными символами.

Последнее - загрузчик в \res_mods\[VERSION]\scripts\client\gui\mods\mod_test.py: 


#
# mod_test.py
#

from gui.Scaleform.framework import ViewTypes
from gui.Scaleform.framework import g_entitiesFactories, ViewSettings, ScopeTemplates
from gui.Scaleform.framework.entities.abstract.AbstractWindowView import AbstractWindowView
from gui.app_loader import g_appLoader
from gui.app_loader.settings import APP_NAME_SPACE
from gui.shared import EVENT_BUS_SCOPE
from gui.shared import events
from gui.shared import g_eventBus

MAIN_VIEW_ALIAS = 'test/mainview'


class MainViewMeta(AbstractWindowView):
    pass


class MainView(MainViewMeta):
    def __init__(self, ctx):
        super(MainView, self).__init__()

    def _populate(self):
        super(MainView, self)._populate()

    def _dispose(self):
        super(MainView, self)._dispose()

    def onWindowClose(self):
        self.destroy()


def onLobbyAppInitialized(event):
    if event.ns != APP_NAME_SPACE.SF_LOBBY:
        return

    app = g_appLoader.getDefLobbyApp()
    app.loadView(MAIN_VIEW_ALIAS, ctx={})


g_entitiesFactories.addSettings(ViewSettings(MAIN_VIEW_ALIAS, MainView, 'MainView.swf', ViewTypes.WINDOW, None, ScopeTemplates.GLOBAL_SCOPE, False))

# покажем окно сразу после загрузки лобби
g_eventBus.addListener(events.AppLifeCycleEvent.INITIALIZED, onLobbyAppInitialized, EVENT_BUS_SCOPE.GLOBAL)

Вот такой результат получился у меня, кнопки нажимаются (две голубые кнопки вверху - другой эксперимент):

shot_004.jpg

 

 

Думаю, теперь понятно, как делать более сложные интерфейсы - надо импротировать другие контролы. Где они находятся, можно выяснить только посмотрев, что внутри файлов gui*.swf

 

Подводные камни:

  • во Flash не видно размеров контролов, вообще ничего не видно
  • (не проверял, но думаю что) не все gui*.swf можно использовать, некоторые - не загружены

А можно ли видео тутор?) Я думаю это было бы намного удобнее

Link to comment
Short link
Share on other sites
  • 4 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...