![]() Import the background image for the widget into the Scene - "HealthWidget_bg.png". ![]() The Layer names are the same as the Symbol names.Ĭreate a Layer in the Timeline and name it "health_widget_move". ![]() The provided names for Layers and Symbols are directly taken from the It will enter the screen from the left side, but let's start with the layout first. The Health widget will have an initial position animation. Do the same for the "export_Filler_Bottom.png" image on a separate Layer "bottom_background". This should be separated in its own Layer with the name "top_background". Starting with the top and bottom - import "export_Filler_Top.png" and place it at the top. The UI will grow and shrink, therefore it will look good on both 3840x21x720 resolutions. Since Prysm uses responsive units by default, the UI will scale properly with the size of the screen as long as the screen's ratio is 16:9. The sample project is 1920x1080 pixels (aspect ratio 16:9). Presuming that Coherent Prysm is already installed in Animate, create a new Coherent Prysm document and choose the scene size. If the IDs are the same, the data-bind-* attributes would also be the same and this would cause the two text elements to behave like one(bad). Coherent Prysm uses the Instance names to provide the html elements with IDs and data-bind-* attributes. Symbols (their content specifically) which change according to the game model should be unique within the Animate project.įor example if there are two identical Text elements - one that changes according to the player's maximum heath and another which changes according to the ammunition left in the magazine.Įach text element should be within a Symbol with a unique instance name. Reusing Symbols in the Scene which are intended to change during gameplay.This will be explained further in the tutorial while creating such an element. The second Shape will be the dynamic part of the bar which resizes according to the game model value that is provided to it. The first Shape defines the shape and dimensions of the bar. Some parts of a widget, like a bar which fills, needs to be composed of two elements within one Symbol. Nesting elements which are going to be used with the game's model or logic.This is convenient, because the Animate project will look organized and at the same time the exported scene will have as few elements as possible. On export this will produce a single element despite that in the Animate project the element is nested inside a Symbol which is inside a Layer. Optimal structuring of Layers and Symbols.Įvery Symbol should contain just one element inside it.The Exo 2 font will be used for the Text elements. These techniques will help the integration of the UI to be as easy and smooth as possible after exporting it to HTML with Coherent Prysm. In this section some techniques will be defined for creating the Scene. This step by step tutorial of how to recreate the FPS HUD scene will be separated into sections, for each widget created. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |