Advanced Level Editor: Custom CSS, Javascript and more!

Tutorials and guides for Plazma Burst and community features.

Advanced Level Editor: Custom CSS, Javascript and more!

Postby phsc » 26 September 2018, 00:00

HEY STAFF PIN THIS also consider giving me at least the contributor forum rank after this

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
lIcGlcDl='#5f6887',llODiCGl='#94a4c1',llOOlcDl='#efefef',llCOiCGl='#ac961b',licDicDl='#ffff00' - ?
liCl='#FF0',llOl="#FFF", liOl='#0FF'
llcOlCGl='#ffa500',lICOicDl='#ff214b',lIcOicDl='#e76565',lICOlCOl='#ef51ef' - ?
llOOiOOl='#d988d9',lIcDiOGl='#8080ff',lIcOicOl='#2cb3f1',liCGICDl='#28c28d' - ?
lIcDICDl='#00ff00',llcDICGl='#6cff00',llOOlCDl='#7fff79',llcDIOOl='#474b54' - ?
llcOlCDl='#ffffff',licGlOGl='#aaaaff',lICGiOGl='#aaffaa',licOlcDl='#ffaaaa',liOGiCOl='#ffffaa' - ?
llCOIOGl='#aaaaaa',lICOicGl='#ffaaff',liOOICOl='#777777',llCOICDl='#aaffff',liCOicDl='#555555' - ?
licOicDIl='#00FF00', lICOlcDll='#FF0000',liOOlOOil='#FFFF00', lIOOlcDll='#FFFFFF' - grid, outros?
llcDiCDll='#5880AB'
lIODIODIl='#000',lICDIcOIl='#BBFB59',llcGlOGll='#3592B9',lICGIcGll='#FFD52B', llCOlODIl='#2BFF40',lIOOlOGll='#91EAFF',lIcGIcDil='#FFB03C',liOOlOGil='#3CFF4F',lIcOiODil='#910000',liOOIcGil='#AFA',lIcGiCDIl='#FAA'
liOGlOOll='#fffb91',licOIcGil='black',liCOIcGll='#AAAA00', lIcDlcOil='#333300', llcOiOGIl='#AA0000',lICDlOGll='#330000',llCGicOIl='#00AA00',llOGicGil='#003300', lIODlODil='#333333',lIcOlOOIl='#111111',llODICOll='#AAFFAA',lIcGICGll='#AAFF00',lICGICGIl='#FF00FF'
lICGiOOll='#506d95'
liCDicGil='#4a7372',llOGiCOll='#608b6f'
lIODIcDIl='#697651',lIOGiCOIl='#93a451',liCOlCGil='#624359',liCDIODil='#957085'

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
llOl : Wall, mouse area selection and generic object text colours

lIOOlcDll : Grid

llcDiCDll : Level Editor background

lIODIODIl : Background objects and doors
lIcOiODil : Background outlines (this was a pain in the ass to find)

llcGlOGll : Water
lIOOlOGll : Water/acid outline
lICDIcOIl : Acid

lICGIcGll : Regions
lIcGIcDil : Region outlines

llCOlODIl : Pushers
liOOlOGil : Pusher outlines

liOGlOOll : Selected text

liCDicGil : Selected value input
lICGiOOll : Selected value input background

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
If I decide to be an idiot, then Ill be an idiot on my own accord - Johann Sebastian Bach
User avatar
phsc
Civil Security Heavy [300]
 
Posts: 349
Joined: 27 July 2013, 13:58
Location: the next fascist government!

Re: Advanced Level Editor: Custom CSS, Javascript and more!

Postby phsc » 26 September 2018, 23:26

QUICK JAVASCRIPT EXAMPLE:

http://prntscr.com/kz5gdk

llOOlOGll='#252525' //LEVEL EDITOR BACKGROUND

lIcOiCOil='#959595' //GRID

lICl='#000' //WALLS, TEXT, SELECTION BOX

lIOGiOGll='#F00' //DOORS, BACKGROUND
lICGlCDil='#F00' //BACKGROUND OUTLINE

llCGiOGll='#858585' //WATER
llcDicOll='#252525' //WATER OUTLINE
liOOiOGil='#473d29' //ACID

liCGicGll='#ff872b' //REGION
lICDlODil='#8e4b18' //REGION OUTLINE

liOOIcOil='#af940c' //PUSHER
lIODlcGll='#5b4d06' //PUSHER OUTLINE

lIOOIOGil='#ff7f7f' //SELECTED TEXT

llODicOIl='#ff1c1c' //SELECTED VALUE INPUT

licOicOil='#423c3c' //SELECTED VALUE INPUT BACKGROUND

KEEP IN MIND THE VARIABLE NAMES WILL CHANGE, SO USE THE ORIGINAL VALUES

QUICK CSS EXAMPLE:

