https://github.com/alaingalvan/ora.gmx
Open sourced a #indie #GameMaker Studio #game I made a while back. Was a finalist in the Steam Workshop Competition! 👍
It’s free and available for PC/Android (just click the badge on the repo). :)
Android - https://github.com/alaingalvan/ora.gmx/raw/master/builds/android/ora.apk Windows - https://github.com/alaingalvan/ora.gmx/raw/master/builds/windows/ora.exe
Updating the Design of my site, made with React, TypeScript, Node, and all that jazz. :3
Biggy and Smalls, Snorlax and Pikachu, Little Guy and Big Guy.
Arguably the most memorable boss fight of the whole of Dark Souls 1 was these two crazy guys.
My favorite part of the Dark Souls 3 was the Cathedral of the Deep, so I wanted to make that area in as Pixel Art.
Over at HackNY last weekend I built a Electron powered #pixelart editing program that features #Clarifai to check whatever you draw in real time!
It’s at its early stages, but it does open/save files, lets you send your art to Clarafai to get some feedback of what your art might look like to people. Releases can be found on the github repo’s releases page.
I used Electron Vue as a quick electron app scafold, and set it up with webpack hot reloader and dev server. (I ended up not even using this though and using location.reload().
I used React, Aphrodite, Redux, TypeScript, Clarifai, along with some minor stuff like PostCSS for global CSS.
Front End Development has become much more relevant now that computing devices can handle the load of a javascript application. There’s a push now to handle more work on the front, as it lessens the load of a server, thus allowing for more concurrent users.
I’ll be giving a summary of the state of Front End Developement as of 2015. This won’t be too detailed (if you want detailed, look for a published article on the subject lol), but this should be a great way to introduce yourself or someone you know to the world of web development.
These are the interfaces we communicate with in the web:
| HTML | A markup language that describes a page. |
| CSS | A styling language that makes the markup look how we want it to. |
| Javscript | A scripting language to fill the gaps that the first two couldn’t do. |
Javascript ranks #1 in the world as the most popular language, according to github statistics. In fact, if you look at the statistics, nearly every top language can be used as a web language. Python with Django, PHP, Ruby, C++/C with web interfaces, even shell commands can manage a web application. Since the internet is the most popular part of computing, this should come as no surprise.
With the advent of new exciting standards to the web, and browsers being updated near constantly to keep up with these standards, it’s an exciting time to be a web developer. Here’s a few new things as of 2015-2016.
| Serverside | HTML5 | Frameworks | Languages |
|---|---|---|---|
| NodeJS | WebGL | React+Flux | ECMAScript 6 |
| PHP 7 | WebCL | Angular | Scala |
| Ruby on Rails 4.2 | WebAssembly | Ember | Go |
Theoretically, anything you can imagine should be possible on the web with enough time/effort. You can always make a native interface to communicate with native APIs, such as the current state of WebCL, where you need a plugin for it to work properly. Whole applications can be written on the web, here’s a few examples:
So you can build communities, applications that can export files, games with common game engines like Unity or Unreal Engine, and use emscripten to compile languages like C++ to javscript. That should show the true power of web app development.
Front End Development is developing for the browser, in other words, HTML, CSS, Javascript, and meta information like cookies, HTTP headers, WebStorage, and other browser features.
In contrast, Back End Development is developing for serverside preprocessing systems, such as databases, pipeline systems like Gulp, package management systems like Bower or NPM, shell scripts, server systems like PHP or NodeJS. When you can develop both sides, you’re called a Full Stack Developer.
Bear in mind, nearly everyone who’s a web dev knows both sides of that spectrum, so choose one you perfer to specialize in the most, since both have a great deal of topics. Here’s a few topics that encompass front end development, you’ll notice, they’re all artistic in nature.
A Front End Developer is similar to a User Experience Designer, or UX Designer; the line is hard to define, a front end dev tends to focus more on code, whereas a UX Designer tends to focus more on design/prototyping.
There’s no definition of what’s good or bad art, but here’s a few resources on some of the choices professionals in this field are taking.
Yes I know, HTML is really the structure, the model of a website, I’m just trying to go for a theme, hear me out lol. Let me know the theme at the end for a cookie. :3
HTML, or Hypertext Markup Language, is the structure of your website, how things are layed out. Think of it as a text version of folders, where objects are inside other objects in a nested form.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<!--Where you put your css/js-->
</head>
<body>
<!--Where you put your elements-->
</body>
</html>
That’s the basic structure of an HTML page, of course, it can get far more complicated if you want it to. :)
<head>
<!--Meta Information-->
<title>My Website</title>
<meta charset="utf-8">
<!--Mobile Stuff-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="mysite-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="mysite-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="mysite-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="mysite-icon-ipad-retina.png">
<!--Twitter-->
<meta name="twitter:card" content="mypicture">
<meta name="twitter:site" content="@MyTwitter">
<meta name="twitter:title" content="My Site Title">
<meta name="twitter:description" content="A Description">
<meta name="twitter:image" content="http://mysite.com/linktoapicture.png">
<!--Facebook-->
<meta property="og:image" content="http://mysite.com/linktoapicture.png" itemprop="thumbnailUrl">
<meta property="og:title" content="My Site Title">
<meta property="og:url" content="A Description">
<meta property="og:site_name" content="MyFacebook">
<!--Google, Bing, Yahoo Robots-->
<meta name="description" content="A Description for Search Engines">
<!--Stylesheets-->
<link rel="stylesheet" href="stylesheets/main.css">
<!--Javascript-->
<script src="js/app.js"></script>
</head>
You can stuff your head element with a ton of information, like giving help to facebook’s robots that look at your site when someone links it on facebook (SEO Meta info), icons for iOS (and Android, they take those icons too :P).
There’s a ton of elements you can put in your body, I’ll just list a few:
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn’t displayed on the web page itself
<body></body> Sets off the visible portion of the document
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a href="#NAME"></a> Links to that target location from elsewhere in the document
<p></p> Creates a new paragraph
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected
<img src="name" alt="For Accessibility"> Adds an image
<hr /> Inserts a horizontal rule
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
<form></form> Creates all forms
<select multiple name="NAME" size=?></select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option> Sets off each menu item
<select name="NAME"></select> Creates a pulldown menu
<option> Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME"> Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x"> Creates a radio button. Text follows tag
<input type="text" name="NAME" size=20> Creates a one-line text area. Size sets length, in characters.
<input type="submit" value="NAME"> Creates a Submit button
<button type="submit">Submit</button> Creates an actual button that is clicked
There’s way more elements, and old HTML 2 and 1 ways to style these elements, but let’s pretend those don’t exist for now. :P
HTML is only one of the many markup languages you can use in the web, others include XML (Used in SVG elements), and preprocessing languages like haml or jade.
Vector Art is art that is defined by vectors (I kinda defined the word with itself lol), which could be scaled to any size, which is important for the new web where a user could be on a mobile device that tells the browser to render 400px wide, but the phone has a 2560x1600 display. (so 1600 px wide in reality, 4x bigger!)
Jade is a simplified version of HTML that allows for things like variables, functions, includes, and inline javascript execution. It’s popularity came from NodeJS, which needed a templating system.
Other templating langauges for HTML include:
And of course, you can always write your own templating language or system.
CSS, or Cascading Style Sheets are a declarative language that can overwrite itself as you write more later. By overwrite later, any css that selects the same stuff as before will overwrite it, but only what you added!
<style>
p {
color: red;
text-align: center;
}
</style>
<p>This is red.</p>
<style>
p {
color: green:
}
</style>
<p>This is now green, but still centered!</p>
That’s the Cascading part of Cascading Stylesheet.
By default the browser provides you with some default styles, and these could vary from browser to browser. Therefore, most web applications feature a starter css file that resets these elements, reset.css, at the top of their stylesheet, or as the first imported stylesheet.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
With this, you can see the syntax of CSS. First, any style declaration with a , is applied to both selected items beside the comma.
Next, you see that comments are denoted with /*comment*/, unlike most languages, you can’t use the //doubleslash comment syntax on css (but you can in scss).
Next, you see a : acting as a meta selector, :before and :after acting as selectors for some extra elements that can be created from one element, their “before” and “after”.
finally you see that to select an element, you can just use the element’s name. div { ... }.
So CSS is built around selecting something, be it an element like the html element, or a Class, a special selector that you can call on with the class attribute of an html element, like so:
<style>
/*In CSS, class selectors are denoted with a period.*/
.red {
color: red;
}
.bold {
font-weight: 500;
}
</style>
<p class="red bold">
Red and Bold!
</p>
| Pattern | Meaning |
|---|---|
| * | Matches any element. |
| E | Matches any E element (i.e., an element of type E). |
| E F | Matches any F element that is a descendant of an E element. |
| E > F | Matches any F element that is a child of an element E. |
| E:first-child | Matches element E when E is the first child of its parent. |
| E:link E:visited | Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). |
| E:active E:hover E:focus | Matches E during certain user actions. |
| E[foo] | Matches any E element with the “foo” attribute set (whatever the value). |
| E[foo=“warning”] | Matches any E element whose “foo” attribute value is exactly equal to “warning”. |
| E#myid | Matches any E element ID equal to “myid”. |
There’s more patterns than this, but these are what most people use.
Most Web App developers don’t write an application with pure CSS, since that can get huge fast. In comes preprocessor languages to the rescue again. SCSS (or “Sass CSS”), is a easier version of CSS, which features things like variables, functions, and includes. (Sounds familiar?)
The file structure of a SCSS project should look like the following:
|- stylesheets/
|- modules/
|- partials/
|- base.scss
|- buttons.scss
|- ...
|- vendor/
|- fontawesome/
|- ...
|- refills.scss
Let’s define these sections:
Modules are for any Mixins (functions) or global variables you’ll be using in your project.
Partials are for groups of items, buttons, forms, your default html.
Vendor is for 3rd party styles like FontAwesome or Google Fonts.
Try to do everything visual in CSS, using javascript as only a last resort.
Javascript (or ECMAScript) is a web language developed for netscape back in the early 90s, but has since evolved to be the most popular language in the world.
Douglas Crockford (Inventor of JSON) calls it the world most misunderstood language due to:
To see all the design patterns of javascript, please check out one of Crockford’s presentations on the subject.
What I’m about to do is crazy talk.
Talking about languages is like talking about sports teams, you’re always going to argue that your team is the best. Same goes for frameworks, game engines, art tools, musical instrument brands, we humans just like to side with something. Javascript has tons of preprocessor languages, Babel, Coffeescript, Dart, and with Emscripten, every language that can be compiled to c++. (So basically everyone lol)
I choose TypeScript for this year, since it’s the new cat on the block with Angular 2 coming out, but maybe next year people will work with ES6 exclusively, or maybe Coffeescript might win. (Shrugs)
It does seem like Typescript will come out on top though, it is a very elegant extension to Javascript and intuitive if you have experience with other languages.
//ES5
function User(id, firstName, lastName) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
User.prototype = {
getId: function() {
return this.id;
},
getFirstName: function() {
return this.firstName;
},
getLastName: function() {
return this.lastName;
},
setFirstName: function(firstName) {
this.firstName = firstName;
},
setLastName: function(lastName) {
this.lastName = lastName;
}
};
//ES6
class User {
constructor(id, firstName, lastName) {
this.id = id
this.firstName = firstName
this.lastName = lastName
}
getId() {
return this.id
}
getFirstName() {
return this.firstName
}
setFirstName(firstName) {
this.firstName = firstName
}
getLastName() {
return this.lastName
}
setLastName(lastName) {
this.lastName = lastName
}
}
//Typescript
class User {
private id: number;
private firstName: string;
private lastName: string;
constructor(id: number, firstName: string, lastName: string) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
getId() {
return this.id;
}
getFirstName() : string {
return this.firstName;
}
setFirstName(firstName: string) {
this.firstName = firstName;
}
getLastName() : string {
return this.lastName;
}
setLastName(lastName: string) : void {
this.lastName = lastName;
}
}
//Coffeescript
class User
constructor (@id, @firstName, @lastName) ->
getId: ->
@id
getFirstName: ->
@firstName
setFirstName: (@firstName) ->
getLastName: ->
@lastName
setLastName: (@lastName) ->
Everyone and their mother is scrambling to make a thing, something popular, the next jQuery, whatever.
“Real developers just need jQuery, everything else is a fad.”
We have Angular by Google, React by Facebook, Ember by Tilde. You’ve probably are thinking to yourself:
“Google makes the best frameworks!”
Well a lot of what Google does becomes vaporware. Facebook is evil so nope nope nope, and I’ve Never heard of this Tilde guy.
We have new languages, databases, frameworks, libraries, and plugins popping up every day. How do you choose?
“Well I’ll just use what everyone else uses!”
So you’re going to use the old proven stuff because it’s safe? What if you could do the same thing faster and easier with something new? What if the new thing replaces the old thing! I’m scared, what do I do!!!
Get a hold of yourself!
There’s no real safe place for fanboys, the web is constantly changing, so be prepared to learn something new, odds are it’ll just be a rehash of the old stuff with a few improvements anyway. Is anything really new or original?
If you had to make your decision based on the most popular front end frame work as of 2015-2016, the answer would be: Angular, but next year could be different, bear that in mind!
jQuery is by far the most popular javascript library, to the point where it’s ubiquitous with JavaScript. It’s basically a selector library, letting you tell it exactly what you want changed just like css.
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
So it’s basically $(thisthing).doSomething().doSomethingElse();.
Here’s an example of using jQuery to have an icon respond to the page scrolling.
Behind the scenes, jQuery specified two global variables in the javascript project’s scope, the jQuery object, and the shorthand $. Thus when you write $('selector'), what you’re really doing is calling a function. jQuery automatically finds whatever you selected, and applies whatever you want to every element of what you selected. These could be:
.hide(), .show(), .css(jsonobj)) - A wrapper for manually changing the .style attribute of a dom element..on(event, callback)) - Really just a shorthand wrapper to regular js events..ajax()) - An API call to the backend.Jquery uses the Sizzle selector engine as a means of selecting elements. Here’s a very simplified version if it.
function Sizzle(selector, ...) {
//nodeType is the kind of query (#id, .class, etc.)
var nodeType = findSelectorType();
if (nodeType === 9) {
if ((elem = context.getElementById(m))) {
// getElementById can match elements by name instead of ID
if (elem.id === m) {
results.push(elem);
return results;
}
}
}
//...
else if //...
{
push.apply(results, context.getElementsByClassName(m));
return results;
}
//...
}
You can actually add functions to the jQuery object, and thus make jQuery plugins!
AngularJS is a front end framework developed by Google which lets you build web apps quickly. It’s designed to have expressive HTML with automatic two way data binding, so there would be no need to write selectors with jquery.
Those areas surrounded by Double Mustashes {{ var }} are expressions, they let you write javascript in html. Rather than selecting an element you want to replace with a variable with jQuery, you can just write the variable where you want it! This two way binding is what made angular become the second most popular framework.
var app = angular.module("baseApp", []);
app.controller("baseController", function ($scope) {
$scope.name = "John";
$scope.newName = function() {
$scope.name = "Jim";
}
});
React is a front end system by Facebook which only offers view controls. The reality is, no one framework tries to be monolithic, including angular, they all separate parts of themselves into modules. Thus, React is meant to be used with Flux, a data flow system.
Which is better, one monolithic framework, or several small components to your application? That question leads to another, do you want to maintain your dependencies, or have someone else do that for you? Extra work might not be a good idea for your team, but it does provide you with more freedom.
There’s a real allure in having one language to bind the web together, JavaScript. Not having to use Ruby and JavaScript, or PHP and JavaScript definitely seems more maintainable, and it would be easier to deal with turnover if the front end developer can also manage the back end while they hire a new member to the team.
If you want to learn more about Web Development (Front and Back), feel free to visit any of the following:
In addition, to get a feel of what a professional front end web developer looks like, take a look at the following portfolios:
There’s plenty of free ebooks on front end development (There’s more than these, but I selected these out of their brevity and detail):
No book will teach you what years of actually making apps can teach you, so check out some of these completed projects and read the source!
If you’re developing a game for UE4 or Unity, you’re going to have to write your shaders in HLSL if you want to support all platforms. If you’re making a web app or a game with Game Maker Studio, you’ll be writing your code in GLSL ES. There’s also CAD shader languages like Open Shader Language (OSL) or Maya’s proprietary shader language.
So, the shader language world is a bit fragmented, but every language here is similar enough to C that you can easily read one or the other.
So this will be an overview of every difference between HLSL and GLSL, and how to port between them.
There are alternatives to actually learning all 3 languages, such as node based material editors like Unreal’s material editor or Unity Asset Store packages like Shader Forge.
Shader languages are thus hidden behind an abstraction layer, which is great for non-programmers, but extra abstraction means you have to find people that understand yet another layer of a system, which may not be worth the trouble.
It’s difficult to make a shader editor that’s not dependent on a specific engine, since different engines have different variable names and places they manage shaders. Nevertheless, there’s been attempts to make shader composers, such as:
Even with these programs, you need to mess around with the code output (if any) to get it to work just right.
So why can’t I just run my code through some sort of parser that can automatically convert it from GLSL to HLSL, or visa versa? Well, there are a few resources out there that can do just that.
So here’s a cool project idea, make a web app that does 2 way conversion of hlsl to glsl. Then propose it as an addon to shadertoy.com! It could be just a combination of HLSL2GLSL and Google Angle.
The syntax of each language is nearly identical, just a few different function names. Let’s start with a hello world shader, a simple UV color display:
//Vertex Shader
void MainVertexShader(
float4 InPosition : ATTRIBUTE0,
float2 InUV : ATTRIBUTE1,
out float2 OutUV : TEXCOORD0,
out float4 OutPosition : SV_POSITION
)
{
OutPosition = InPosition;
OutUV = InUV;
}
//Fragment Shader
void MainPixelShader(
in float2 UV : TEXCOORD0,
out float4 OutColor : SV_Target0
)
{
OutColor = float4(UV, 1.0, 1.0);
}
//Vertex Shader
attribute vec4 InPosition;
attribute vec2 InUV;
varying vec2 UV;
void main()
{
gl_Position = InPosition;
UV = InUV;
}
//Fragment Shader
varying vec2 UV;
void main()
{
gl_FragColor = vec4(UV, 1.0, 1.0);
}
So standard C syntax with a few things to note here:
in HLSL attributes are arguments in the shader functions, in GLSL, they’re keywords denoted by attribute and varying.
in GLSL output variables are denoted with a gl_ prefix, in HLSL they’re explicitly denoted with a out keyword. (GLSL has the out keyword as well, and allows for custom output variable names. Eventually, you must hit a main() function though.)
The main functions in HLSL could be named anything you want, whereas in GLSL, it must be main().
float4 in HLSL is the same as vec4 in GLSL, a struct with 4 floats.
//First line is HLSL, the second is HLSL
float4 v = 1.0;
vec4 v = vec4(1.0);
//Swizling
v.xyz;
//Matrices
float4x4 m = {x1, y1, z1, w1, ...};
mat4 m = mat4(x1, y1, z1, w1, x2, y2, ...);
v = mul(m, v);
v = m * v;
//Built In functions
lerp(a, b, c);
mix(a, b, c);
fmod(1.1, 1.0);
modf(1.1, 1.0);
atan2(x, y);
atan(y, x);
Here’s a quizlet for you to test yourself to see if what you read came in one eye and out the other. :P
The funny thing is, this is a technique for making graphics less like pixel art.
It’s understandable. It was developed in the time when pixel art wasn’t a style but simply the way things were. Anti-aliasing was a move towards more photorealistic, smoother, high-definition visuals.
This makes it a very stylistic choice today. It’s all about what you’re going for.
~
If you like such content, consider becoming a backer of
Last 5 days of the Kickstarter campaign.
“The funny thing is, this is a technique for making graphics less like pixel art.” - Retonator
(via retronator)
As a kid, you’ve most likely grew up with games that featured pixel art, from Pokemon to Sonic, Ragnarok Online (3D and Pixel Art?!), Megaman. I know that these guys inspired me to persue pixel art, and now I can say that I know how to do pixel art:
I’ve been front paged on Newgrounds, Codepen, PixelJoint. Not that awards are important (maybe you’re more impressive lol), but I want you to know I at least know what I’m talking about.
This post will serve as a guide, telling you everything you need to know to begin making pixel art.
Steps to making pixel art:
Choose a Palette
Make a Silhouette
Add Shading and Detail
Post Processing
Colors have 4 channels, R, G, B, and Alpha (transparency), and most modern devices use an 8 bit per channel (for a maximum of 256 possible brightness levels per channel) for image files and displays. On old game consoles like the Gameboy, Super Nintendo, Genesis, and even the GBA, developers had to deal with tighter color requirements. The Gameboy only had 4 shades to choose from, the Gameboy Color had a 5-bit (for a max of 32 possible brightness levels) per channel display, and could display a maximum of 56 colors, though normally it was far less. Pixel art was born from these limitations.
In addition, older devices had limited amounts of ram. The Commodore 64’s resolution was 320 by 200 pixels, and so if you wanted a 4 bit display, you would need 4 bits for every pixel (64,000) on the screen, for a grand total of ((64000 * 4)/8)/1000 = 32kb of ram, which was often times more than the amount of ram in the entire computer!
In addition, on the Nes, sprites were very small images, so often times you would be limited by the size a sprite could be, constrained to a 8x8 grid. You could only have 64 of these sprites on a screen at any given time.
We’re now free to use all 256^3 colors if we want, make pixel art at any size, but bear in mind restrictions are what makes pixel art distinct from other forms of art. Even to this day we have places like PixelJoint keeping these restrictions alive.
Pixel Art is an image that was designed pixel by pixel.
It’s different from other forms of art like digital painting or line art in that every pixel is important, whereas those forms of art avoid that level of precision.
Source: Palettes by @jinndevil
A palette is a color ramp, from low to high, and should be characterized by complex, hue shifting tones. You shouldn’t have a palette that’s linear but rather, have one that mixes colors together.
Most artists start with an average color for the piece that they’re doing, then add highlights and shadows to that.
A good idea is to use complementary colors to help blend colors together. Purple or Teal work well for shadows, whereas yellows and whites work for specular highlights.
It’s best to have a maximum of 15 colors per sprite (with transparency being the 16th color).
The lead cartoonist for Spongebob Squarepants, Sherm Cohen, suggested that silhouettes should communicate the idea of a character’s action. This applies not only to animation, but also to all forms of art, including pixel art, the silhouette is what makes or breaks a piece.
You want your silhouette to be solid, with no jagged lines, and would paint on top of that silhouette.
One technique to make this easier is to use Layer masks, in Photoshop, this is done by Layer > Layer Mask > From Transparency. This will make painting easier by letting you draw strokes without worrying about the silhouette you worked so hard on.
Since pixel art is normally small, it can become difficult to communicate intricate details within a small space, so an artist is fighting between anti-aliasing and readability.
Anti-Aliasing is the process of making edges smoother by blending them with their surrounding pixels.
Readability is how easily you can distinguish details in an image. Generally, The more anti-aliased an image, the less readable it is.
Source: One Piece Sprites by @neorice
One way to improve readability is to add outlines to your sprite. That’s not always a good idea, such as for environments, but for characters and objects, outlines are a great stylistic choice.
Dithering is to gradate colors together via a pattern. Generally you want to avoid mechanical dithering and op for a pattern based effect instead.
In this sprite of Perfect Chaos from Sonic Adventure DX, I dithered the image by trying to follow the flow of water around the shape of Chaos. Proper anti-aliasing and careful shapes and edges made the water look almost photo-realistic.
Often times your original choice of colors wasn’t the best one, so post-processing could serve as a way to correct your colors and make them stand out.
Curves - The curve tool is a method of adjusting the ratio of colors on an image. On Photoshop this can be found at Image > Adjustments > Curves, and on Gimp at Colors > Curves.
Levels - The levels tool is a simple method of adjusting the brightness of colors. The middle handle adjust the mid color balance, the left handle adjusts the darks, the right handle adjusts the highlights. Curves and levels are interchangeable so use whichever you prefer.
Color Balance - A method of changing the general tonalities of an image. Movie makers often adjust the color balance to have cyan shadows and red orange highlights. Look at any movie and notice just how blue it is!
Color Replacement - Sometimes what you really need is to manually replace colors.
In Gimp, just click the icon with a hand and a blue, red, and green square, set your threshold to 0, and select the colors you want to replace.
On Photoshop, click the magic want, uncheck contiguous, set the threshold to 0, and select what color you want to replace. Then use the fill tool and fill the whole selection. (Thanks to @retronator for pointing this out!)
On Game Maker, this is even easier, there’s a dedicated tool for it!
To measure the number of colors on your sprite, you can use a tool like Gimp’s Colorcube Analysis.
Gorz (2010) “Spriting Dictionary” Retrieved 2015-08-15
Cohen, Sherm (2009) “SpongeBob Tute 01 Silhouette” Retrieved 2015-08-17
iBookGuy (2015) “How "oldschool” graphics worked.“ Retrieved 2015-08-18
![[ Codepen ]
An updated Stela Brand image, this time with Bokeh Depth of field and a new logo design!](https://64.media.tumblr.com/6b5a70477690ef5fdc6896515173dafc/tumblr_nt7hz1V1gm1r8b846o1_1280.png)
An updated Stela Brand image, this time with Bokeh Depth of field and a new logo design!