Editor
This is the main page for showing you how to use the built-in "video editor" in Base! ヾ(≧▽≦*)/
Well alternatively you can watch the video showing me using the editor.
The editor will be accessible through clicking the edit option when viewing scenario list!
And then upon opening up you'll be greeted by a UI like this! Let's look at each one first!
Of course the setup you have is not hardcoded, you can actually customize it how you want!
To reset to the default view, just delete base.imgui file that will be saved in the same location you launch Base.
Each scenario have different assets that can be imported and use so scenarios can be easily share later.
Initially when first created a scenario you will see an empty list, from here you can import files to use in your scenario.
Which you can choose to upload a folder or file, depends on you!
Take for example here is me importing a bunch of images and a font, so I can use later!
When you're choosing a file for a custom font or image, the same ui will show up so you can choose!
For example here is me choosing a file for drawing an image on the screen.
With that, I think we're all set with assets.
You might notice the objects/actions tab on the top right of the screen when first opening up the editor.
This will help you to add actions and objects to the scene.
You can hover over them to show what they do, to add them to the scene just click on them,
and it will add it to the scene at where your timeline cursor currently at!
A more in depth of what these objects do and how to use them will be at another sections
This is the main timeline, where you can control it like a normal editor so not much to say here...
There will be different tracks, where for example track 0 will be render last, which means it will
render on top of everything else. However, this track order will only matter to objects, if you are adding an actions
then you don't have to care what the track it put at since it won't be used anywhere...
- Note: The track id (0, 1, 2, 3, ....) will also be used when for example moving an object so the action know what object to target when moving it.
- You can scroll up and down to show more tracks when your mouse cursor is at the track sections
You can press Ctrl + Scroll Up/Down to customize the time distance, here by default is 30 second
However by scrolling you can customize the max/min distance, this could be used so objects/actions with
small time duration can be more visible.
You can press anywhere then the timeline cursor will move there, alternatively there are 4 more ways to move inside the timeline.
- Using the time input, which you can see on the top left of the timeline tab, where you can input the time you want to move to.
- Holding left mouse button in the tracks sections, you can move the time backwards, the more you move to the left to hold, the faster
the time cursor will move backwards
- You can also hold left-click on the last right sections of the timeline to move it forward rapidly.
- By having your mouse cursor at the time sections (NOT THE TRACK SECTIONS) and scrolling your mouse you can easily navigate back and forth.
This is the part where you can see the preview of the scenario you're editing at the time specify by the timeline cursor.
Not much to say here, it just does what it has to do...
This is where you can actually edit the values, like size or what image or the values of an action or object when you add them.
Like for example here you see some values meant for the Preview object, including position, title/subtitle and image (extra: render layer)
Not much to say here, we will go more into depth in another section!
There is two type of save mode to choose;
- Json: This will save the scenario as a json file that you can somewhat read and easily edit values, but can be a bit large in size.
- Binary: Unreadable, basically just a bunch of 1 and 0 xD, however is lighter in size.
Let's first go in depth of how the objects works!
So basically keep in mind that all objects that is render (so basically everything except Sound object)
will have 2 thing to keep in mind:
- The position and size on the screen is HARDCODED to 16:9 ratio or to be more specific is HARDCODED to screen size 1920x1080 and then scale up and down accordingly, this means that you will have to treat the screen as such when moving the object or scaling it.
- There will be render layer type, which is 3 type
Top,Above Dialogue,Behind Dialogue, this will get priority over the track index which means if the object on track 0 isBehind Dialogueand the one on track 1 isTopthen the object on track 1 will still render on top of the object on track 0 regardless of the order. Also do note thatTopwill in fact render on top of everything.
This is basically the preview, which shows the scenario title, optional subtitle and optional background when the story first started you see in game.
There is nothing to say much here, so I'll just show you how it looks.
This is what the emoji and stuff that shows in game that express emotions in game. There are currently
a few missing that will be work on later, but you can play around with what currently here to see how it works.
This is a format that the game use to render characters (and animate them, it's not PNG xD), the only way to get them is through extracting the game files, I have another repo that host them here if you don't want to download them yourself.
- Note: this will only support the spine version that whatever the game supports, which is normally the latest stable version of spine. You can also download the skeleton viewer app to view the sprites and animation beforehand: https://en.esotericsoftware.com/spine-skeleton-viewer
This part is important, don't just import skeleton and atlas and that it, you will have to create a folder
that contains all the materials, (.skel, .atlas and the images that the sprite need) and THEN
import through Upload folder in Assets tab. And only AFTER THAT can you import the skeleton and atlas normally
through the Inspector tab.
It's just Image and Gif, just import it and go bruhhhhhh
This is an element that display well.... a Text! You can customize the font size using the slider inspector,
but you might notice something called a Text Segment, this is basically segment of text,
with each segment containing a text to display, unique font, colors, style....
You can use already existing segments or create a new one.
As you can see here there are multiple values, and it also allowing you to upload custom font!
You just have to mess around and find out, here is an example of how this could look.
Which you can see is very cool and customizable.
This is a simple popup like in game that shows the current "location".
This will just render a circle and rectangle, nothing to say here.
This will play a sound.
There will be values like how long will it take to fade in/out. The max volume to play at
and also start position which is where to play the audio, at the middle of the audio or at the start?
Also there will be Sound Id which is important if you want to forcefully stop the audio later using that id
or change the volume.
This will play a pre-defined animations, currently doesn't support creating custom animation yet but soon will be.
- Target Track: Choose element on that track to play animation.
- Animation Name: The name for the animation xD.
- Loop: Should this animation loop.
This will forcefully stop an animation even if it's looping, do note that this won't affect Play Sprite Animation
- Target Track: Choose element on that track to stop animation.
- Animation Name: What animation to stop.
This will play an animation pre-defined by the skeleton/spine you imported from before. You can also stack multiple animations on top of each other using layer.
- Target Track: Choose element on that track to play animation.
- Layer: The layer to play the animation on
- For example, most sprite in Blue Archive have an animation called
Idle_01that make their Halo float and them hovering which you can put on layer 0, and then you can put another animation that makes for example their face smile in track 1. So that they can keep both animation instead of them cancelling each other out.
- For example, most sprite in Blue Archive have an animation called
- Animation Name: The name for the animation xD.
- Mix Time (seconds): How long it take to lerp from the last animation.
- Loop: Should this animation loop, ideally yes.
Dialogue related stuff, running actions like Start/Add Dialogue and also Show Options will stop the time running until it finishes playing
and the user choose a dialogue/click on it.
This is not an action but put here so you can understand what this is.
This will determine if the dialogue should play or not, this is used so different dialogues could show depending on for example which option you choose!
For example if you're currently on dialogue index 1 and this dialogue index is 0 then the dialogue won't play since the index doesn't match.
This will start playing a dialogue or multiples dialogue, which each dialogue is basically like Text object,
but it also has a Play Speed values determining how fast the dialogue should play.
Now onto other parts we got.
- Font Type: What kind of font should we use for the Name and Association part.
- Dialogue index: refer to this section.
- Name: What name should this show.
- Association: What association should this show.
- Background: Should the gradient background render or not?
Note that the dialogue won't close unless you run Close Dialogue.
This is similar to start dialogue, but instead of starting a new one, it adds a dialogue onto an already playing
dialogue that got played using Start Dialogue, this can be used so that you can add another dialogue line
after the last one with a delay and not right after another like in L2D cutscene.
- New line: Should this dialogue start as a new line or add to currently existing one.
Change dialogue index to a value you choose.
Close any currently open dialogue.
This will show options so the user can choose. You can add like however you want.
You can also redirect the dialogue index depending on the options the player choose so that
different dialogue can be shown depending on the option like mentioned in Start Dialogue.
Close any currently opening options, currently useless since it won't run until an option is chosen anyway.
Some actions related to objects.
This move an object on the Target Track to a position you choose.
- Target Track: Choose object on that track to move.
- Duration: How long should this take to move the object to the target position.
- X/Y: The position to move to.
- Easing Mode: How the lerping should look, you just gotta play around with this to find out.
Similar to Move Object but always offset the object by specify value regardless of where the position is, for example if the object is at (5, 5) and the offset is (5, 5), then it will render at (10, 10)
This scale an object on the Target Track to a scaling you choose with customizable easing mode.
The point where the object should rotate around if it's rotating, you can search google Pivot Point Rotation to see what this is.
- Note this is useless for
Spriteobject, it will always rotate around the center, will be fixed in the feature.
This basically rotate an object around pre-defined pivot point, nothing to say here.
- Target Track: Choose object on that track to rotate.
- Duration: How long should this take to rotate the object to the target rotation.
- X/Y/Z: The rotation to rotate to.
- Easing Mode: How the lerping should look, you just gotta play around with this to find out.
Applied an effect onto an object onto the target track.
This will apply a hologram effect on top of an object
- Axis: X/Y determine the hologram effect strip render on the X axis or Y axis.
This will apply a rainbow effect on top of object
- Axis: X/Y determine the rainbow effect direction render on the X axis or Y axis.
- Distance: For eg: with a distance of 7.5F the color will be the same with x pos of 0 and 7500.
The higher the distance the slower and smoother the color will change.
This will apply a blur effect on top of object
- Radius: The strength of the blur effect
Render the object as outline instead of normally
- Radius: How big is the outline
Remove an effect that is being applied onto an object
- Target Track: Choose object on that track to remove an effect from.
- Effect Type: What type of effect to remove.
This will apply a color on top of an element, can be used for fading and allat.
- Target Track: Choose object on that track to apply overlay color.
- Fade Duration: How long it should take to fade to that color.
- Color: It's the color lol.
Very similar to Overlay Color but actually change the color of the object itself instead of just apply color overlay.
This could be used to make the object transparent and all that using the Alpha value.
This set the background to a... background, with a fade duration if you want to xD.
This clear any current background and can make it fade if you want to lol.
This change the sound volume
This will render a color onto the entire screen on the render layer you choose, will always render above objects on the same render layer.
This can be used for cool flashing scenes.
Ignore this for now.
This show/hide the Auto and Menu buttons that you see in scenario.
