Added latest log loading

Fixed sprite scaling bug
This commit is contained in:
unsettledgames 2021-04-28 23:39:14 +02:00
parent 7a975976cb
commit 07f36cf7cb
13 changed files with 96 additions and 11 deletions

View File

@ -19,6 +19,8 @@ function copy_images(){
gulp.src('./images/*.png').pipe(gulp.dest(path.join(BUILDDIR, SLUG))); gulp.src('./images/*.png').pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
// Splash images // Splash images
gulp.src('./images/Splash images/*.png').pipe(gulp.dest(path.join(BUILDDIR, SLUG))); gulp.src('./images/Splash images/*.png').pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
// Logs images
gulp.src('./images/Logs/*.gif').pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
} }
function copy_logs() { function copy_logs() {

View File

@ -1610,7 +1610,7 @@ div#pb-options {
} }
#sp-quickstart-container { #sp-quickstart-container {
left:250px; left:200px;
height:65vh; height:65vh;
width:650px; width:650px;
display:inline; display:inline;
@ -1748,11 +1748,16 @@ div#pb-options {
width:350px !important; width:350px !important;
height:90%; height:90%;
overflow-y: scroll; overflow-y: scroll;
overflow-x:hidden;
line-height: 1.5; line-height: 1.5;
position:absolute; position:absolute;
top:40px; top:40px;
right:0px; right:0px;
img {
width:350px;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
background: #232125; background: #232125;
width: 0.5em; width: 0.5em;

BIN
images/Logs/line-tool.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 561 KiB

BIN
images/Logs/trim-canvas.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 KiB

View File

@ -7,6 +7,7 @@ rawFile.onreadystatechange = function ()
if(rawFile.status === 200 || rawFile.status == 0) if(rawFile.status === 200 || rawFile.status == 0)
{ {
var allText = rawFile.responseText; var allText = rawFile.responseText;
document.getElementById("latest-update").innerHTML = allText; document.getElementById("latest-update").innerHTML = allText;
} }
} }

View File

