diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 056bd3b..ee7efb0 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1543,27 +1543,137 @@ div#pb-options { } /********FEATURES LOG*************/ -#features-log { - font-size:16px; - width:700px !important; - height:500px; - overflow-y: scroll; - line-height: 1.5; +#splash { + width:100% !important; + height:100% !important; - &::-webkit-scrollbar { - background: #232125; - width: 0.5em; + background-color: #232125 !important; + opacity: 1 !important; + + #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; - width: 0.5em; + + #sp-quickstart { + color:$baselink; + width: 80%; + margin-left:10%; + padding:20px; + left:0px; } - &::-webkit-scrollbar-thumb { - background: #332f35; - border-radius: 0.25em; - border: solid 0.125em #232125; //same color as scrollbar back to fake padding + + .sp-template { + display:table; + 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; + } } } \ No newline at end of file diff --git a/images/sked.png b/images/sked.png new file mode 100644 index 0000000..2e9cb88 Binary files /dev/null and b/images/sked.png differ diff --git a/js/_dialogue.js b/js/_dialogue.js index 4e49944..8157040 100644 --- a/js/_dialogue.js +++ b/js/_dialogue.js @@ -45,9 +45,6 @@ function closeDialogue () { if (currentOpenDialogue == "palette-block") { pbAddToSimplePalette(); } - else if (currentOpenDialogue == "features-log") { - showDialogue("new-pixel"); - } } /** Closes a dialogue window if the user clicks everywhere but in the current window diff --git a/js/_featuresLog.js b/js/_featuresLog.js index 4fb92e6..5fd6b89 100644 --- a/js/_featuresLog.js +++ b/js/_featuresLog.js @@ -1,4 +1 @@ -if (settings.showLog || settings.showLog == undefined) { - console.log("Ok"); - showDialogue("features-log", false); -} \ No newline at end of file +showDialogue("splash", false); \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 5f4a989..fabf5cf 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -255,67 +255,103 @@ - -
- -

Lospec Pixel Editor: latest updates

- Hey! Unsettled here.

- 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. + +
+
+
+

Latest updates

+ Hey! Unsettled here.

+ 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. -

Canvas and sprite resizing

- 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 - 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 - the sprite you're drawing. -

- 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 - 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. +

Canvas and sprite resizing

+ 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 + 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 + the sprite you're drawing. +

+ 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 + 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. -

Layers and palette sorting

- Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice. -

- You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position. +

Layers and palette sorting

+ Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice. +

+ You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position. -

Advanced mode: advanced palette editor

- 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 - colour button if you want to try out the new palette editor. In it, you'll find: +

Advanced mode: advanced palette editor

+ 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 + colour button if you want to try out the new palette editor. In it, you'll find: -

Advanced mode: advanced colour picker

- 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 - pro! - -

Advanced mode: advanced palette block

- 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 - palette. +

Advanced mode: advanced colour picker

+ 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 + pro! + +

Advanced mode: advanced palette block

+ 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 + palette. -

But wait, there's more!

- We also added a few quality of life improvements! -
    -
  • The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")
    • -
  • 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. -
    • -
  • Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)
    • -
  • 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. -
    • -
+

But wait, there's more!

+ We also added a few quality of life improvements! +
    +
  • The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")
    • +
  • 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. +
    • +
  • Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)
    • +
  • 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. +
    • +
-

That's all folks!

- 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 :) -

- Hope you all have fun creating pixel art, see you next update! -

- P.S.: you can find this page in Help->Latest update +

That's all folks!

+ 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 :) +

+ Hope you all have fun creating pixel art, see you next update! +

+ P.S.: you can find this page in Help->Latest update +
+
+ +
+
+ + +
+

Load

+

New custom

+

New 32x32

+

New 64x64

+

New 128x128

+

New 256x256

+

New 512x512

+

New Gameboy

+

New C64

+

New Pico8

+
+ +
+ Interface mode: + Palette: +
+
+
+