MatroseFuchs

Hello, what methods API do you need and what reason?

How to add and use Unbound technology on the ModAPI stage As Unbound layout is processed on the Flash side, then the development of the mod will be associated mainly with ActionScript files. We need a layout handler and the main file for the Flash API similar to what we already did in the previous examples. But first, let’s prepare a file with a simple layout code that we will experiment with, for example, draw a square in the corner. test_window.xml Create an XML file with a simple layout of a simple white square. The resulting XML file shall be run through the "xml2as.bat" utility in order to compile layout expressions into a SWF file similar to what we did with the modification of the finished XML. Put the resulting SWF file in "..\res_mods\0.8.8.1\gui\unbound\flash" and add its path to "..\gui\ lash\USSExpressionsLoader.xml". Movie.as To process XML files with Unbound layout, we need to create a handling tool. To do this, open the AcrionScript editor (for example, FlashDevelop) and create a new project. The main Flash file of the mod will be called, as is customary, "Main.as", and for handling the layout we will create another one and name it, for example, "Movie.as" from which we will start. Now we need to inherit the Movie handler class from the "ScaleformMovie" class, which we import from the external library "wows_library.swc", with the command "import lesta.dialogs.ScaleformMovie;". In this parent class, we will have almost all the necessary tools to work with the Unbound layout. Next, we declare a variable for the layout “element” "private var unboundElement: UnboundElement;" and import this data type "import lesta.libs.unbound.UnboundElement;". We also need a controller for our element, declare it "private var unboundController: UnboundElementController;", we also import its class "import lesta.dialogs.battle_window_controllers.UnboundElementController;". Since our handler inherited the class from the parent class, now it is necessary to correctly describe the main function of the class "public function Movie()". If we look at the parent class, we will see that its main function has three parameters, so we also need to set three parameters. When creating an instance of our class, we will pass there all the necessary parameters. Now, in this Main() function, we add the call to the parent class (super()) by the rules and pass the parameters of the function of our class to it. Here we add a callback that will update the element stage size. The next function that we will describe is the main function of handling the layout. So, let's declare a function, for example, call it "public function buildUnboundApplication():void", create an instance of the element "new UnboundElement()". Now our element needs to specify the path to the XML file with layout in the "config" property. This can be done by specifying a direct path in the format "C:\\Games\\World_of_Warships\\res_mods\\0.8.7.0\\PnFMods\\ubtest\\test_window.xml" (this is the path in ActionScript), or by adding a file search function "get configPath()", this is necessary due to the peculiarities of downloading files, because the folder with the mod is outside the file upload directory. After that, in the "rootElementId" element property we indicate the name of the element in the layout, which will be the main one for displaying on the stage. Next, we need to create an instance of the controller "new UnboundElementController()", which will be responsible for loading this element. In the "clip" property you need to specify the "unboundElement" element to be loaded, via "setDataHub" method, add the "setDataHub (dataHub)" datahub instance to the controller property, which we will pass when initializing the "Movie" (this dataHub instance will not contain data but we need to add it), using the "setUbCentral" method add an instance of "protoCentral" (it will contain all the bindings), which is located in the parent class "ScaleformMovie", then using the "initController()" method initialize it. Now let's set the element stage size using the "setStageSize" function and pass it the stage sizes from the main class of the Main mod, which we will describe later. In the function, create an instance of the stage from the available components "lesta.components.Stage", and set the attributes of the component "width, height, scale and evStageSizeChanged", then pass these sizes to the element controller. Finally, add our element to the "addChild (unboundElement)" stage. Main.as In the main class of the mod, declare two variables - "dataHub:DataHub" and "movie:Movie" (our layout handler). In the main function of the class, create an instance of the datahub and declare a call of the main function of the parent class "ModBase" from which we inherit our "Main" (see the previous examples for this). We override the function "init()" of the parent class "ModBase" and describe it, as it will be executed during initialization (if necessary, you can override other parent class functions). In this function, we also need to call the overridable parent class function "super.init();", now we will create an instance of the layout handler "movie" and pass to it the required parameters "new Movie (dataHub, this.stage, gameAPI)", then add the layout handler instance to the container of our mod "addChild(movie)", add to the handler a listener of the event of adding it to the stage "movie.addEventListener (Event.ADDED_TO_STAGE, onAddedToStage);" and add our mod’s link to the ModAPI stage "gameAPI.stage.addChild (this)". Let’s describe the last function that will be called when the handler is loaded onto the "onAddedToStage(event: Event)" stage. For Scaleform to accept our movie, we need to create an entity “entity” with a stage id (id - ComponentClass.stage), a stage component “stageComponent” with the same id, add the stage component to the entity, get a collection of entities with stage components and add our entity "collection.add (entity)" to this collection. Now we can use our handler method to output the result to the stage "movie.buildUnboundApplication();" and delete the listener, because we don’t need it anymore, our element is now on the ModAPI stage. Mod on unbound We compile our project and the resulting Main.swf file (the name of the final project file can be set in the project properties) put to the mod folder. Add the Main.py file in which we write one line "API_VERSION = 'API_v1.0'", because without it, the mod will not work. Add our prepared XML file with the layout to the mod folder, and put the compiled SWF file from XML to "gui\unbound\flash" and add the path to it in "gui\flash\USSExpressionsLoader.xml". Run the client and make sure that our mod handled the file with the layout and displayed a white square in the corner of the game window. Add data to the scope Let's analyze the use of such a tool as a controller, which allows to add data to the scope and operate it, and for this we need to write our own controller. So, we will create a new file in the project and name it "MyUbController", it will inherit from the "UbController" class. In the controller, we override the method "override public function init (param1:Vector.<IUbExpression>):void" so it is possible to pass the calculated arguments to it. Pass the arguments to the parent class "super.init(param1);" and write a line into the scope, which we then display "scope.myText ="Text";". Our controller is ready. Add the controller to the main file "Main.as" via import if the file is in a subdirectory, or as in our case the controller is in the same directory as the other project files, then just declare the controller "MyUbController;" to initialize it and the controller data could be used (if your controller is in the same directory as Main.as, then you do not need to import it), or you can configure your editor so that when assembling the SWF file it also includes unused project files. Now add the resulting controller to the XML file, mark up the text block and use the data from the scope for display. Remember that after changing the layout you need to reassemble its SWF, otherwise we will not see the change. Run the game and see the result. Our simple mod is ready. PS In order to drag and drop our rendered element and the layout does not break, you need to create the “UserPrefs” settings file in which they will be stored and updated.

