Tips and Tricks with Luna Engine MV

じ☆ve冰风

Hi all, I’m not a pro at Luna Engine MV myself but I can provide a couple tips and tricks I picked up while learning the engine from others and the documentation, since there’s currently only a few tutorials out there currently.
Although I’m not the best at explaining or teaching things so I apologize if some things are still not clear or are kind of redundant haha. I may come back to this tutorial and add more or clean it up further sometime in the future. I hope it’s helpful!

The best way to learn Luna engine would be to read the documentation. All 49 pages xD. If all you’re doing for your ui is moving windows and changing sizes of the demo projects/empty base then you can maybe just skim it. But for fancier stuff you’ll need to understand it more. And here I am adding another pdf equivalent of 39 pages of tutorial content for you to enjoy lol.

You will need to put in a bit of work to get the specific menu you want, both on the ui artwork side and modifying scene yamls. It’s not a plug and play plugin unless you are ok with using just the demo project templates.

The sections of code that draw stats and images for each actor like those in the Shop scene or Equip scene, isSelect/Unselect conditionals, and the section of code in the Status scene yaml that converts the percent values of elemental weaknesses to words and the elemental type images would also be one of the harder things to customize or get the hang of using. If you know a bit of javascript you can do quite a bit with conditionals.

And you’ll also learn by editing parts one by one in the demo projects to see what happens after adding a new thing or changing a thing in a window. Starting with editing the title screen would also be the simplest to get the hang of how it works, then moving onto something like the Item/Skill/Equip/etc scene, then the battle scene because that’s a doozy to work with.

Also, make changes to one window at a time and test often because syntax is super finicky and you'll find a couple of crashes sometimes, this way you'll be able to know exactly where you messed up and fix it quickly rather than scrambling through the looong yaml to find the change that messed it up lol.

I also personally use Visual Studio code to edit my yamls because the different color coding makes everything easy to read. Ctrl+F is also a timesaver for finding a window name very quickly.

You can use any image editing program like Photoshop, Gimp, Krita, etc to make/edit your ui elements. If you are less artistically inclined, you can also use some free ui element images like those on OpenGameart.org, or buy asset packs for them.



Determining how to position the window:

X and Y sections of a window are what you want to adjust for position. When determining the window sizes and positions I would like, I eyeball it at first. The adjustments generally follow these rules:







If you want a window roughly positioned around a third of the screen horizontally, then put 33% as the position for percentage position or if you prefer using the pixel positions, do .33 multiplied by the max horizontal dimension of your resolution and use that value as the pixel position.

But, since the xy positions of a component is relative to its window, and the xy adjustments you make to the window itself are relative to its original position, it may take trial and error of a couple rounds of adjustments to get the position just right.

Then open up the game to playtest the menu, then go back to the yaml to adjust accordingly, see changes, repeat if needed. You’ll get a feel for window sizes and positions you want eventually. I think the key for soft resets for quicker scene testing and adjusting is f5.

There are probably more efficient ways to do this but this is how I usually go about it and learned which window the name was referring to by messing around with xy position settings and playtesting to see which window moved. I also do the same thing with tweaking window width and height to how I want it.



Compatibility with YEP Menu Core Plugins:

Luna Engine is also compatible with the YEP Menu Core plugins like Savecore, Itemcore, Equipcore. To edit the new windows that those plugins add to the existing scene, paste the getwindow stuff from the documentation into the console while you're playtesting in that menu to get the new window names, then add the names and modifications to the scene yaml.






Scene_Battle (BattleStatus) Tips:



The Lunatic section for the BattleStatus “window” is where you’ll make edits to and add new components that’ll draw for each individual actor like their face graphic, hp bars, mp bars, states, hp and mp numbers etc.



Here’s example settings you can use for changing the appearance of the HP or MP Gauges:

                        anchor:

x=0

y=0

(bar drains toward the left direction, good ol default setting)



Click to expand...

                        rotation: 180

anchor:

x=1

y=0

(bar drains toward the right direction)




Click to expand...

                        anchor:

x=0

y=0


rotation: 270

(these combined will make the bar vertical and drain toward the bottom)




Click to expand...

You can even set it diagonally.

                        anchor:

x=1

y=0

rotation: 225



Click to expand...

Image Gauges Tips

For custom image gauges it's a bit more work. You’ll need a config for both an “empty” gauge image component and line the bars up with the template image. The image gauge that will be the mask represents the “full” gauge. Sometimes you’ll have to adjust over and over again pixel by pixel to get the image gauge to fit over the empty gauge just right.

