9. November 2015


This is a feature that was quietly added in Blender 2.72 that will be a massive game changer to many potential Blender users.  The Blender UI has always been very keyboard focused and quite daunting especially for beginners.  Over the last couple releases we’ve seen some nice tweaks to the UI to make Blender a great deal more user friendly. The addition of radial menus is another step down the road of usability.  If you come from a Maya background this feature will be immediately recognizable.  Now keep in mind this feature is still under development and not enabled by default and there is certainly a reason for this.  Expects some bugs and growing pains, although personally I found it well worth enabling.


Before I show you how to enable pie menus in Blender, let me show you them in action:



Enabling Pie Menus

To turn the menus on, go to File->User Preferences…



Next select the Add-ons tab, search for pie then click the enabled checkbox on “User Interface: Pie Menus Official”



You are now done.  However before you close the menu, there are some settings you may want to configure in the Interface tab.  In the bottom right corner you will set settings for configuring the Pie menus:



Personally I like setting the radius to around 40-50, which results in the menu being a lot denser, like so:



Available Menus

Now that pie menus are enabled, you will find several hotkeys perform differently.  Basically all of the things control via this toolbar are now available via pie menus:


Simply hit the right key(s) and the menu will appear.  You will notice a number next to each menu item, which can also be used instead of clicking the menu.  For example TAB + 6 will enable edit mode.  Right click or hit ESC to cancel a menu without selecting anything.


TAB key – object interaction mode



Q key – view selection



Z Key – shading mode



Ctrl + SHIFT + Tab – Snapping



. (Period Key) – Pivot



As with almost all things in Blender however, the bound keys can be configured to the users preference.


Again, this feature is under development and can be a bit buggy.  I found the shader menu a bit problematic on my computer for example.  However I view that even today it is worth the pain, especially if you like me work on a laptop without a dedicated number pad.  The new view navigation is a great improvement over enabling numpad emulation.


Never nice new feature, great job Blender team!


The Video


This video, available in HD here, illustrates mostly the same material we just covered if you prefer video form or if I missed a detail.

Art ,

8. November 2015


If you’re using a high resolution monitor such as the newer 4K display or Apple’s “Retina” display, you’ve certainly encountered your fair share of applications that are borderline unusable.  At first glance Blender appears to be just such an application.  This is what it looks like on a 2560x1440 display, I can only imagine what it looks like on a full 4096x2160 display!



Now it may not look too bad in that screenshot, but consider the dimensions of the title bar to the application menu to get a full idea of how tiny the text is.  Fortunately the Blender UI team was incredibly forward thinking when they updated the UI.  Let’s look at making Blender more usable on ultra-HighDef screens.


In Blender, select File->User Preferences…



Select the System tab, then it’s the DPI section under general you want to configure.  I changed simply doubled it from 72 to 144.  Click Save User Settings to commit the changes so they last if you restart Blender.



There is one other change you may wish to make.  The manipulator widget is also extremely small on an high DPI screen, like so:



This can also be configured in settings, instead in Interface tab of the User Preferences window:



TADA, Blender UI now looks brilliant on your high def screen.  Im not entirely certain why the manipulator doesn’t scale with the rest of the UI but it’s an easy enough fix.


I should only hope all other applications implement DPI scaling as well as Blender (*cough*Adobe Photoshop*cough*) in the future!  There is a video version available as well.




Art ,

4. November 2015


Although I’ve done a couple previous tutorials covering texturing in Blender, including this text one and this video one, I’ve never really shown the entire process.   This video simply illustrates a quick UV Unwrap/Texture job in Blender.


The high def video is available here.

Art ,

22. October 2015


As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.


The video of this tutorial is available here or embedded below.


The Code



<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
    <div id="content"></div>


/// <reference path="phaser.d.ts"/>

class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
    preload() {
        this.game.load.tilemap("ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img = this.game.load.image("HF2_A2", "HF2_A2.png");
        this.game.load.image("Decepticon", "decepticonLarge.png");
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    render() {
    create() {
        this.map = this.game.add.tilemap("ItsTheMap", 32, 32, 64, 32);


        this.player = new Phaser.Sprite(this.game, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;
        this.game.world.addAt(this.player, 1);


        var something = this.map.objects["GameObjects"][0];
        var start = <ObjectEntity>this.map.objects["GameObjects"][0];
        var end = <ObjectEntity>this.map.objects["GameObjects"][1];

        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y);

        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onUp.add(() => {
            this.player.position.add(-32, 0);

        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onUp.add(() => {
            this.player.position.add(32, 0);

        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onUp.add(() => {

        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onUp.add(() => {
            this.player.position.add(0, 32);

window.onload = () => {
    var game = new SimpleGame();



The Video


Art, Design, Programming , , , ,

14. October 2015


Tiled is a popular open source map editor for creating 2D maps using tiled graphics.  I have used Tiled in several previous tutorials and no doubt will be using Tiled in several future series, so instead of covering it partially over and over again, I decided to do a Tiled video tutorial series that I will simply link to.  This is that tutorial series.  As I add new tutorials I will link them below.


Right now the contents consist of:


An earlier text based introduction to Tiled from GameFromScratch is available here.

If you are interested in learning out to make isometric tiles in Blender check this tutorial.


Previous tutorials that have used Tiled include:


Direct version of the videos embedded below:

Art, Programming , ,

Month List