Alain Galvan

🌞 Driver Engineer @AMD. Writes about computer graphics, art, music composition, cameras, coffee, and much more. Probably ✍️ writing notes right now. 👋 My views only. https://alain.xyz/about

[alaingalvan]

Ora

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! 👍

Download

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

[alaingalvan]

Updating the Design of my site, made with React, TypeScript, Node, and all that jazz. :3

[alaingalvan]

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.

[alaingalvan]

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.

[alaingalvan]

Px.

A pixel art app for game developers and artists

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.

Teck Stack

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.

[alaingalvan]

Front End Development @ 2015

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.

Our Web Interfaces

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

Problems you can solve

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:

Piskel - A Web Pixel Art Editor which uses the HTML5 Canvas

DeviantART Muro - A web image editor on par with Photoshop/Gimp which uses the HTML5 Canvas

Artstation - A community for professional artists to share their portfolios written in Ruby/Angular

eBay - A selling community for individuals and businesses to sell products.

Unreal Engine - A game engine that can now export Web Games.

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 vs Back End 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.

SVGs (Vector Art)

Canvas

WebGL

Animations

CSS3 (SCSS)

Javascript (Coffeescript, Babel, Typescript, BackboneJS, Angular, Jquery)

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.

Dribbble - The biggest UX Web Community

Codrops - Popular new Web Design Projects

Codepen - A Front End Developer Playground

HTML - The Body

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.

SVG - Vector Art on the Web

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 - Templating Engine

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:

Haml (The first templating language, a bit more verbose then the others.)

Slim (Looks nearly the same as jade, but was designed for ruby devs)

Markdown (What this presentation was written in!)

And of course, you can always write your own templating language or system.

CSS - The Looks

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 { ... }.

Selectors

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.

SCSS - CSS with Superpowers

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 - The Brains

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:

The Name

Bad design at it's earlier spec

The Browser

To see all the design patterns of javascript, please check out one of Crockford's presentations on the subject.

Typescript - A Superset of Javascript

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) ->

Frameworks - Fanboys

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 - Easy referencing of DOM elements

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.

Inside the Machine - How it works!

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:

CSS (.hide(), .show(), .css(jsonobj)) - A wrapper for manually changing the .style attribute of a dom element.

Events (.on(event, callback)) - Really just a shorthand wrapper to regular js events.

AJAX (.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!

Angular - A Complete Front End Solution

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 - The V in MVC

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.

NodeJS - Serverside Javascript

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.

Resources

If you want to learn more about Web Development (Front and Back), feel free to visit any of the following:

Communities

Dribbble - The biggest UX Web Community

Codepen - A Front End Developer Playground

Shadertoy - A Shader Playground

Tutorials

Codrops - Popular new Web Design Projects

Scotch.io - Web App Tutorials

W3schools - Beginners guide to making websites

API Reference

Webplatform.org - Docs for all browsers

Mozilla Developer Network - Tons of Web Documentation

Classes

Codeschool - Florida based Web training

Udacity - Free Classes

Corsera - Free University Courses

SlideShare - Linkedin's Slide Sharing Platform

In addition, to get a feel of what a professional front end web developer looks like, take a look at the following portfolios:

Steven Wittens - WebGL Developer

Stephane Lyver - Compressor.io Dev

Steve Wolf - UX Designer

Jeff Atwood (Coding Horror) - Web Blogger

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):

You Don't Know JS - Kyle Simpson

Eloquent JavaScript - Marijn Haverbeke

Programming JavaScript Applications - Eric Elliott

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!

underscore.js Annotated

jQuery Annotated

References

[1] TypeScript vs. CoffeeScript vs. ES6: 2015

[alaingalvan]

GLSL vs HLSL

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.

Alternatives - Cross Compilers & Node based Editors

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:

Substance Designer - Hide abstraction with a focus on the output texture data.

ShaderFlex - Similar to UE4’s material editor.

Nvidia FX Composer - No longer maintained.

AMD RenderMonkey - No Longer maintained.

Even with these programs, you need to mess around with the code output (if any) to get it to work just right.

Cross Compilers

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.

HLSL2GLSL - A language translator used by Unity that converts HLSL to GLSL. Now this is a one way operation, but maybe someone will come along and make it 2 way!

Google Angle - A GLSL ES to HLSL converter used by Game Maker Studio and Chrome.

bfgx - A macro based system that allows you to write cross platform shaders by abstracting away functions with macros.

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.

Syntax Differences

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:

HLSL