Hi, unfortunately not yet.

Hello, no we do not store old versions of files.

Hello, not all ports and maps support multi-weather, this also applies to day-night lighting.

Hello, Thank you for reporting the error. At the moment, ModStation is not working with the Steam client, we are working on troubleshooting.

Hello, Do you want to change 3d models or skins?

CSS Tips and Tricks Usage of style objects (similar to css-classes) Create style objects: (def css SomeStyleObject() (position = "absolute") (width = 100%) (height = 100%) ) Invoke: (block (class SomeStyleObject) ) Example of implementing the Hover pseudo class The Hover is triggered when you point to the cursor to a specific area, and not the entire block If you need to set a certain area as hitArea, add a block whose name='hoverArea' and pass the block's name to the hitArea property of the parentElement element with the help of the $target object. Styles change depending on the screen's width/height (similar to media requests)

Styles and CSS General Description A block's layout parameters can be customized via its style. Each block has its own set of style parameters. Customizing style for the tf block: (tf (style (fontSize = 32) (textColor = 0xFFFFFFFF) ) (text = 'Hello world!!!') ) Customizing style for the block-type block: (block (style (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) ) Customizing style for the mc block: (mc 'Window_BG' (style (width=100) (height=50) ... ) ) Styles can be described in a separate definition and transferred to the block's class property. (def element TestView() layout = true (block (class BlockStyle) ) ) (def css BlockStyle() (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) The value of the class property can be calculated in an expression. This allows you to adjust the blocks' styles depending on the conditions. If several styles with the same properties are applied to a block, the subsequent ones will overwrite the values of the previous ones. The application sequence is important. (block (class BlockStyle_1) (class BlockStyle_2) ) Note: But if you change the style's property directly in the style and transfer CSS as a parameter with the same property, the sequence of style application does not matter. The style block will be the last one applied. Table of Styles Block types: Basic blocks: tf, mc, image, and text_input. Container blocks: block (and all its aliases — hblock, vtile, gtile, reverse, and hreverse), list, view_holder, slider, scroll_bar, progress. and scrollArea. Container blocks inherit the properties and methods of their base block. Property CSS analog The property is supported by: Value types Example of a possible valie width width all blocks number, %, px 10px; 10% minWidth min-width all blocks number, %, px 100px; 50% maxWidth max-width all blocks number, %, px 100px; 50% height height all blocks number, %, px 10px; 10% minHeight min-height all blocks number, %, px 100px; 50% maxHeight max-height all blocks number, %, px 100px; 50% position position all blocks absolute, flow absolute left left all blocks number, %, px 10px; 10% right right all blocks number, %, px 10px; 10% top top all blocks number, %, px 10px; 10% bottom bottom all blocks number, %, px 10px; 10% center offset from the center all blocks number, %, px -170 hcenter offset from the center horizontally all blocks number, %, px 10px; 10% vcenter offset from the center vertically all blocks number, %, px 10px; 10% marginLeft margin-left all blocks number, %, px 10px marginRight margin-right all blocks number, %, px 10px marginTop margin-top all blocks number, %, px 10px marginBottom margin-bottom all blocks number, %, px 10px paddingLeft padding-left container blocks number, %, px 10px paddingRight padding-right container blocks number, %, px 10px paddingTop padding-top container blocks number, %, px 10px paddingBottom padding-bottom container blocks number, %, px 10px padding padding container blocks number, %, px 10px backgroundColor background-color container blocks 0xARGB 0x1000ff00 backgroundImage background-image container blocks str, 'url: {url}', 'bitmap: {linkage}', 'symbol: {linkage}' backgroundImage = 'url:..\icons\ico.png' backgroundSize background-size background-repeat container blocks fill; crop; cover; repeat; autosize backgroundSize = "crop" flow flex-direction container blocks Flow.HORISONTAL, Flow.VERTICAL, Flow.TILE_HORIZONTAL, Flow.TILE_VERTICAL flow = "Flow.HORISONTAL" align justify-content align-items container blocks left, right, bottom, top, center, middle align = "middle|right" alpha opacity all blocks number from 0 to 1 1; 0; 0.4 fontSize font-size tf number 36 leading inter-string interval tf number letterSpacing letter-spacing tf number 2 fontFamily font-family tf str textColor color tf 0xRGB 0xCFC7A8 textAlign text-align tf left; right; center textAlign = "center" multiline white-space tf bool true; false ubScaleX transform: scaleX() all blocks number changes the block's scale horizontally 1.25 ubScaleY transform: scaleY() all blocks number changes the block's scale vertically 1.25 rotation block rotation, suitable for blocks which are located in absolute position all blocks in absolute position number (value in degrees) (style (rotation = 30) ) pivotX zero-point position by X used for rotation, scale, absolute position all blocks in absolute position number, %, px (style (pivotX = 50%) ) or (style (pivotX = 100px) ) pivotY zero-point position by Y used for rotation, scale, absolute position all blocks in absolute position number, %, px (style (pivotY = 10%) ) or (style (pivotY = 20px) ) scaleX scale by X could be < 0, applied to block itself and its children all blocks double (style (scaleX = 1.2) ) scaleY scale by Y could be < 0, applied to block itself and its childre all blocks double (style (scaleY = -1.0) ) BackgroundSize (def element NationFlagsSmall () layout=true (style (bind backgroundImage "'url:../nation_flags/small/flag_USA.png'" init=false) (backgroundSize = "fill") (width = 117) (height = 72) ) ) cover - растягиваем текстуру по размеру контейнера с сохранением пропорций текстуры, чтобы она заполняла всю площадь, с обрезанием текстуры за пределами контейнера. crop - обрезаем изображение по размеру контейнера. fill - растягиваем изображение по размеру контейнера без сохранения пропорций. align - позиционируем изображение по центру контейнера с обрезанием текстуры за пределами контейнера.

UI Widgets Symbol Adding a MovieClip to the stage by linkage. Symbols are used inside definitions of elements, whose layout parameter is set as false. Layout system is disabled. Example: (style (backgroundImage = "'symbol:minimap_aim_position'") ) 'symbol:' + toLower('minimap_' + markerIcon) Sprite Adding a Sprite instance to the stage. Sprites are used inside definitions of elements, whose layout parameter is set as false. Example: MC Adding a MovieClip instance to the stage by linkage. MovieClips are used inside definitions of elements, whose layout parameter is set as true. Layout system is enabled. Example: (def element TestView() layout=true (mc 'FWCloseButtonSlimMC' (name = 'closeBtnCrossAnim') (bindcall gotoAndPlay "stateFrame") ) ) TextField Adding a TextField instance to the stage. This is supported for all elements, whose layout=true|false. To display a text, use the text or htmlText property. When text and htmlText will set at the same time, only last action will applied Example: When the text is too large and doesn't fit into the text field, you can use the elideMode property. If elideMode=true, the text that doesn't fit into the block is cut off, and the last three symbols of the text inside the block are replaced with dots. Every time a text is entered, the block generates the textElideStatus event with the value argument, which indicated whether the text has been cut or not. Example: substitute substitute - textblock method that allows replacing substrings with pictures. init=true - required argument (tf (class $TextDefault19NM) (bindcall substitute imageOffset="_frameTextCount" substitutionMap={'[test_icon]' : 'icon_ground_radar_ally' } sourceText='radar: [test_icon] mouse: [KEY_LEFTMOUSE]' postfix='_bg' init=true ) ) Element Block It adds a Sprite container-instance to the stage. All nested blocks will be added to this container and positioned one after another, based on the value of the flow property in the block's style. A block has the following aliases: block - vertical block hblock — horizontal block vtile — vertical tile block htile — horizontal tile block reverse — vertical block with reverse order of elements in it hreverse — horizontal block with reverse order of elements in it backgroundImage It adds a Bitmap instance to the stage. In the source property, specify the following: The path to the file (specify the relevant object of the R-class global object) The texture name from the atlas URL of the image If the block's size hasn't been set in style, the block will become of the same size as the image, once the image is loaded. (bind backgroundImage "markerIcon") ---------------- (style (bind backgroundImage "'bitmap:' + toLower(markerIcon)") ) ---------------- (block (style (backgroundImage = 'url:../aircraft/icon_lock.png') ) ) Slider This component is just a regular Slider. The component is configured through the following variables in its scope: value (number) — current value of the slider between the minimum and maximum values. minimum (number) — minimum value. maximum (number) — maximum value. enabled (true/false) — whether the slider is available or not. The slider can dispatch the following events: evValueChanged — the slider value has changed.

toplevel def (def) or Definition Construction (def object Name) allows to define global object that can be invoked from any file in working directories. Warning! Name of the object have to be unique. No matter in the same or separate files this definitions placed. Otherwise you'll get error and only first object will be created. (def element TestView()) (def element TestView()) ERROR: Duplicate element definition: 'TestView'

Scope A scope is a storage of data, available in the body of the element's description. It is not inherited from parent elements. The markup features strong typing — all the used variables and their types, as well as events, must be defined before they are used in the calculated expression. Otherwise, they must be passed from an external scope when calling the element. A scope can contain: Variables (var) Constants (const) Definition of an event Call of the bind method Dispatch of an event The $Animation controller for animating variables in the scope Example: The scope can be described in different parts of the element (for example, the level variable). On the execution stage, all the parts will be integrated into one scope. Display of the scope's content: (trace "$scope") result: UBTRACE: Scope: Events: __onParamChange Vars: color : 1.67738e+07 level : 0 radius : 13 Note: The variables, passed to the element as arguments of a definition, are NOT added to the scope. In the example above, the textStyle variable is not in the scope. When creating an instance of an element, you can change the variables in its scope: Creating an instance of an element: (element LevelView 'PromoTitleTextStyle' (scope (level = 10) (radius = 40) ) ) When an element is called, variables in its scope can be synced with the parent scope's variables. Creating an instance of an element (scope (var parentLevel:number = 15) ) (element LevelView 'PromoTitleTextStyle' (scope (bind level "parentLevel") ) ) When scope is updated evScopeUpdated event is dispatched. Note: It this moment evScopeUpdated event is dispatched only if model was changed. evScopeUpdated event has the parameter "type". By default it equals "default". It is "model" in case of model updating. (bind enableTutorialHint "!showUnavailableConfirm" init=false watch=false (event "evScopeUpdated") (enabled="$event.type == 'model'") )

Macro A macro is a named and parametrized markup fragment, which is added to the place where it's called on the parsing stage. This allows using a markup fragment several times. Usage example: Once defined, the macro can be called at any place. # A structure that calls a macro (macro trace expr="variable") This mechanism is used for autogeneration of the scope, which will be bound with a Python model.

Layout Unbound has a layout system, which serves to position the blocks, located in one container, based on certain parameters. To turn on the layout system, set layout=true|false in the element's definition. The description of the element with layout=true is equivalent to def layout. Layout's parameters are described in style. Example: Positioning of Blocks The layout system positions the blocks based on the values of the position property. Position can have the following values: flow — the layout system positions nested blocks one by one (a block's position depends on the position of the previous block); by default, position="flow" absolute — the layout system excludes the block from the flow (positioning list) To position blocks relative to each other with position="flow" you can use the following style properties: paddingLeft / paddingRight / paddingTop / paddingBottom — left/right/top/bottom padding for nested blocks. If you need to set all four parameters at once, you can use the following structure: (style (padding = [5, 10, 15, 20]) # [paddingLeft, paddingTop, paddingRight, paddingBottom] ) marginLeft / marginRight / marginTop / marginBottom — left/right/top/bottom margin from the current block. If you need to set all four parameters at once, you can use the following structure: (style (margin = [5, 10, 15, 20]) # [marginLeft, marginTop, marginright, bottom] ) Note: The principal difference between margins and paddings is that the paddings parameters are set in the parent block and determine the positioning of nested blocks, while margins determine the position of the current block. gap, hgap, vgap — the distance between each of the nested blocks horizontally/vertically. If the distance between blocks is the same horizontally and vertically, you can use the gap parameter. Usage example: As a result, you'll see the following: Highlighted white is the size of the htile block. align — positioning of all nested blocks as a single block. It can have the following values: left — the content's alignment with the left margin right — the content's alignment with the right margin top — the content's alignment with the top margin bottom — the content's alignment with the bottom margin center — the content's alignment with the central horizontal line middle — the content's alignment with the central vertical line Example of the block's alignment with the left edge: You can use several values at a time, by dividing them with "|" (for example, if you need to center the content both vertically and horizontally). (align = "center | middle") To position the blocks with position="absolute" the abovementioned properties aren't applied. In this case, you should use the following ones: left / right / top / bottom — padding from the left/right/top/bottom edge of the container, which contains the block. Example: As a result, you'll see the following: hcenter / vcenter — padding from the center horizontally/vertically As a result, you'll see the following: Note: The size of the block whose position="flow" equals the sizes of the blocks, nested in it. The size of the block whose position="absolute" equals 0 by default.

Functions for calculated expressions The list of functions is arranged in the form of a table. Function name in markup Description Example round(number) Mathematical rounding to an integer "round(0.423456)" # 0 toUpper(str) Converts lower case symbols to upper case symbols toLower(str) Converts upper case symbols to lower case symbols (var test:number = "clamp(smth, 0, 10)") tr IDS string localization abs(number) Mathematical module radToGrad(radNumber) Conversion from radians to degrees tan(radNumber) Tangent of an angle in radians floor(number) The closest integer that is less than or equal to the specified number ceil(number) The closest integer that is greater than or equal to the number pow(basis, exponent) The basis number is raised to the power of the exponent formatSeparator(number) Grouping the integer part into 3-digit segments, separated by a space. Rounding the fractional part to the second decimal place. "formatSeparator(1103569353.789254232)" # result 110 123 123 123.79 formatFloatingPoint(number, numberOfDigits=1) Rounds the fractional part to the numberOfDigits decimal place. By default, numberOfDigits = 1. "formatFloatingPoint(1.193454334123)" # result 1.2 "formatFloatingPoint(0.423456, 3)" # result 0.423 subst(str, array_values, dict_values) Substitution of the arguments into the placeholders. "subst('first number is %d, second is %d', [50, 51])" subst('%(min)d - %(max)d', [], {min:1, max:2}) countdownFormat(numberSeconds, numberOfDigits, isShowMinutes) Formats the number of seconds into the min:secongs format. If the number of minutes is 0, it displays 00 "countdownFormat(125, 0, true)" min(x, y) Minimum number of the two. return x < y ? x : y (var test:number = "min(smth, smth2)") max(x, y) Maximum number of the two. return x > y ? x : y (var test:number = "max(smth, smth2)")