WORK IN PROGRESS

also i might try to make a chrome extension to make all this automatic
If I decide to be an idiot, then Ill be an idiot on my own accord - Johann Sebastian Bach
User avatar
phsc
Civil Security Heavy [300]
 
Posts: 349
Joined: 27 July 2013, 13:58
Location: the next fascist government!

Re: Advanced Level Editor: Custom CSS, Javascript and more!

Postby MLG COOL DOMINIK » 27 September 2018, 17:04

phsc wrote:QUICK JAVASCRIPT EXAMPLE:

http://prntscr.com/kz5gdk

llOOlOGll='#252525' //LEVEL EDITOR BACKGROUND

lIcOiCOil='#959595' //GRID

lICl='#000' //WALLS, TEXT, SELECTION BOX

lIOGiOGll='#F00' //DOORS, BACKGROUND
lICGlCDil='#F00' //BACKGROUND OUTLINE

llCGiOGll='#858585' //WATER
llcDicOll='#252525' //WATER OUTLINE
liOOiOGil='#473d29' //ACID

liCGicGll='#ff872b' //REGION
lICDlODil='#8e4b18' //REGION OUTLINE

liOOIcOil='#af940c' //PUSHER
lIODlcGll='#5b4d06' //PUSHER OUTLINE

lIOOIOGil='#ff7f7f' //SELECTED TEXT

llODicOIl='#ff1c1c' //SELECTED VALUE INPUT

licOicOil='#423c3c' //SELECTED VALUE INPUT BACKGROUND

KEEP IN MIND THE VARIABLE NAMES WILL CHANGE, SO USE THE ORIGINAL VALUES

QUICK CSS EXAMPLE:

WORK IN PROGRESS

also i might try to make a chrome extension to make all this automatic

whats wrong with your level editor phsc
Was formerly a T-ROBOT, im an Elite Grub now
User avatar
MLG COOL DOMINIK
Advanced Usurpation Soldier [150]
 
Posts: 182
Joined: 25 June 2016, 21:39

Re: Advanced Level Editor: Custom CSS, Javascript and more!

Postby phsc » 27 September 2018, 19:26

MLG COOL DOMINIK wrote:
phsc wrote:QUICK JAVASCRIPT EXAMPLE:

http://prntscr.com/kz5gdk

llOOlOGll='#252525' //LEVEL EDITOR BACKGROUND

lIcOiCOil='#959595' //GRID

lICl='#000' //WALLS, TEXT, SELECTION BOX

lIOGiOGll='#F00' //DOORS, BACKGROUND
lICGlCDil='#F00' //BACKGROUND OUTLINE

llCGiOGll='#858585' //WATER
llcDicOll='#252525' //WATER OUTLINE
liOOiOGil='#473d29' //ACID

liCGicGll='#ff872b' //REGION
lICDlODil='#8e4b18' //REGION OUTLINE

liOOIcOil='#af940c' //PUSHER
lIODlcGll='#5b4d06' //PUSHER OUTLINE

lIOOIOGil='#ff7f7f' //SELECTED TEXT

llODicOIl='#ff1c1c' //SELECTED VALUE INPUT

licOicOil='#423c3c' //SELECTED VALUE INPUT BACKGROUND

KEEP IN MIND THE VARIABLE NAMES WILL CHANGE, SO USE THE ORIGINAL VALUES

QUICK CSS EXAMPLE:

WORK IN PROGRESS

also i might try to make a chrome extension to make all this automatic

whats wrong with your level editor phsc

could you read starting section of the tutorial please
its a mod
If I decide to be an idiot, then Ill be an idiot on my own accord - Johann Sebastian Bach
User avatar
phsc
Civil Security Heavy [300]
 
Posts: 349
Joined: 27 July 2013, 13:58
Location: the next fascist government!

Re: Advanced Level Editor: Custom CSS, Javascript and more!

Postby MLG COOL DOMINIK » 27 September 2018, 20:23

CONTROL + SHIFT + J gives me inspect element console tho
Was formerly a T-ROBOT, im an Elite Grub now
User avatar
MLG COOL DOMINIK
Advanced Usurpation Soldier [150]
 
Posts: 182
Joined: 25 June 2016, 21:39

Re: Advanced Level Editor: Custom CSS, Javascript and more!

Postby phsc » 27 September 2018, 20:53

MLG COOL DOMINIK wrote:CONTROL + SHIFT + J gives me inspect element console tho

youre supposed to use it to change javascript variables and CSS so you can customize your level editors appearance
If I decide to be an idiot, then Ill be an idiot on my own accord - Johann Sebastian Bach
User avatar
phsc
Civil Security Heavy [300]
 
Posts: 349
Joined: 27 July 2013, 13:58
Location: the next fascist government!


Return to Tutorials

Who is online

Users browsing this forum: No registered users