Sprite Editor - Revision history

Kckckc: redirect

2018-11-16T01:46:12Z

redirect

Kckckc: testing automated clean up, added uncategorised tag

2018-04-16T00:17:19Z

testing automated clean up, added uncategorised tag

Flamebom at 16:13, 13 March 2018

2018-03-13T16:13:47Z

Flamebom at 22:58, 28 February 2018

2018-02-28T22:58:23Z

Flamebom: Collapsed everything and changed the headers to be consistent

2018-02-28T22:57:54Z

Collapsed everything and changed the headers to be consistent

Flamebom at 06:19, 23 February 2018

2018-02-23T06:19:36Z

Flamebom at 21:37, 22 February 2018

2018-02-22T21:37:55Z

Flamebom at 21:31, 22 February 2018

2018-02-22T21:31:49Z

Flamebom: ...

2018-02-22T21:04:33Z

...

Kckckc: done!

2018-02-21T04:54:13Z

done!

← Older revision		Revision as of 01:46, 16 November 2018
Line 1:		Line 1:
−	~~= Sprite Editor =~~	+	#REDIRECT [[Modding:Sprite Editor]]
−	~~The '''Sprite Editor''', also known as Spriteward, is a tool created by [~~[~~Big Bad Waffle]] (the developer of [[Isleward]]) to assist players, developers, and modders in creating images (also called assets or sprites) that work well in the game.~~
−
−	While the Sprite Editor works well for prototyping images and making quick edits, it can be tedious to test the created images in the [[Isleward]] server, since there is no way to download a created image.
−
−	~~The Sprite Editor can be accessed~~ [~~http~~:~~//spriteward.herokuapp.com/spriteEditor here], but the source code is currently not public.~~
−
−	~~== User Interface ==~~
−	The user interface (or "UI") of the Sprite Editor is simple to start using. It consists of the canvas, the palette, the tool selection area, and the preview area. Additionally, the save and load menus can be used for saving your work, viewing the work of others, and remixing and recoloring your past work and the work of other users.
−	~~=== Canvas ===~~
−
−	{{collapse\| On the left side of the screen, there is a canvas or drawing area. Hovering over the canvas will cover the currently selected pixel with the currently selected color. Clicking with the left mouse button will change a pixel to the selected color. Clicking with the right mouse button will select the color that is being hovered over (commonly called the "eyedropper" or "color picker" tool in other image editing software). The canvas is where a person creates their pixel picture.
−	}}
−	~~=== Color Palette ===~~
−	~~{{collapse\|~~
−
−	The color palette is how you select colors to draw with. It can be found at the top right of the Sprite Editor. Left-clicking on a color in the palette will select that color. The currently selected color will have a white outline/border around it. Scrolling up and down with a mouse wheel (or scrolling up and down on a trackpad, if your trackpad is capable of doing that) will also scroll through color choices. When using the Sprite Editor~~, the colors in the color palette are the only ones you are allowed to use. There is currently no way to change the palette when using the editor.~~
−	}}
−	~~=== Tool Selection ===~~
−	~~{{collapse\|~~
−
−	The tool selection area, located below the color palette, allows the user to select different tools to use when creating their sprite. Currently, three tools are available, as well as an undo button, save and load buttons, and an option to change the canvas size. The user can select a tool by clicking on its button in the tool selection area. More information on the different tools available in the Sprite Editor is detailed in the "Tools" section below on this article.
−
−	Besides the four tools (three canvas tools and the undo button), there are the save and load buttons. When pressing the save or load button, a new menu appears, which is explained in the "Load Menu" and "Save Menu" sections below.
−
−	The user is also able to change the canvas size by clicking the wide blue button above the save and load buttons. When clicked, the canvas switches to the next size in the list. Possible sizes are 8 by 8, 16 by 16, or 24 by 24. Using this button clears the canvas, so it should only be used when the user wants to clear the canvas or start a new image of a different type or size.
−
−	The preview window displays a small preview of what the image looks like for the user. It is a near-replica of the canvas, except smaller. It may be useful for checking how visible the details of an image are when the image is viewed in a smaller size. }}
−	~~=== Load Menu ===~~
−	~~{{collapse\|~~
−
−	~~Upon pressing the purple 'load' button, a menu appears.~~
−
−	The top part of the menu contains a grid of 18 user-created images, 6 wide and 3 high. Hovering over one of these images displays information about the image such as the artist, the name, and the description of the image. Clicking an image loads it into the editor, clearing anything previously there. Once an image is loaded it can be modified, recolored, and inspected by the user.
−
−	The bottom part of the menu contains controls for the loading interface. On the left is a set of non-functional tagging and searching tools, which are disabled and do not work. On the right is 6 buttons. The <code><<</code> and <code>>></code> buttons skip to the first (oldest) and last (most recent) pages of user-created images. The <code><</code> and <code>></code> buttons move to the previous and next pages of images. The cancel button closes the load menu and the refresh button checks for newly saved images.
−	~~{\| class="wikitable" style="text-align:center"~~
−	\|-
−	~~\| [[File:SEloadingUI.png~~]]
−	\|-
−	~~\| A picture of the load menu UI~~
−	\|}
−
−	}}
−	~~=== Save Menu ===~~
−	~~{{collapse\|~~
−
−	In the save menu, users can save their images to be viewed and remixed by other users. Once the save menu is opened, the user is presented with four fields to fill out, but only the 'name' field is required. The user can also enter a description of their image, a name which the image is credited to, and an optional [[Isleward]] username as well. The user is also forced to select at least one tag from the options 'mob', 'object', 'player skin', and 'item'. After that, the users presses the 'save' button and the image is saved to the server for other users to view. The user can also use the cancel button at any point in the process to close the save menu. Once an image is saved, it can't be edited, but a user can submit something like 'Image #2' to indicate that they have revised and edited their image.
−	}}
−	~~=== Tools ===~~
−
−	~~{{collapse\|~~
−	~~There are four tools available in the Sprite Editor - draw, fill, erase, and undo.~~
−
−	The 'draw' tool is selected by default. In other programs, this may be referred to as the "pencil" tool. This tool allows the user to draw a single pixel at a time, using the color selected from the color palette.
−
−	The 'fill' tool can be used for filling large areas with the same color. When selected, and used on a location, it performs a four-directional flood fill on the canvas, meaning that it will cover other pixels that are the same color as the start position. It is four-directional, meaning that pixels connected by the same color only diagonally will not be filled.
−
−	The 'erase' tool is similar to the 'draw' tool, except instead of setting pixels to the selected color in the color palette, it erases them, making them transparent. Pixels appear the same color as the background when they are erased.
−
−	~~The 'undo' tool reverses the previous action. It does not reverse changes in canvas size or previous uses of the undo button.~~
−	}}
−	~~=== Controls ===~~
−
−	~~{{collapse\|~~
−	~~Besides the obvious controls, there are other hotkeys available for faster and more efficient sprite creation.~~
−
−	~~<code>D</code> to select the 'draw' tool~~
−
−	~~<code>F</code> to select the 'fill' tool~~
−
−	~~<code>E</code> to select the 'erase' tool~~
−
−	~~<code>Control</code> + <code>Z</code> for Undo~~
−
−	~~<code>L</code> to open the load menu~~
−
−	~~<code>S</code> to open the save menu~~
−
−	~~<code>Left Mouse Button</code> on a color on the color palette to select it~~
−
−	~~<code>Left Mouse Button</code> on a canvas pixel to color it with the selected palette color, or to use the fill and erase tools~~
−
−	~~<code>Right Mouse Button</code> on a canvas pixel to select that color~~
−
−	~~<code>Mouse Wheel Up</code> or <code>Mouse Wheel Down</code> to scroll through colors in the color palette.~~
−	}}
−	~~=== Tips and Tricks ===~~
−	~~{{collapse\|~~
−
−	~~As there is no clear button the best way to clear the canvas is to change the canvas size. This instantly clears the canvas of all pixels.~~
−	}}
−
−	~~{{Uncategorized\|date=April 2018}}~~

@@ Line 25: / Line 25: @@
 The user is also able to change the canvas size by clicking the wide blue button above the save and load buttons. When clicked, the canvas switches to the next size in the list. Possible sizes are 8 by 8, 16 by 16, or 24 by 24. Using this button clears the canvas, so it should only be used when the user wants to clear the canvas or start a new image of a different type or size.
 The preview window displays a small preview of what the image looks like for the user. It is a near-replica of the canvas, except smaller. It may be useful for checking how visible the details of an image are when the image is viewed in a smaller size. }}