@ -169,7 +169,6 @@ window.addEventListener("mouseup", function (mouseEvent) {
}, false); }, false);
// TODO: Make it snap to the pixel grid
function setPreviewPosition(preview, size){ function setPreviewPosition(preview, size){
let toAdd = 0; let toAdd = 0;

View File

@ -201,6 +201,10 @@ function newPixel (width, height, editorMode, fileContent = null) {
else { else {
switchMode(false); switchMode(false);
} }
// Resetting history
undoStates = [];
redoStates = [];
} }
function newFromTemplate(preset, x, y) { function newFromTemplate(preset, x, y) {

View File

@ -113,8 +113,6 @@ function pbRemoveColours() {
coloursList.removeChild(coloursList.children[startIndex]); coloursList.removeChild(coloursList.children[startIndex]);
} }
clearBorders(); clearBorders();
// TODO: make it so that ramps update correctly (change start and end indexes if necessary)
} }
/** Starts selecting a ramp. Saves the data needed to draw the outline. /** Starts selecting a ramp. Saves the data needed to draw the outline.

View File

@ -20,6 +20,8 @@ function openResizeSpriteWindow() {
// Computing the current ratio // Computing the current ratio
currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1]; currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
console.log("Current ratio: " + currentRatio);
// Initializing the input fields // Initializing the input fields
data.width = layers[0].canvasSize[0]; data.width = layers[0].canvasSize[0];
data.height = layers[1].canvasSize[1]; data.height = layers[1].canvasSize[1];
@ -232,7 +234,7 @@ function changedWidthPercentage(event) {
console.log("old value: " + oldValue + ", ratio: " + ratio); console.log("old value: " + oldValue + ", ratio: " + ratio);
newHeight = startData.height * ratio; newHeight = startData.height * ratio;
newHeightPerc = data.widthPercentage / currentRatio; newHeightPerc = data.widthPercentage;
newWidth = startData.width * ratio; newWidth = startData.width * ratio;
if (keepRatio) { if (keepRatio) {
@ -262,7 +264,7 @@ function changedHeightPercentage(event) {
ratio = data.heightPercentage / oldValue; ratio = data.heightPercentage / oldValue;
newWidth = startData.width * ratio; newWidth = startData.width * ratio;
newWidthPerc = data.heightPercentage * currentRatio; newWidthPerc = data.heightPercentage;
newHeight = startData.height * ratio; newHeight = startData.height * ratio;
if (keepRatio) { if (keepRatio) {

View File

@ -1 +1,76 @@
<h1>Hello update</h1> <h1>Latest update</h1>
Hello there, welcome to the latest version of the Lospec Pixel Editor. As you can see, we changed
quite a lot of things. Let's go through all them, starting from this page.
<h2>Splash page</h2>
The editor now has a splash page! Besides a fancy cover image with beautiful art, on the bottom
right of the page you'll be able to create a new custom pixel. You can also use the quickstart
menu to quickly select a preset or load an existing file. It was designed by <a href="https://twitter.com/skeddles">Skeddles</a> himself!
<img src="/pixel-editor/splash.gif"/>
<strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
by clicking on <strong>Editor -> Splash page</strong>
<h2>Canvas resizing</h2>
We implemented canvas resizing! If you wanted to draw a t-rex but created a 4x4 canvas, we've got you covered!
You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size of the project. Same goes if you
drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
the dimensions.
<img src="/pixel-editor/resize-canvas.gif"/>
<h2>Sprite scaling</h2>
In addition to the <a href="https://www.lospec.com/pixel-art-scaler">Lospec Pixel Art Scaler</a>,
you can now take advantage of the editor's built-in scaling function. Just click on <strong>Edit -> Scale sprite</strong>
to scale up or down your work. With the nearest-neighbour algorithm you'll be able to scale sprites
in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling
down a sprite) antialiasing.
<img src="/pixel-editor/scale-sprite.gif"/>
<h2>Line tool</h2>
Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
life improvement are planned for it, the rectangle and the rectangular selection tools.
<img src="/pixel-editor/line-tool.gif"/>
<h2>Advanced mode: colour picker and palette block</h2>
If you're a proud user of the advanced mode, you'll be able to try out the new colour picker: it
supports 3 colour models, 6 colour harmonies and multiple ways to input data. Next to it,
you'll find the new palette block, which lets you arrange your colours however you want, add and
remove multiple colours at once. Changes made in the palette block will update the palette list
you've always been familiar with.
<img src="/pixel-editor/palette-block.gif"/>
<h2>Other changes:</h2>
<ul>
<li>You can now move colours in the palette menu</li>
<li>Use <strong>View -> Pixel grid</strong> to show the pixel grid</li>
<li>Fixed a bunch of bugs, made the brush preview pixel perfect</li>
<li>Added <strong>Layer -> Duplicate</strong> to duplicate a layer</li>
<li>Quality of life development improvements by <a href="https://github.com/nkoder">Nkoder</a> and <a href="https://github.com/JulianWebb">Pongles</a></a></li>
<li>Canvas trimming to get rid of all the extra space you have in your sprite</li>
</ul>
<h2>That's all folks!</h2>
That's all for this update! Hope you have fun with this new release :) </br>
- <a href="https://github.com/unsettledgames">Unsettled</a>
</br></br>
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch!
<!--
TODO:
- Fix sprite scaling input bug (when a parameter is changed, the other one isn't)
- Only happens when a canvas has not a 1:1 ratio
- Percentage values are wrong, but size values are correct
- Redo problem, the canvas contents aren't copied correctly
- Add hex input to colour picker
-->

View File

@ -90,7 +90,7 @@
<button>Editor</button> <button>Editor</button>
<ul> <ul>
<li><button id="switch-mode-button">Switch to basic mode</button></li> <li><button id="switch-mode-button">Switch to basic mode</button></li>
<li><button onclick="showDialogue('splash', false)">Return to splash page</button></li> <li><button onclick="showDialogue('splash', false)">Splash page</button></li>
<li><button>Settings</button></li> <li><button>Settings</button></li>
</ul> </ul>
</li> </li>
@ -263,7 +263,7 @@
<h1>Latest updates</h1> <h1>Latest updates</h1>
</div> </div>
</div> </div>
<div id="splash-input"> <div id="splash-input">
<div class="splash-menu"> <div class="splash-menu">
@ -621,7 +621,6 @@
</script> </script>
<script src="/pixel-editor/pixel-editor.js"></script> <script src="/pixel-editor/pixel-editor.js"></script>
<script src="/reload/reload.js"></script> <script src="/reload/reload.js"></script>
<script src="/fs/fs.js"></script>
</body> </body>
</html> </html>