Spoiler: Image Gauges explanation:

But first, change type to ImageGauge and add a line for imagename: (folder location in system/whatever you named the file)







Default setting of image gauge draining to the left: No need to change rotation or anything.





after taking damage

(This is why you need another image behind the bar as the gauge’s background, I didn’t have an image for the empty gauge here)

Here’s tips if you want the image gauge to drain downward:








Prerotate the gauge mask image right beforehand so that when luna engine rotates the bar 270 degrees (so it can drain downward), it’ll also rotate the image to the correct orientation. No need to prep-rotate if you’re sticking with default “drain to the left” setting. Here’s the image gauge in action.





after taking damage

(This is why you need another image behind the bar as the gauge’s background, I didn’t have an image for the empty gauge here)



The component for the “empty” gauge + actor faces if you wanted, put this in lunatic with the other stuff:

Because of the ${data.actorId} name your actor face files as Actor1, Actor2, Actor3 etc, I also had the face graphic double as the gauge background because it would draw for each actor.





Example of the empty bar graphic, which in my case is included in the actor face graphic


The hp gauge mask I “prerotated” right 90 degrees, then rotated 270 degrees in the code to get upright and draining downward.



The custom image bars (and face HUDs) in action. (extra note: Turn order display is from Olivia OTB plugin not Luna)

Other Mini tips:



Scene backgrounds:






In the background component of a Scene yaml (first few lines), you’ll put down the name of the image for the bg you want. Each scene can have a different bg image if you want.



Changing how Scene Menu shows the actors:
Spoiler: Scene Menu columns:

Find the Menu Status window. If you want it completely vertical, put columns:1.

If you want it completely horizontal, put something like columns: 4, max, or however many party members you want showing in the menu. If you don’t want the lower rows of actors to show then set the height of the window to something really large so it is offscreen.

If want it something like the 6 party members menu in pokemon, leave as columns: 2 but make the actor picture/windows/etc stuff smaller so more actors show on the screen as they all get drawn. Or make the resolution bigger to fit more stuff easily on the screen.

Changing the window size width/height of MenuStatus will change the spacing between each actor vertically or horizontally.


Adding a line for or changing the number of columns for other windows like command windows in the item/equip/skill scenes, Battlestatus layout, Actorcommand in the battle scene.

Window Animations in Events section:


Spoiler: Window Animations examples and Explanation:

OnComponentshow:









Oncomponentshow is for windows that pop up when you select an option, like the skill or help window in battle.

Adding New Components like images and text:

Spoiler: Stuff Below:

Put your modifications in the lunatic section under components for a window.
Example components of mine, there are also some in the sideview template:












The arrows graphic and the header banner. Positions of components are relative to the positions of the window they are a part of so the position may not be perfect the first guess and you may have to make odd tweaks.

Character Skins or Add-on accessories for character busts in Equip, Skill, etc scenes:

Refer to Caz’s/Objx’s video tutorials:


https://www.youtube.com/embed/VKmbALAPKvc


https://www.youtube.com/embed/31GJjHVuQRo

This can be achieved with using conditionals for displaying different character bust images after like a timeskip (turning on a switch at a game point), depending on a different switch for faction variations for the character bust, or depending on equips/ other uses for switches. You can use switches to display different character skins with the conditionals.

Add-on accessories (like those in the dress-up doll types of games) can be image components that appear based on the conditional.


Using Images as windowskins/Different windowskins for each window:

Spoiler: Stuff below:

I use this fairly often and it's fantastic. You'll need to add a line for custombackground to a window.












You can also set a different windowskin for each window if you want to. Just add a line for windowskin: name under the window you want to change, like I did for the status commands here.

Bust Menu Boxes for each party member in Main Menu scene:

Here’s how I approached the bust menu and the template I used for it as an example. You’ll have to figure out by trial and error the positioning of the image gauges on top of the graphic so they fit over the empty bars, if you’re using image gauges:

Spoiler: Stuff below:

The name, level, exp bar, hp/sp bar and hp/sp values are all configured so they are in the desired position on top of the template graphic.





The lunatic section in Scene Menu Actors (sideview template) is where you’ll customize the Actor busts/boxes in the main menu. You can make the “statusbox” and actor face the same graphic like I did or keep them separate like in the sideview template.

Images for Command Options in scenes:

