mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Merge branch 'next-update' into new-feature
This commit is contained in:
Nicola
7
views/components/checkbox.hbs
Normal file
7
views/components/checkbox.hbs
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="checkbox-holder">
|
||||
<div class="checkbox checked">
|
||||
<label>Snap to grid</label>
|
||||
<input type="hidden"/>
|
||||
<div class="box">{{svg "check"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>{{title}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/pixel-editor/pixel-editor.css" />
|
||||
<link rel="stylesheet" href="/pixel-editor.css" />
|
||||
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
|
||||
{{{google-analytics}}}
|
||||
{{{favicons}}}
|
||||
@@ -40,7 +40,7 @@
|
||||
{{> save-project}}
|
||||
</div>
|
||||
|
||||
<script src="/pixel-editor/pixel-editor.js"></script>
|
||||
<script src="/reload/reload.js"></script>
|
||||
<script src="/pixel-editor.js"></script>
|
||||
{{#reload}}<script src="/reload/reload.js"></script>{{/reload}}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +1,52 @@
|
||||
Hi! Welcome to the latest version of the Pixel Editor. It's been quite a while! Most of the changes happened behind
|
||||
the scenes: we worked very hard to refactor the code, make it a bit more modern and scalable so that contributions will,
|
||||
hopefully, be easier to make.</br></br>
|
||||
We have some good news for users as well!
|
||||
Heyo! New pixel editor update, with some very requested changes. After the code refactoring, adding features
|
||||
is way easier: I introduced some more selection tools, the ellipse tool and an info bar in the top menu :)
|
||||
|
||||
<h2>Pixel Grid</h2>
|
||||
<h2>Lasso tool</h2>
|
||||
Finally! With the lasso tool you're not forced to select rectangular areas anymore. Have fun selecting, cutting,
|
||||
copying and pasting any kind of selection with pixel-perfect precision.
|
||||
|
||||
I've worked a bit on the pixel grid to make it look a bit better and less intrusive when zooming in. You can see the
|
||||
difference in behaviour between the new grid (left) and the old grid (right) in the image below.
|
||||
<img src="/pixel-editor/grid.png"/>
|
||||
In addition, the pixel grid will now automatically be hidden when the zoom level becomes too low: in that way looking at big
|
||||
sprites becomes a lot less performance-heavy and it doesn't cause lag.
|
||||
</br><img src="lassoselect-tutorial.gif"/>
|
||||
|
||||
<h2>Quality of life</h2>
|
||||
<h2>Magic wand</h2>
|
||||
In addition to the lasso tool, we added a new selection tool: the magic wand. You can use it to select
|
||||
contiguous areas of the same colour! If you need to exactly select the pixels of a certain colour, you're
|
||||
probably going to find the magic wand useful.
|
||||
|
||||
I've added some quality of life improvements, sometimes subtle (maybe you won't notice but you'd have definitely noticed
|
||||
the absence of them), sometimes a bit more noticeable. For example:
|
||||
</br><img src="magicwand-tutorial.gif"/>
|
||||
|
||||
<h2>Ellipse tool</h2>
|
||||
I added a cute friend for the rectangle tool: with the ellipse tool you'll be able to draw circles and
|
||||
ellipses of all sizes. The tool works similarly to the rectangle tool: select it to draw empty ellipses,
|
||||
click on the ellipse button again to draw filled ellipses.
|
||||
|
||||
</br><img src="ellipse-tutorial.gif"/>
|
||||
|
||||
<h2>Tool tutorials</h2>
|
||||
I know what you're thinking, "wow those gifs are so cute, that guy must have put a lot of love in them".
|
||||
Well, I'm glad you like them, and I have good news for you: there are more! Move the cursor on a tool
|
||||
button: after a little a small tutorial explaining how to use the tool will appear. Hope it's useful for
|
||||
everyone who's new to the editor!
|
||||
|
||||
</br><img src="tool-tutorials.gif"/>
|
||||
|
||||
<h2>Top bar info</h2>
|
||||
Depending on the tool you're using, you'll notice that the top right part of the editor will slightly change.
|
||||
When using a resizable tool (eraser, brush, rectangle, ellipse, line), it's now possible to select a precise
|
||||
size by typing it in the input field that appears when you select it. More features that make use of the
|
||||
top bar are planned.
|
||||
|
||||
<h2>Bug fixes and minor details</h2>
|
||||
<ul>
|
||||
<li>It's now possible to delete a layer by selecting it and hitting "DEL"</li>
|
||||
<li>When adding a colour to the palette, it is automatically selected</li>
|
||||
<li>Thanks to <a href="https://github.com/NSSure">NSSure</a>, you can now select a name for your exported / saved project</li>
|
||||
<li>The brush preview should now be less intrusive while still being visible</li>
|
||||
</ul>
|
||||
|
||||
<h2> Important bug fixes</h2>
|
||||
A lot of nasty bugs have been fixed! Please, if you know more we aren't aware of, <a href="https://github.com/lospec/pixel-editor">
|
||||
feel free to open an issue or make a pull request.</a>
|
||||
<ul>
|
||||
<li>Fixed the bug that caused file corruptions</li>
|
||||
<li>Fixed fill tool not working and creating hundreds of similar colours in certain browsers</li>
|
||||
<li>Fixed the build procedure for Windows</li>
|
||||
<li>Fixed the editor ignoring the scale factor when exporting</li>
|
||||
<li>Squares in the splash page are now...well...actual squares</li>
|
||||
<li>Using the mouse when a dialogue popup is open will no longer edit the canvas</li>
|
||||
<li>For coders: the selection system has been uniformed</li>
|
||||
<li>Tool buttons have been shrinked to make room for more</li>
|
||||
</ul>
|
||||
|
||||
<h2>End of log</h2>
|
||||
That's all for this update! We have some cool things planned for the near future, so stay tuned :)</br>
|
||||
You've reached the end of this log, congrats. Special thanks to Jaman on Discord, who's helping us and
|
||||
who found a quite nasty bug in the selectiont tools. Hope to see you soon in a new log!</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!
|
||||
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch
|
||||
or have a look at the <a href="https://github.com/lospec/pixel-edior">editor repository</a>!
|
||||
@@ -7,7 +7,7 @@ The editor now has a splash page! Besides a fancy cover image with beautiful art
|
||||
left 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"/>
|
||||
<img src="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>
|
||||
@@ -19,7 +19,7 @@ You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size
|
||||
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"/>
|
||||
<img src="resize-canvas.gif"/>
|
||||
|
||||
<h2>Sprite scaling</h2>
|
||||
|
||||
@@ -29,14 +29,14 @@ to scale up or down your work. With the nearest-neighbour algorithm you'll be ab
|
||||
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"/>
|
||||
<img src="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"/>
|
||||
<img src="line-tool.gif"/>
|
||||
|
||||
<h2>Advanced mode: colour picker and palette block</h2>
|
||||
|
||||
@@ -46,7 +46,7 @@ you'll find the new palette block, which lets you arrange your colours however y
|
||||
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"/>
|
||||
<img src="palette-block.gif"/>
|
||||
|
||||
<h2>Other changes:</h2>
|
||||
<ul>
|
||||
39
views/logs/00002refactor.hbs
Normal file
39
views/logs/00002refactor.hbs
Normal file
@@ -0,0 +1,39 @@
|
||||
Hi! Welcome to the latest version of the Pixel Editor. It's been quite a while! Most of the changes happened behind
|
||||
the scenes: we worked very hard to refactor the code, make it a bit more modern and scalable so that contributions will,
|
||||
hopefully, be easier to make.</br></br>
|
||||
We have some good news for users as well!
|
||||
|
||||
<h2>Pixel Grid</h2>
|
||||
|
||||
I've worked a bit on the pixel grid to make it look a bit better and less intrusive when zooming in. You can see the
|
||||
difference in behaviour between the new grid (left) and the old grid (right) in the image below.
|
||||
<img src="grid.png"/>
|
||||
In addition, the pixel grid will now automatically be hidden when the zoom level becomes too low: in that way looking at big
|
||||
sprites becomes a lot less performance-heavy and it doesn't cause lag.
|
||||
|
||||
<h2>Quality of life</h2>
|
||||
|
||||
I've added some quality of life improvements, sometimes subtle (maybe you won't notice but you'd have definitely noticed
|
||||
the absence of them), sometimes a bit more noticeable. For example:
|
||||
<ul>
|
||||
<li>It's now possible to delete a layer by selecting it and hitting "DEL"</li>
|
||||
<li>When adding a colour to the palette, it is automatically selected</li>
|
||||
<li>Thanks to <a href="https://github.com/NSSure">NSSure</a>, you can now select a name for your exported / saved project</li>
|
||||
<li>The brush preview should now be less intrusive while still being visible</li>
|
||||
</ul>
|
||||
|
||||
<h2> Important bug fixes</h2>
|
||||
A lot of nasty bugs have been fixed! Please, if you know more we aren't aware of, <a href="https://github.com/lospec/pixel-editor">
|
||||
feel free to open an issue or make a pull request.</a>
|
||||
<ul>
|
||||
<li>Fixed the bug that caused file corruptions</li>
|
||||
<li>Fixed fill tool not working and creating hundreds of similar colours in certain browsers</li>
|
||||
<li>Fixed the build procedure for Windows</li>
|
||||
<li>Fixed the editor ignoring the scale factor when exporting</li>
|
||||
</ul>
|
||||
|
||||
<h2>End of log</h2>
|
||||
That's all for this update! We have some cool things planned for the near future, so stay tuned :)</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!
|
||||
@@ -67,4 +67,11 @@
|
||||
<li><button>Changelog</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li id="editor-info">
|
||||
<ul>
|
||||
<li><label>Tool size: <input type="number"/></label></li>
|
||||
<li>{{> checkbox}}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -12,7 +12,7 @@
|
||||
<div id="editor-logo">
|
||||
<div id="black">
|
||||
<div id="sp-coverdata">
|
||||
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
|
||||
<img src="https://cdn.lospec.com/static/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>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<div class="preload">
|
||||
<img src="/pixel-editor/dropdown-arrow.png" />
|
||||
<img src="/pixel-editor/dropdown-arrow-hover.png" />
|
||||
<img src="/pixel-editor/eyedropper.png" />
|
||||
<img src="/pixel-editor/fill.png" />
|
||||
<img src="/pixel-editor/pan.png" />
|
||||
<img src="/pixel-editor/pan-held.png" />
|
||||
<img src="/pixel-editor/pencil.png" />
|
||||
<img src="/pixel-editor/zoom-in.png" />
|
||||
<img src = "/pixel-editor/eraser.png"/>
|
||||
<img src = "/pixel-editor/rectselect.png"/>
|
||||
<img src="dropdown-arrow.png" />
|
||||
<img src="dropdown-arrow-hover.png" />
|
||||
<img src="eyedropper.png" />
|
||||
<img src="fill.png" />
|
||||
<img src="pan.png" />
|
||||
<img src="pan-held.png" />
|
||||
<img src="pencil.png" />
|
||||
<img src="zoom-in.png" />
|
||||
<img src = "eraser.png"/>
|
||||
<img src = "rectselect.png"/>
|
||||
<!-- TODO: [ELLIPSE] Where is this icon used? Do we need similar one for ellipsis? -->
|
||||
<img src= "/pixel-editor/rectangle.png">
|
||||
<img src= "rectangle.png">
|
||||
</div>
|
||||
@@ -1,46 +1,68 @@
|
||||
<ul id="tools-menu">
|
||||
<li class="selected expanded">
|
||||
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<button id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class = "expanded">
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<button id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="32" height="32" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<button id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
|
||||
<li class="expanded" id="tools-menu--ellipse" style="display: none">
|
||||
<!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
|
||||
<!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
|
||||
<button title="Ellipse Tool (S)" id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}}
|
||||
<li class="expanded">
|
||||
<button id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
|
||||
</button>
|
||||
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<button id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
|
||||
<li><button id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
|
||||
|
||||
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
|
||||
<li><button id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
||||
|
||||
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
|
||||
<li><button id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
||||
|
||||
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
|
||||
</ul>
|
||||
<li><button id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
|
||||
|
||||
<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
||||
|
||||
<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
|
||||
</ul>
|
||||
|
||||
<div id="tool-tutorial" class="fade-in">
|
||||
<h3>Brush tool</h3>
|
||||
<ul>
|
||||
<li><span class="keyboard-key">B</span> to select the tool</li>
|
||||
<li><span class="keyboard-key">Left drag</span> to use the tool</li>
|
||||
<li><span class="keyboard-key">Right drag</span> to change tool size</li>
|
||||
<li><span class="keyboard-key">+</span> or <span class="keyboard-key">-</span> to change tool size</li>
|
||||
</ul>
|
||||
<img src="brush-tutorial.gif"/>
|
||||
</div>"
|
||||
Reference in New Issue
Block a user