mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Added latest log loading
Fixed sprite scaling bug
This commit is contained in:
parent
7a975976cb
commit
07f36cf7cb
2
build.js
2
build.js
@ -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() {
|
||||||
|
@ -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
BIN
images/Logs/line-tool.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 325 KiB |
BIN
images/Logs/palette-block.gif
Normal file
BIN
images/Logs/palette-block.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 MiB |
BIN
images/Logs/resize-canvas.gif
Normal file
BIN
images/Logs/resize-canvas.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 561 KiB |
BIN
images/Logs/trim-canvas.gif
Normal file
BIN
images/Logs/trim-canvas.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 442 KiB |
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
@ -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.
|
||||||
|
@ -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) {
|
||||||
|
@ -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
|
||||||
|
-->
|
@ -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>
|
Loading…
Reference in New Issue
Block a user