Lunatic Items and vertical atlas are how you customize your commands/“menu tabs” as images like those in the sideview demo project.





Spoiler: Stuff below

If you want to figure out the vertical atlas stuff with your own custom command images for a scene like the battle scene etc, go into your image editing program and set the canvas size then grid as the individual command image size (this makes it easier to align the images on the spritesheet correctly via snap to grid if your program has it).




Think of this as a vertical “spritesheet” for the icons.

Example case:

If you are making images for 8 commands that are 32x64 each, then you’ll want to multiply 8 with the vertical dimension of the image (8x64= 512), set that as the vertical dimension of the canvas. Then set the horizontal canvas size as the horizontal dimension of the command, 32 in this case. The final dimension of the spritesheet would be 32 x 512.




The commands are horizontal because I put columns: max





And I put the code for the images command icons in the lunatic section for the ItemCategory window, and a lunaticitems section because it is replacing the command with an image.

Actor Command in BattleScene:




For fully vertical, change columns to 1. If you’re using the sideview project base, keep as 4 for a fully horizontal layout of the actor commands.








Working on the Battle Scene Walkthrough:



As a little exercise for those who would like to get used to editing the battle scene, I’ll show an example workflow for how to edit the sideview template to show actor faces/custom images for each actor and custom gauges.



First and easiest things you’ll want to do is change size and positions of the skill, help, battlelog, fight/run, etc. Fairly straightforward.



The Battlestatus (Actor HUDs) window is more complex. First shove move the battlestatus window wherever you want it and change the width/height of the window. Lineheight changes the spacing of each actor hud I believe.





Remove parts you don’t need like TP or the ActorBar etc depending on your game. Go through the yaml with Ctrl F to find and remove both the little section of code for the component and its name from all of the lists it appears in.











After removal:









Alright cool, now we’re left with the parts we want to customize.

Change position, size, image for gauges. Add a bg image for the image gauge if present, or make it a part of the actor face graphic in next step. You can just skip the steps where I change them to image gauges/rotate them and just move their xy positions however you like if you don’t want to bother with image gauges (they are time consuming to get right, I’ll admit).


Spoiler: (Optional: Image Gauges)

Move around the text for hp, mp to wherever desired around the gauges.

Add the component for actor face and any other image component you would like to appear uniquely for each character like their faction icon etc under the lunatic components for BattleStatus. You could also probably play around with switches and conditionals to achieve icons that change depending on conditions.




Example naming for character faces and icons:




Add the names of the custom images/text/etc to the list of components.






Spoiler: (Optional: Image Gauges continued)

Oh I forgot the HP and MP Gauge background from earlier so I will also add that in also under the Battlestatus lunatic section.







Align the Empty Gauges bg with HP gauge by tweaking x and y positions.




Now move the MP Gauge to match with the Empty Gauge bg.








Woohoo, we have our aligned HP and MP Gauges with the background. Time to take damage/use skills and see it in action.

Update the component lists, the lower it is on the list, the higher priority and “in front” like shown here with the empty gauge behind the HP and MP gauges, and the hp/mp values/labels not being covered by the gauges.



Move the Battlerstates to wherever desired on the hud and determine whether it draws vertically, horizontally. Set horizontal: false if you want it to be vertical states icons layout.








And for last finishing touches like adjusting the LineHeight, ActorName, and BattleStatus xy positions to look just right:









You can add the window animations last because they might make it annoying to playtest through.


Just change around, add, or remove animations in the events section.


There we go, a customized Battlestatus sideview template with custom hp and mp gauges, actor faces and even some unique rpg class icons for each actor.



Extra tips:



The Gauges don’t have to be just rectangles or just a heart either, they can be any weird shape, texture or color you want:







Spoiler: Alt Image Gauges settings

If you make the mask and empty gauge graphics the same size and position you can just use the same xy coordinates for them.



It makes it very easy to align the hud stuff later if you keep the image mask and the empty gauges on different layers, then save each layer as a different image, this keeps the same dimensions and positions for each.

Alternatively, with the vanilla non-image HP and MP gauges only:







Spoiler: Non-Image Gauges setting

[/quote]


Here are the hp and mp gauges and actor faces/icons if you want to try it out with the exact files to get a feel for it:

Spoiler: Tutorial Filesss[quote]

本贴来自国际rpgmaker官方论坛作者:desertbriar处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/tips-and-tricks-with-luna-engine-mv.136966/