//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); }

GLSL

//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);

Quizlet

Here’s a quizlet for you to test yourself to see if what you read came in one eye and out the other. :P

[retronator]

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

Retronator Pixel Art Academy

Last 5 days of the Kickstarter campaign.

[alaingalvan]

"The funny thing is, this is a technique for making graphics less like pixel art." - Retonator

[alaingalvan]

Introduction to Making Pixel Art for Games

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

Limitations & Guidelines

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 Vs. Digital Paintings

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.

Palette

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).

Silhouette

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.

Anti-Aliasing and Readability

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.

Shading

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.

Post-Processing

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.

Citations

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

Cure (2010) "The Pixel Art tutorial"

[alaingalvan]

[ Codepen ]

An updated Stela Brand image, this time with Bokeh Depth of field and a new logo design!

[alaingalvan]

[ Shadertoy Link ] Finished my ShaderToy #siggraph2015 Competition Entry! :D

[alaingalvan]

Raymarching Visualization

Raymarching is a method of GPU raytracing, with the goal of trying to compute or estimate a lower bound of the distance to the closest surface at any point in space. It works like regular raycasting, but marching with smaller and smaller distances like an inverse function.

Check out the shadertoy I wrote to experiment with it!

[alaingalvan]

Balance - Game Assets

Artstation Post

This was part of a Unity 5 game I was working on for Florida International University for their school of accounting.

The Logo was designed in Illustrator and Blender. The background was a procedurally generated model with a custom Cg shader designed to simulate a line graph, where the low points turn red, the highs turn green.

The character here was modeled was modeled using Zbrush primarily, Marvelous Designer for the dress, Retopologized with Zremesher and 3DS Max. The Zbrush polypaint was baked with Substance Designer.

[alaingalvan]

Just made this video of a Hadley Attractor rendered in Unreal! ;D

[alaingalvan]

Switching from Game Maker Studio to Unreal Engine 4

I've been working with Game Maker Studio since I was 8, and I've gotten pretty good at using it. Still, I've always wanted to learn how to work with other engines, and have chosen to focus on Unreal because:

It's the Triple A developer's engine of choice, so there's more job opportunities.

The impressive physical light modeling as seen in their demos.

The engine uses C++, so it's a great start if you've been meaning to learn how to program in C++. Alternatively, you can work with nodes.

It's free for students, or you can choose to cancel subscribing and still have access to the engine, so it's pay as you go.

Let me know in the comments of anything else you want to know relating to the two engines.

UI Comparison

Sprites/Backgrounds/Sounds/Rooms - All assets are stored in the Content browser, this includes:

Textures, Materials, Models

Blueprints, Material Functions, Mat. Param. Collections.

Sounds, Cues

And much more.

The Room Editor is the center pane, in unreal Rooms are called Scenes.

The right side of the UI holds the Scene Outliner, which is more like Blender's Outliner, it details the instances in the scene. GM has this too, but it's hidden in the room view.

Below the Outliner, there's the Properties pane, again, similar to blender or Unity, it details easy to modify parameters. GM doesn't have anything line this, the closest thing to compare it to is the creation code of a GM Object.

Blueprints vs Drag & Drop

One of the strengths of Game Maker Studio is that you don't have to write code to get things done, you can use the codeblock system. In Game Maker, the Drag & Drop system is converted into code. In Unreal, blueprints are not hardcoded into C++, so they're slightly slower, but have the added benefit of seeing the nodes animated.

Event Comparison

One thing that's extremely similar is the event system. Unreal has every event in GM:S, and more. Another thing to note is, Unreal has Scene Blueprints like room creation code in GM:S.

Game Maker Studio Unreal Create Begin Play Step Tick Keyboard Up Up Mouse Click Actor on Click User Defined Event 0 Custom Event

More Resources

Here's a great article on comparing Unreal Engine to Unity, so if you have some experience in Unity, I'd suggest checking it out.

[alaingalvan]

Three.js Baking

See the Pen Codepen Logo Baked by Alain Galvan (@alaingalvan) on CodePen.

Blender recently added Cycles Baking to their stable channel, so I wanted to provide people with a guide on how to bring their 3D models from a cycles bake to Three.js.

Just a review for those who don't know, baking is rendering the scene onto the UV coordinates of the models. You can render the full lit scene, or individual rendering channels for more control, like the normal, specular, ambient occlusion maps independently. If you're not a 3D artist, no worries, download this example .blend of the model above.

Ambient Oclusion

