Well, first of all, hello, my name is phsc, and today I went deep into the level editor, finding all CSS, and documenting it, all the javascript hex variables, at least most of them, and well, later, I might look for all trigger actions, and a way to uncompress the XML files the .pb2map files use using the Local Memory
First of all, this is mostly about customizing your level editor appearance, and a pretty cool feature which is useless
To proof I found everything other than trigger action colours, here's it
http://prntscr.com/kypnrc
anyway, the full CSS code, found here
Spoiler: Show More
Here's the full code
https://pastebin.com/Mrpzs1R0
and the Javascript variables which are found here, won't be copy pasted as there's a lot of stuff, and i've not looked at them yet
Spoiler: Show More
and now, me explaining how you can change both of them
CSS
ON CHROME ONLY, find out how to do it in other browsers
CONTROL + SHIFT + J opens the chrome DevTools, which are going to be used for most stuff
go into Sources, then open the e_css.css file, which has the full CSS, changes made to it, change in the level editor tab
make your own custom CSS for it, with maybe even more changes than what I'll tell you how to here, and save it on a external file, to just Control+C and Control+V it there
tl;dr, inspect element
JAVASCRIPT
ALSO CHROME ONLY
same way, open the DevTools, there are multiple methods but we will be using Snippets, go to Sources and click in the two arrows near the Page and Filesystem tabs, and select Snippets, http://prntscr.com/kypr8r
Create a new one, and well, there, you can change the value of currently declared variables, as well as do a bunch of new code!
but first, you need to go here http://prntscr.com/kz4ix5
Control + F
search for the HEX, save the variable name, and then use it to edit your PB2
NOW, ON WHAT I FOUND:
There's a bunch of hex colour variables I didn't understand, here's all the ones I tried to categorize, this is really messy, only go in if you know what you're doing, I think
Spoiler: Show More
The ones with ? do, at least I think, nothing
BUT ANYWAY, THE BIG IMPORTANT THING IS
FOR SOME REASON, SOME TIMES, THE PB2 JAVASCRIPT VARIABLES WILL CHANGE NAMES, SO, REMEMBER THE HEX CODES!!!
now into the important stuff
CSS
Most of this is pretty simple, the names themselves say it
Anyway, here's the most common kind of stuff you will be using and looking at, and changing
background-color, color, and other related stuff: hex or rgb codes for color, you can change them
also consider the fact that there's a few parts of the PB2 LE UI that are gifs, so you need to delete them
active and hover are well, when you hover over a button or textbox, and when you activate the button or textbox, by clicking
Into it:
body: generic text
.objbox : object box
.seline : in general, stuff on the right top corner
.topui : top UI in a general way, has a gif as a part of it
.leftui : left UI, where you select walls and other things
.field_dis_right : Map rights area
.right is where the actual text for the map ID is at
.fieldbtn : Save map and other buttons, has hover and active
.toolbtn : Outlines, also have their hover and actives
.btn2 : Selected buttons
.p_u1 : Selected object lines on the lateral menu, the dark side, while
.p_u2 is the other side
.pa1 : Text, and selected object dark side
.pa2 : The other side of pa1, which has hover and active, which is when you select it to change values
.opcode_field : Text inside boxes, the selected one
.gui_sel_info : Selected object count area text
.paramactive: Multiple things, selected item in general, has hover, and uses rgba
Webkit is used for the scrolls
.notediv : <div> for notes if I got it right
.error : Error logs
There's also a few boxes which I didn't really text, I imagine they're these small popups
.field_input : Selected stuff, kinda like when select a wall and see grass
.btn: Selected item on the top of the screen, the bottom too, a few other things
THIS PROBABLY WASN'T THAT WELL EXPLICATED, BUT THE BEST METHOD OF GETTING IT RIGHT INTO THE LEVEL OF EDITING IT IS JUST CHANGING AND SEEING WHAT HAPPENS
JAVASCRIPT
This is a little bit more organized than the CSS
And this was way harder to get right, and I still didn't get it 100%
IF YOU WANT TO HELP ME TO CATEGORIZE THE OTHER VARIABLES I DIDN'T UNDERSTAND WHAT THEY DID AND TRIGGER ACTIONS HEX COLORS PLEASE PM ME OR JUST REPLY TO THIS POST
Into it:
old variables tutorial
Spoiler: Show More
simple example of changing it via snippets:
http://prntscr.com/kyq13v
NEW VARIABLES TUTORIAL
"#FFF" : Wall, mouse area selection and generic object text colours
'#FFFFFF' : Grid
'#5880AB' : Level Editor background
'#000' : Background objects and doors
'#910000' : Background outlines (this was a pain in the ass to find)
'#3592B9' : Water
'#91EAFF' : Water/acid outline
'#BBFB59' : Acid
lICGIcGll : Regions
lIcGIcDil : Region outlines
llCOlODIl : Pushers
liOOlOGil : Pusher outlines
liOGlOOll : Selected text
liCDicGil : Selected value input
lICGiOOll : Selected value input background
AND FOR NOW, THAT'S IT
this probably was very confusing, and I might do a video on it, any questions, reply, PM, you can also find me on the PB2 discord
It's all the work of a few hours of a day so a lot of stuff isn't known yet, or might be wrong, help is always appreciated
AND NOW INTO A COOL THING I FOUD IN THE LEVEL EDITOR
So I found a few features in the HTML, they were only commented
Spoiler: Show More
Once you enable them: NEW BUTTONS!
Spoiler: Show More
PRETTY SIMPLE OVERVIEW:
Map settings does nothing, when the ALE was first released, it and the Options button were enabled
Options, was going to be used so you can set a order on your maps, I don't remember the source of this information
And check map, well, it was going to be used for AI pathfinding, here's how it looks when active
https://gyazo.com/fd0529c8d905f137f47c08838d09d749
and well, according to the legend himself
I'll do another tutorial once I go deep into the .pb2map files which are XML, maybe SWF files, and of course Local Storage so we can edit our maps as actual programming
BUT WHAT IS THIS USEFUL FOR???
you can customize your level editor appearance
Any cool color scheme you made? reply the topic with them! so people can use them!
And that's it
SPECIAL THANKS TO Captain Chickenoos FOR HELPING ME A LOT IN THE PB2 DISCORD, and also making me go this deep into it
EDITED TWO TIMES BECAUSE:
1st - lack of the CSS pastebin
2nd - adding this final part explaining what it is useful for
3rd - PHP section yikes! SoBayed
4th - grammar
5th - credits to Captain Chickenoos
6th - Acid color added
7th - PB2 Javascript variable names changed, changed the method too