| Both sides previous revision Previous revision Next revision | Previous revision |
| en:toolworks:docs:apparatus:extended-tutorial [2022/06/10 21:11] – + Light source swaying. jispar | en:toolworks:docs:apparatus:extended-tutorial [2022/08/18 17:06] (current) – Написал, что тутор заброшен. jispar |
|---|
| | <WRAP center round alert 60%> |
| | Sorry, but I can not continue to work on this tutorial, cause I have not enough time. Maybe I will go back and end with this a bit later.👋 |
| | |
| | You can find a project source at [[https://github.com/toolworks/ApparatusBeginnerGuide/tree/ApparatusLearn%232|github]]. |
| | </WRAP> |
| | |
| ====== Apparatus: Extended Guide ====== | ====== Apparatus: Extended Guide ====== |
| |
| Here we will solve other steps that were introduced in the paragraph above. We need to create 3 different widgets and animations for them. All the widget manipulation will be done via special HUD class. So: | Here we will solve other steps that were introduced in the paragraph above. We need to create 3 different widgets and animations for them. All the widget manipulation will be done via special HUD class. So: |
| |
| - Go to ''MainMenu'' folder in the Content Browser and [[ue>creating-blueprint-classes-in-unreal-engine/#usingtheassetview|create]] a new HUD class (derived from ''HUD''). Name it ''BP_MainMenuHUD''. Click on the diagram-like button on the up Editor menu, under "Word Override" go to the "Game Mode: Not overridden!" option, select "Create" -> "MechanicalGameMode".{{ :en:toolworks:docs:apparatus:create-main-menu-gamemode.png?nolink |}} | - Go to ''MainMenu'' folder in the Content Browser and [[ue>creating-blueprint-classes-in-unreal-engine/#usingtheassetview|create]] a new HUD class (derived from ''HUD''). Name it ''BP_MainMenuHUD''. Click on the diagram-like button on the up Editor menu, under "World Override" go to the "Game Mode: Not overridden!" option, select "Create" -> "MechanicalGameMode".{{ :en:toolworks:docs:apparatus:create-main-menu-gamemode.png?nolink |}} |
| - In the pop-up window name new created blueprint like ''BP_MenuGameMode'' and place it under ''MainMenu'' folder. In the opened BP Editor navigate to [[ue>setting-up-a-game-mode-in-unreal-engine/|details panel]] and make ''HUD Class'' option to be ''BP_MainMenuHUD''. Then go to the graph editor and disable joystick like so:{{ :en:toolworks:docs:apparatus:disable-joystick.png?nolink |}} | - In the pop-up window name new created blueprint like ''BP_MenuGameMode'' and place it under ''MainMenu'' folder. In the opened BP Editor navigate to [[ue>setting-up-a-game-mode-in-unreal-engine/|Class defaults]] and make ''HUD Class'' option to be ''BP_MainMenuHUD'', but ''Default pawn class'' to be ''Pawn''.{{ :en:toolworks:docs:apparatus:set-gamemode.png?nolink |}}Then go to the graph editor and disable joystick like so:{{ :en:toolworks:docs:apparatus:disable-joystick.png?nolink |}} |
| - Now we need to add animation of light source swaying. We will perform this logic in the GameMode BP using ECS. Go to the level editor, select ''SpotLight'' object and add a ''Subjective Actor'' component to it via details panel. Create a new detail BP called ''D_Swaying'' in the ''MainMenu'' folder. In the details panel of recently added subjective component add this detail to the spotlight.{{ :en:toolworks:docs:apparatus:swaying-detail.png?nolink |}} | - Now we need to add animation of light source swaying. We will perform this logic in the GameMode BP using ECS. Go to the level editor, select ''SpotLight'' object and add a ''Subjective Actor'' component to it via details panel. Create a new detail BP called ''D_Swaying'' in the ''MainMenu'' folder. In the details panel of recently added subjective component add this detail to the spotlight.{{ :en:toolworks:docs:apparatus:swaying-detail.png?nolink |}} |
| - Next, select SpotLight actor and make it [[ue>BuildingWorlds/LightingAndShadows/LightMobility/|moveable]] via details panel. Go to the newly added detail BP editor and add some variables: | - Next, select SpotLight actor and make it [[ue>BuildingWorlds/LightingAndShadows/LightMobility/|moveable]] via details panel. Go to the newly added detail BP editor and add some variables: |
| ''Speed'' variable define, how fast the swaying would be, but the ''CurrentAngle'' is the current state of rotation. | ''Speed'' variable define, how fast the swaying would be, but the ''CurrentAngle'' is the current state of rotation. |
| </WRAP> | </WRAP> |
| - We will perform the rotation logic like so: ''CurrentAngle'' is the value in degrees of the angle in the unit circle. Every tick this value is increased by ''Speed'' parameter. To get the rotation of each tick, we need to get the ''Roll'' and ''Yaw'' attributes from the ''Original'' structure, but the ''Pitch'' parameter will be achieved by function: ''Original->Pitch + Amplitude * sin(CurrentAngle)''. Easy though? So let's create a few simple functions in the detail Blueprint: | - We will perform the rotation logic like so: ''CurrentAngle'' is the value in degrees of the angle in the unit circle. Every tick this value is increased by ''Speed'' parameter multiplied by [[ue>BlueprintAPI/AddEvent/EventTick/|DeltaSeconds]]. To get the rotation of each tick, we need to get the ''Roll'' and ''Yaw'' attributes from the ''Original'' structure, but the ''Pitch'' parameter will be achieved by the math function: ''Original.Pitch + Amplitude * sin(CurrentAngle)''. Easy though? So let's create a few simple functions in the detail Blueprint: |
| - ''Calculate Next Angle'': Increase a ''CurrentAngle'' value by ''Speed''. If new value is greater then ''360.0'', then turn it back to that range. Besides that the function set up the ''CurrentAngle'' value correctly, it is also return a corresponding value.{{ :en:toolworks:docs:apparatus:calculate-next-angle.png?nolink |}} | - ''Calculate Next Angle'': Increase a ''CurrentAngle'' value by ''Speed'' multiplied by ''DeltaSeconds''. If new value is greater then ''360.0'', then turn it back to that range. The function must obtain the ''DeltaSeconds'' value as float argument.{{ :en:toolworks:docs:apparatus:calculate-next-angle.png?nolink |}} |
| - ''GetPitch'': perform the function above. It will calculate a pitch based on the values of ''Original'', ''CurrentAngle'' and ''Amplitude'':{{ :en:toolworks:docs:apparatus:getpitch-function.png?nolink |}} | - ''GetPitch'': perform the math function above. It will calculate a current pitch based on the values of ''Original'', ''CurrentAngle'' and ''Amplitude'':{{ :en:toolworks:docs:apparatus:getpitch-function.png?nolink |}} |
| - ''GetNextRotator'': the **pure** function will use previous helpers to return a full rotator that the actor should be set to:{{ :en:toolworks:docs:apparatus:get-next-rotator-func.png?nolink |}} | - ''GetNextRotator'': the **pure** function that will use previous helpers to return a full rotator that the actor should be set to. Function must obtain the ''DeltaSeconds'' value as float argument:{{ :en:toolworks:docs:apparatus:get-next-rotator-func.png?nolink |}} |
| - Now let's navigate to menu GameMode and in event graph write down our mechanic. To do so, drag pin from ''Event Tick'' and create a new node - ''Sequence''. Find out the mechanic BP node and connect them. Click ''Add pin'' and in detail field select ''D_Swaying''. Next, we need to get Actor reference from Subjective interface and if it is valid, then just set its rotation by using ''SetActorRotation'' node (''Teleport physics'' flag may be empty).{{ :en:toolworks:docs:apparatus:gamemode-swaying-mechanic.png?nolink |}} | - Please, make ''GetPitch'' and ''Calculate Next Angle'' to be private, but the ''Original'' variable to be "Blueprint Read Only". |
| | - Now let's navigate to menu GameMode and in event graph write down our mechanic. To do so, drag pin from ''Event Tick'' and create a new node - ''Sequence''. Find out the mechanic BP node and connect them. Click ''Add pin'' and in detail field select ''D_Swaying''. Next, we need to get Actor reference from Subjective interface and if it is valid, then just set its rotation by using ''SetActorRotation'' node (''Teleport physics'' flag may be empty). As you remember, the function ''GetNextRotator'' require ''DeltaSeconds''. The last value can be accessed from ''Event Tick'' event. Promote it to variable, so you will not get spaghetti BP. The full GameMode Blueprint must be like this:{{ :en:toolworks:docs:apparatus:gamemode-swaying-mechanic.png?nolink |}}<WRAP center round info 60%> |
| | It is worth to check for the actor validity, because the ''D_Swaying'' detail can be added to non-actor Subjective. |
| | </WRAP><WRAP center round help 60%> |
| | If you have some strange extra pins on the Mechanic node like this:{{ :en:toolworks:docs:apparatus:mechanic-error.jpg?nolink |}}Then try to reload Unreal project. |
| | </WRAP> |
| - Go to the level editor and set up detail in the SpotLight accurately:{{ :en:toolworks:docs:apparatus:swaying-detail-parameters.png?nolink |}} | - Go to the level editor and set up detail in the SpotLight accurately:{{ :en:toolworks:docs:apparatus:swaying-detail-parameters.png?nolink |}} |
| - Go to the project settings and in ''Supported Platforms'' remove all flag except for Android. | - Original rotator: ''(Pitch=-90.000000,Yaw=-107.002370,Roll=107.002370)'' (The same as SpotLight absolute rotation); |
| - Launch your game on the Android device (if you have one). | - Amplitude: ''17''; |
| | - Speed: ''80''. |
| | - Go to the project settings and in ''Supported Platforms'' remove all flags except for Android. **Find** ''Support Movable Spotlights'' and ''Support Movable SpotlightShadows'' settings and **enable** them both. |
| | - Launch your game on the Android device (if you have one).<WRAP center round help 60%> |
| | Here are some advices of how to launch the game on the real device, because sometimes this step is just a headache for developers: |
| | - Before launching on the device, reopen your UE in administrator mode, as it mentioned [[https://forums.unrealengine.com/t/packaging-fails-with-unauthorizedaccessexception-access-to-the-path-c-program-files-epic-games-ue_4-18-engine-programs-automationtool-saved-is-denied/416792|here]]. |
| | - To ensure that your device is connected to the computer, open [[https://ru.wikipedia.org/wiki/Cmd.exe|cmd]] and run ''adb devices''. You should see your device and its id in the output. The last command is included in Android Studio [[https://developer.android.com/studio/releases/platform-tools|platform-tools]], that is can be located in the path ''C:\Users\<UserName>\AppData\Local\Android\Sdk\platform-tools''. Use short USB cable, because long USB cables often useful only for device charging, not for gadgets connection. |
| | - Go to the [[https://developer.android.com/studio/intro/update#sdk-manager|Android Studio SDK manager]] and install ''Android 10.0+ (R)'' (that is API version of 30) or ''Android 10.0 (Q)'' (API 29) and uninstall ''Android API 33''. |
| | - In UE projects settings find ''Android SDK'' section and set these settings: ''SDK API level'' to ''29'' and ''NDK API level'' to ''android-29'' (as it suggested [[https://forums.unrealengine.com/t/failed-to-open-descriptor-file-android/467113/11?u=prikalel|here]]). |
| | - Go to UE project settings and [[https://docs.unrealengine.com/5.0/en-US/setting-up-unreal-engine-projects-for-android-development/|configure your project for android]]. |
| | - You can try other build formats (like ''Multi'' or ''DXT'') as it mentioned [[https://forums.unrealengine.com/t/failed-to-open-descriptor-file-android/467113/9?u=prikalel|here]]. |
| | - To solve ''Failed to open descriptor file'' [[https://forums.unrealengine.com/t/failed-to-open-descriptor-file-android/467113/9?u=prikalel|error]], you can try to create a [[https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/Mobile/Android/PackagingAndroidProject/|build and install]] the game with ''bat''-script. |
| | - Other solutions can be found [[https://forums.unrealengine.com/t/android-builds-do-not-work-anymore/139067/7?u=prikalel|here]], but anyway, just try to find your problem in [[https://forums.unrealengine.com/|Google]] or write your problem to [[https://discord.gg/PzZUfgHR8m|us]] directly. |
| | - Check your device API level with [[https://play.google.com/store/apps/details?id=com.cpuid.cpu_z&hl=ru&gl=US|CPU-Z]] application. |
| | </WRAP> |
| | <WRAP center round info 60%> |
| | Our result: |
| | {{youtube>DWirEgd5YdM?medium}} |
| | </WRAP> |
| | |
| | ==== Creating Widgets ==== |
| | |
| | - Ok, now we need 3 different widgets for main menu, settings and level picker. Let's create the first widget in ''MainMenu'' folder. Click the ''Add'' button with the green plus sign and select ''User Interface -> Widget Blueprint''. In the pop-up window ''Pick Root Widget for New Widget Blueprint'' expand ''All Classes'' and select ''Subjective User Widget''. We will use Apparatus to handle widgets switching. Name the new widget to be ''WBP_MainMenu''. Run <kbd>Ctrl+Shift+s</kbd> to save all. |
| | - Open the widget editor. Search for the ''Horizontal Box'' in the [[ue>../../4.27/en-US/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/|widgets palette]]. Drag & drop it to the root item (''[WBP_MainMenu]'') in the ''Hierarchy''. For now you should be able to see the borders of the widget. In the palette search for ''Spacer'' item. Add two of them to the horizontal box. Search for ''Vertical Box'' and add it between spacers in the horizontal box. Then select three added items (2 spacers and 1 vertical box) in the hierarchy and in details panel in ''Slot (Horizontal Box Slot)'' section make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Now we need to add 4 spacers and buttons between them to the vertical box. Select 7 added items and, again, make ''Size'' parameter to be ''Fill'' instead of ''Auto''. Select the first one spacer in vertical box and name it something like ''HeadSpacer''. In the details panel you will see the float value near to the ''Size'' parameter in ''Slot (Vertical Box Slot)'' section. Make it to be ''3.0''. Then rename each button to the correct name, for example, ''Levels'', ''Settings'', ''Quit''. Add text element to each button with the proper text value (see ''Content'' section in details panel). Select all 3 added text items and make their ''Color and Opacity'' color to be black (see ''Appearance'' section). Save and compile the widget. Try to resize screen in the viewport so you will see that the widget we created is adaptive for any screen size. Here is the result of our configuration: {{ :en:toolworks:docs:apparatus:main-menu-widget-configuration.png?nolink |}} |
| | - Perfect. We will customize our appearance to be a little unique in the future, otherwise any player will find that the game is created with UE (because of buttons shapes and the default text font). But now we will create some logic for the widgets. In the opened widget go to the graph editor and check that you can access button variables. |