mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Continued splash page, added presets, resized cover

This commit is contained in:
unsettledgames 2021-01-11 18:09:58 +01:00
parent 9b3df20533
commit e3df4618f0
5 changed files with 219 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
css/pixel-editor.scss
View File

@ -1543,27 +1543,137 @@ div#pb-options {
} }
/********FEATURES LOG*************/ /********FEATURES LOG*************/
#features-log { #splash {
font-size:16px; width:100% !important;
width:700px !important; height:100% !important;
height:500px;
overflow-y: scroll;
line-height: 1.5;
&::-webkit-scrollbar { background-color: #232125 !important;
background: #232125; opacity: 1 !important;
width: 0.5em;
#splash-input {
width:70%;
height:100% !important;
#splash-menu {
position:relative;
height:100%;
left:0;
top:0;
}
#editor-logo {
font-weight:bold;
text-transform:uppercase;
font-size:20px;
color:$baselink;
height:40vh;
width:100%;
position:relative;
background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
background-size:cover;
background-position:center;
}
#black {
width:100%;
height:100%;
position:relative;
background-color:rgba(0,0,0,0.25);
}
#sp-coverdata {
padding:20px;
p, a {
font-size:15px;
position:absolute;
text-transform:none;
right:20px;
}
p {
top:0px;
}
a {
bottom:20px;
}
}
} }
&::-webkit-scrollbar-track {
margin-top: -0.125em; #sp-quickstart {
width: 0.5em; color:$baselink;
width: 80%;
margin-left:10%;
padding:20px;
left:0px;
} }
&::-webkit-scrollbar-thumb {
background: #332f35; .sp-template {
border-radius: 0.25em; display:table;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding vertical-align: middle;
text-transform: uppercase;
position:relative;
width:100px;
height:100px;
border-radius:5%;
margin-right:40px;
margin-top:30px;
background-color:$basecolor;
float:left;
font-size: 18px;
text-align:center;
font-weight: bold;
p {
span {
display:block;
font-size:16px !important;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
display:table-cell;
width:100%;
height:100%;
vertical-align: middle;
}
} }
&::-webkit-scrollbar-corner {
background: #232125; #splash-news {
position:relative;
right:20px;
height:95%;
top:2.5%;
background-color: #232125 !important;
}
#latest-update {
font-size:15px;
width:350px !important;
height:90%;
overflow-y: scroll;
line-height: 1.5;
position:absolute;
top:40px;
right:40px;
&::-webkit-scrollbar {
background: #232125;
width: 0.5em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 0.5em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
} }
} }

BIN
images/sked.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

3
js/_dialogue.js
View File

@ -45,9 +45,6 @@ function closeDialogue () {
if (currentOpenDialogue == "palette-block") { if (currentOpenDialogue == "palette-block") {
pbAddToSimplePalette(); pbAddToSimplePalette();
} }
else if (currentOpenDialogue == "features-log") {
showDialogue("new-pixel");
}
} }
/** Closes a dialogue window if the user clicks everywhere but in the current window /** Closes a dialogue window if the user clicks everywhere but in the current window

5
js/_featuresLog.js
View File

@ -1,4 +1 @@
if (settings.showLog || settings.showLog == undefined) { showDialogue("splash", false);
console.log("Ok");
showDialogue("features-log", false);
}

144
views/pixel-editor.hbs
View File

@ -255,67 +255,103 @@
</div> </div>
</div> </div>
<!-- NEW FEATURES LOG --> <!-- Splash page -->
<div id="features-log" class="update"> <div id = "splash">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <div class="splash-news">
<h1>Lospec Pixel Editor: latest updates</h1> <div id="latest-update">
<strong>Hey! Unsettled here.</strong><br><br> <h1>Latest updates</h1>
Welcome to the features-log.html! From now on, it will show all the <strong>Hey! Unsettled here.</strong><br><br>
latest features that have been added to the editor, so that everyone knows what's going on. Welcome to the features-log.html! From now on, it will show all the
latest features that have been added to the editor, so that everyone knows what's going on.
<h2>Canvas and sprite resizing</h2> <h2>Canvas and sprite resizing</h2>
Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of
a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher
canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size. canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size.
I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include
the sprite you're drawing. the sprite you're drawing.
<br><br> <br><br>
Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small! Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small!
We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite
menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously
scaled. Just scale it down and have a look at how your favourite artist draws those great clouds. scaled. Just scale it down and have a look at how your favourite artist draws those great clouds.
<h2>Layers and palette sorting</h2> <h2>Layers and palette sorting</h2>
Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice. Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice.
<br><br> <br><br>
You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position. You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position.
<h2>Advanced mode: advanced palette editor</h2> <h2>Advanced mode: advanced palette editor</h2>
If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill), If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
colour button if you want to try out the new palette editor. In it, you'll find: colour button if you want to try out the new palette editor. In it, you'll find:
<h2>Advanced mode: advanced colour picker</h2> <h2>Advanced mode: advanced colour picker</h2>
It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and
it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a
pro! pro!
<h2>Advanced mode: advanced palette block</h2> <h2>Advanced mode: advanced palette block</h2>
Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to
select a bunch of colours that you want to delete. The changes that you make will be propagated to the old select a bunch of colours that you want to delete. The changes that you make will be propagated to the old
palette. palette.
<h2>But wait, there's more!</h2> <h2>But wait, there's more!</h2>
We also added a few quality of life improvements! We also added a few quality of life improvements!
<ul> <ul>
<li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li> <li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li>
<li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour <li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour
in the settings, maybe you really like Endesga pink grids. in the settings, maybe you really like Endesga pink grids.
</li> </li>
<li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li> <li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li>
<li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide <li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide
the other ones, so you can easily see what's in the current layer. the other ones, so you can easily see what's in the current layer.
</li> </li>
</ul> </ul>
<h2>That's all folks!</h2> <h2>That's all folks!</h2>
Don't forget to follow Lospec on all the social media pages. If you like the site, Don't forget to follow Lospec on all the social media pages. If you like the site,
please consider becoming a Patron or giving a tip. It helps a lot :) please consider becoming a Patron or giving a tip. It helps a lot :)
<br><br> <br><br>
Hope you all have fun creating pixel art, see you next update! Hope you all have fun creating pixel art, see you next update!
<br><br> <br><br>
P.S.: you can find this page in Help->Latest update P.S.: you can find this page in Help->Latest update
</div>
</div>
<div id="splash-input">
<div class="splash-menu">
<div id="editor-logo">
<div id="black">
<div id="sp-coverdata">
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
<p>Version 1.4.0</p>
<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
</div>
</div>
</div>
<div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> custom</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div>
<div class="sp-template"><p><span>New</span> 512x512</p></div>
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
<div class="sp-template"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div>
</div>
<div id="sp-mode-palette">
<span>Interface mode:</span>
<span>Palette: </span>
</div>
</div>
</div>
</div> </div>
<!--SPRITE RESIZE--> <!--SPRITE RESIZE-->
<div class="update" id = "resize-sprite"> <div class="update" id = "resize-sprite">