@@ Line 93: / Line 91: @@
 As there is no clear button the best way to clear the canvas is to change the canvas size. This instantly clears the canvas of all pixels.
 }}

@@ Line 90: / Line 90: @@
 === Tips and Tricks ===
 {{collapse|
 As there is no clear button the best way to clear the canvas is to change the canvas size. This instantly clears the canvas of all pixels.
 }}

@@ Line 25: / Line 25: @@
 The user is also able to change the canvas size by clicking the wide blue button above the save and load buttons. When clicked, the canvas switches to the next size in the list. Possible sizes are 8 by 8, 16 by 16, or 24 by 24. Using this button clears the canvas, so it should only be used when the user wants to clear the canvas or start a new image of a different type or size.
 The preview window displays a small preview of what the image looks like for the user. It is a near-replica of the canvas, except smaller. It may be useful for checking how visible the details of an image are when the image is viewed in a smaller size.
 === Load Menu ===
 {{collapse|

@@ Line 5: / Line 5: @@
 The Sprite Editor can be accessed [http://spriteward.herokuapp.com/spriteEditor here], but the source code is currently not public.
-−
 == User Interface ==
 The user interface (or "UI") of the Sprite Editor is simple to start using. It consists of the canvas, the palette, the tool selection area, and the preview area. Additionally, the save and load menus can be used for saving your work, viewing the work of others, and remixing and recoloring your past work and the work of other users.
 === Canvas ===
 === Color Palette ===
 The color palette is how you select colors to draw with. It can be found at the top right of the Sprite Editor. Left-clicking on a color in the palette will select that color. The currently selected color will have a white outline/border around it. Scrolling up and down with a mouse wheel (or scrolling up and down on a trackpad, if your trackpad is capable of doing that) will also scroll through color choices. When using the Sprite Editor, the colors in the color palette are the only ones you are allowed to use. There is currently no way to change the palette when using the editor.
 The tool selection area, located below the color palette, allows the user to select different tools to use when creating their sprite. Currently, three tools are available, as well as an undo button, save and load buttons, and an option to change the canvas size. The user can select a tool by clicking on its button in the tool selection area. More information on the different tools available in the Sprite Editor is detailed in the "Tools" section below on this article.
@@ Line 21: / Line 25: @@
 The user is also able to change the canvas size by clicking the wide blue button above the save and load buttons. When clicked, the canvas switches to the next size in the list. Possible sizes are 8 by 8, 16 by 16, or 24 by 24. Using this button clears the canvas, so it should only be used when the user wants to clear the canvas or start a new image of a different type or size.
 The preview window displays a small preview of what the image looks like for the user. It is a near-replica of the canvas, except smaller. It may be useful for checking how visible the details of an image are when the image is viewed in a smaller size.
 Upon pressing the purple 'load' button, a menu appears.
@@ Line 37: / Line 43: @@
 | A picture of the load menu UI
 |}
 === Save Menu ===
 In the save menu, users can save their images to be viewed and remixed by other users. Once the save menu is opened, the user is presented with four fields to fill out, but only the 'name' field is required. The user can also enter a description of their image, a name which the image is credited to, and an optional [[Isleward]] username as well. The user is also forced to select at least one tag from the options 'mob', 'object', 'player skin', and 'item'. After that, the users presses the 'save' button and the image is saved to the server for other users to view. The user can also use the cancel button at any point in the process to close the save menu. Once an image is saved, it can't be edited, but a user can submit something like 'Image #2' to indicate that they have revised and edited their image.
-== Tools ==
+{{collapse|
 There are four tools available in the Sprite Editor - draw, fill, erase, and undo.
@@ Line 50: / Line 62: @@
 The 'undo' tool reverses the previous action. It does not reverse changes in canvas size or previous uses of the undo button.
-== Controls ==
+{{collapse|
 Besides the obvious controls, there are other hotkeys available for faster and more efficient sprite creation.
@@ Line 73: / Line 87: @@
 <code>Mouse Wheel Up</code> or <code>Mouse Wheel Down</code> to scroll through colors in the color palette.
-== Tips and Tricks ==
+Currently scrolling to the last page in the load menu crashes spriteward.
 As there is no clear button the best way to clear the canvas is to change the canvas size. This instantly clears the canvas of all pixels.

@@ Line 35: / Line 35: @@
 | [[File:SEloadingUI.png]]
 |-
-| A picture of the loading UI
+| A picture of the load menu UI
 |}
 === Save Menu ===

@@ Line 31: / Line 31: @@
 The bottom part of the menu contains controls for the loading interface. On the left is a set of non-functional tagging and searching tools, which are disabled and do not work. On the right is 6 buttons. The <code><<</code> and <code>>></code> buttons skip to the first (oldest) and last (most recent) pages of user-created images. The <code><</code> and <code>></code> buttons move to the previous and next pages of images. The cancel button closes the load menu and the refresh button checks for newly saved images.
+{| class="wikitable" style="text-align:center"
 === Save Menu ===
 In the save menu, users can save their images to be viewed and remixed by other users. Once the save menu is opened, the user is presented with four fields to fill out, but only the 'name' field is required. The user can also enter a description of their image, a name which the image is credited to, and an optional [[Isleward]] username as well. The user is also forced to select at least one tag from the options 'mob', 'object', 'player skin', and 'item'. After that, the users presses the 'save' button and the image is saved to the server for other users to view. The user can also use the cancel button at any point in the process to close the save menu. Once an image is saved, it can't be edited, but a user can submit something like 'Image #2' to indicate that they have revised and edited their image.

@@ Line 4: / Line 4: @@
 While the Sprite Editor works well for prototyping images and making quick edits, it can be tedious to test the created images in the [[Isleward]] server, since there is no way to download a created image.
-The Sprite Editor can be accessed [spriteward.herokuapp.com/spriteEditor (here)], but the source code is currently not public.
+The Sprite Editor can be accessed [http://spriteward.herokuapp.com/spriteEditor here], but the source code is currently not public.
 == User Interface ==
@@ Line 10: / Line 10: @@
 === Canvas ===
-On the left side of the screen, there is a canvas or drawing area. Hovering over the canvas will cover the currently selected pixel with the currently selected color. Clicking with the left mouse button will change a pixel to the selected color. Clicking with the right mouse button will select the color that is being hovered over (commonly called the "eyedropper" or "color picker" tool in other image editing software). The canvas is where a person creates his or her's pixel picture.
+On the left side of the screen, there is a canvas or drawing area. Hovering over the canvas will cover the currently selected pixel with the currently selected color. Clicking with the left mouse button will change a pixel to the selected color. Clicking with the right mouse button will select the color that is being hovered over (commonly called the "eyedropper" or "color picker" tool in other image editing software). The canvas is where a person creates their pixel picture.
 === Color Palette ===
@@ Line 69: / Line 69: @@
 <code>Mouse Wheel Up</code> or <code>Mouse Wheel Down</code> to scroll through colors in the color palette.
-==Clearing==
+== Tips and Tricks ==
-As there is no known clear button the best way to clear is to change the canvas size. This instantly clears the palette of all pixels.
+As there is no clear button the best way to clear the canvas is to change the canvas size. This instantly clears the canvas of all pixels.