Ambient Oclusion on the other hand is basically "soft shadows", it describes regions of a mesh where light is more likely to "oclude". In this example I'll be baking ambient occlusion, but you can bake whatever you're comfortable with.

Why Bake?

It saves processing power at the cost of storage space. No need to process static lights and shadows constantly if a scene has static shadows/lights. Baking is used all over, from Game engines like Unreal and Unity, and by extension the games that were built with such engines.

Setup

First thing you're going to want to do is download and install Blender for whatever OS you're currently using. You're also going to want to download the Three.js Blender Import/Export plugin from their github. You can find the exporter in utils/exporters/blender/2.65/scripts/addons/. Copy the folder in there to %AppData%\Blender Foundation\Blender\2.71\scripts\addons on Windows, or /Applications/Blender/blender.app/Contents/MacOS/2.71/scripts/addons for OSX. Note: I'm assuming you're using the latest version of Blender as of this post, 2.71, choose the folder for the version you're working with.

From there, open blender, and go to File > User Preferences > Addons. Search for Three and you'll find the plugin you just installed, from there just check it off and you're good to go. Now any model you make can be exported as Three.js JSON data.

Baking

Now let's load up our model. Right click on it to select it, and then go to the dropdown labeled Object Mode, and change it to Edit Mode. Then select all with the A shortcut. If you're working with a model with UVs already made, then skip the next sentence. Go to the tab marked "Shading/UVs, click on the UV Mapping dropdown menu. select Lightmap Pack. This will create a lightmap from any model.

Now that our model has UVs set up, we need to create an image to bake them on. Go click on the cube dropdown on the bottom left corner labeled 3D View, and change it to UV/Image Editor. Go to Images > New Image. Make it 1024x1024. You should see the faces of the mesh show up on the image viewer. Now go to that bottom left corner where it said UV/Image editor, and change that to node editor. Make sure you're viewing shader nodes, look for the sphere with the checkerboard pattern, and make sure "Use Nodes" is active. From here, go to Add > Texture > Image Texture. Load up the image you made in the UV/Image editor by clicking the photo icon, and scrolling to your image.

From here all you have to do is go to the right sidebar and click on the camera icon. Scroll down to where it says bake, and Bake that bad boy. Wait a bit, and you'll have a baked image available on the UV/Image Editor panel. From there go to Image > Save Image to export it, and also click Pack as PNG to save it in the .blend file.

Three.js Rendering

Now let's import that model! Just use Three.js's import helper functions and you'll be good to go.

function draw() { var jsonLoader = new THREE.JSONLoader(); jsonLoader.load("http://codepen.io/assets/3dlogo.js", addModelToScene); } function addModelToScene(geometry, materials) { model = new THREE.Mesh(geometry, material); scene.add(model); }

And there you go, it was that easy. Feel free to comment with links to your own 3D models or if you have any questions!

[alaingalvan]

Pixi.js Perlin Godray Port

See the Pen WebGL Perlin Godrays by Alain Galvan (@alaingalvan) on CodePen.

After getting a frontpage on Newgrounds for a concept screenshot, I announced I was working on a Dark Souls fan game. After working on it for a while, I wanted to release some of what I've done, and explain how it all works. I've ported the following GLSL to Three.js, Game Maker Studio, and now Pixi.js. It all works the same thanks to the magic of glsl. So let's dive in to the GLSL behind the godray effect!

vec4 godray(vec2 uv, float angle, float time) { float xx = cos(radians(angle)); float yy = sin(radians(angle)); vec3 dir = vec3((xx * uv.x) + (yy * uv.y), (xx * uv.x) + (yy * uv.y), time); float noise = turb(dir, vec3(480.0, 320.0, 32.0), 2.0, 0.5); noise = mix(noise, 0.0, 0.3); vec4 mist = vec4(noise, noise, noise, 1.0) * (1.0 - vUv.y); return mist; }

Here we have the godray function, which makes the uv coordinates dependant on each other. What makes the godray effect linear and dependant on an angle rather than just regular perlin noise, is the use of both parameters of the UVs for the construction of the vec3 dir. this forces the function to behave diagonally since now both parameters are dependant on the uv.x and uv.y. From there some simple triginometry can be used to adjust the ratios of the parameters of the uv coordinates to get that rotation effect.

From there I dim down the effect with the mix function, which behaves similarly to lerping, where it interpoliates between the two varaibles acording to some ratio. Finally, I multiply the effect by the y coordinate of the UV to get the effect to cascade down.