Piskel is an open-source, easy-to-use sprite editor for creating game sprites, animations and pixel-art. Free web-based and offline versions are also available at piskelapp.com.

• Installation
  • Prerequisites
  • Development Environment Setup
    • Install Node.js
    • Update npm
    • Install Grunt-CLI
    • Repository Setup and Grunt Installation
• Testing
  • Unit Tests
  • Drawing Tests
  • Integration Tests
• Build
• Related Projects
  • Website Version of Piskel
  • Desktop Version of Piskel
• Contributing
• Support
• License

To build piskel, you need:

1. Node.js - A Javascript runtime environment.
2. Grunt-CLI - The Grunt command line interface.
3. Grunt - A JavaScript task runner.

Node.js is an open-source, cross-platform JavaScript runtime environment built on Chrome's V8 JavaScript engine. The single-threaded, non-blocking event loop and low-level I/O API make Node.js lightweight and efficient. Node.js is bundled with npm, the package manager for JavaScript and the world's largest software registry.

• Download the Node.js installer or binary file.
• Visit the Node.js community wiki Installation page for indepth guides on installing/building Node.js in Windows, Mac OS X, Linux, etc.

• Note: Node.js does not automatically update npm. Use command lines to manually update npm after installation.
  • Check which version of npm is installed with the npm -v command.
  • If the installed version of npm is not the latest version, perform a manual update by running npm update -g npm or npm update. Mac OS X requires the sudo prefix.
• Grunt and Grunt-CLI are installed via npm. Update npm before beginning the installation process for Grunt and Grunt-CLI.
• More indepth information on npm can be found here.

Grunt-CLI is the Grunt command line interface. Installing Grunt-CLI globally enables the grunt command to be used anywhere on the user's system irregardless of the Grunt version installed locally to the project.

• Run npm install -g grunt-cli to install Grunt-CLI globally.
  • Windows: Run as Administrator
  • Mac OS X: May require the sudo prefix
• Instructions on configuring Grunt-CLI can be found on Grunt's Installing the CLI page.

• Clone the repository from piskel's github page.
• Enter the directory from the command prompt using cd piskel and locally install the project dependencies by running npm install.
• Check npm install worked correctly by confirming a node_modules directory exists. The new directory should contain the grunt package.
  • Run dir node_modules to view a list of packages included in the directory.
  • If grunt is not listed in the directory, run npm install grunt to install grunt locally.
  • Run dir node_modules again to verify the grunt package was installed.
• If depriciation warnings or other errors appear, run npm update in the piskel directory.
• For further troubleshooting and installation tips, see the Working with an existing Grunt project section of Grunt's official Getting started page. Also see the official npm Getting Started section.

• Karma / Jasmine unit tests for utilities and services.
• Unit Tests Wiki Page

• Custom integration tests for drawing tools using a record/replay utility.
• Drawing Tests Wiki Page

• CasperJS integration tests for controllers.
• Integration Tests Wiki Page

The Piskel editor is purely built in JavaScript, HTML and CSS.

The following libraries are also used :

• spectrum : standalone colorpicker
• gifjs : generate animated GIFs in javascript, using webworkers
• supergif : modified version of SuperGif to parse and import GIFs
• jszip : create, read and edit .zip files with Javascript
• canvas-toBlob : shim for canvas toBlob
• jquery : used sporadically in the application
• bootstrap-tooltip : tooltips

As well as some icons from the Noun Project :

• Folder by Simple Icons from The Noun Project

Featured on piskelapp.com.

Source code is located on the Piskel-Website GitHub page.

Supports the following browsers: Chrome, Firefox, Edge and Internet Explorer 11

Offline desktop versions are available for download at piskelapp.com.

Available for the following operating systems: Windows, Mac OS X and Linux

More details can be found on the dedicated wiki page.

Contributors are always welcome. To maintain consistency and coherency, please review these guidelines before submitting.

• Discuss any changes you wish to make with juliandescottes via issue, email, or twitter before making a change. Contact information is provided in the following Support section.
• Consistency is maintained through a mandatory Code Style.
• Any new dialog has to be registered in DialogsController.js document.
• New js & css files need to be listed in piskel-script-list.js and piskel-style-list.js documents.
• Update the README.md with details of changes to the interface, additional environment variables, new testing protocols, links to useful documentation as added, etc.

For general questions, website account information or a support request:

• Twitter: send a direct message to @piskelapp
• Email: send an email to [email protected]

For bug reports, feature proposals and contribution requests:

• Piskel issues for the editor
• Piskel-website issues for anything else (user pages, piskel pages etc...)

Copyright 2017 Julian Descottes

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.