Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

9. May 2016

 

Krita is a powerful open source 2D graphics package that’s targeted at digital painting instead of image manipulation.  They have just launched another Kickstarter campaign looking to raise funds to improve vector and text capabilities.  From the announcement:

Now is the time to join us and make it possible to create an awesome text tool, one that is really suitable to what you need text for in Krita: real typographic and artistic control, support for various languages, for translations, for scripts from all over the world. One integrated text tool that is easy to use, puts you in control and can be extended over the years with new features.

The second topic is vector graphics. It’s related to the text tool, since both are vector layer features. Currently, our vector graphics are defined in the OpenDocument Graphics format, which is fine for office applications, but not great for artwork. There’s already a start for supporting the SVG standard instead, and now’s the time to finish the job! And once we’re SVG to the core, we can start improving the usability of the vector tools themselves, which also suffer from having been designed to work in a word processor, spreadsheet or presentation application. Now that Krita is no longer part of a suite of office applications, we can really focus on making all the tools suitable for artists! Let’s make working with vector art great!

 

The pitch video for 2016 is available below

GameDev News

8. May 2016

 

The following is a recap of major events in the world of game development for the week ending April 17th, 2016.  I do a weekly video recapping the news available here with this week’s video embedded below.  This post is a collection of links mentioned in the recap.

 

 

The Video

GameDev News

7. May 2016

 

Tiled is a popular open source 2D map editor.  If you are interested in learning more, I did a comprehensive tutorial series available here.   They just released version 0.16.1.  This release is mostly just a bug fix release to fix an auto update bug from an earlier release.

 

Details from this release:

Today I noticed that the Windows packages for Tiled 0.16.020 did not actually have the auto-updater enabled. This bugfix release resolves that issue as well as fixing several small issues. It also includes an updated Turkish translation and a Norwegian Bokmål translation was added.

  • Fixed auto-updater not enabled for Windows release (f2bb1725)
  • Fixed saving of object IDs assigned to tile collision shapes (#1052)
  • Fixed crash when pressing Backspace with Custom Properties section selected (#1245)
  • Fixed crash on exit when leaving the Tile Collision Editor open (#1253)
  • Added Norwegian Bokmål translation (by Peter André Johansen, #1261)
  • Updated Turkish translation (#1254)

Download Tiled 0.16.190 through itch.io.

 

You can download Tiled here.

GameDev News

6. May 2016

 

You have to love the new speed of releases for major game engines, it’s a great trend and I hope it keeps up.  As the title suggests, Unity have released a new patch bringing the version to 5.3.4p6.  Once again this patch is composed almost entirely of fixes and is not considered dangerous or beta.

The changes include:

Improvements
  • Cluster Rendering : Improvement on cluster networking layer and reduced instability while using cluster input.
Fixes
  • (788040) - Android: Buildpipe - Don't make use of preview SDK tools installed.
  • (786918) - Android: Buildpipe - Fixed AAPT errors on project export.
  • (765396) - Android: Buildpipe - Fixed AAR plugin and resource issues on exported projects.
  • (779338) - Android: Fixed immersive mode switching off on some KitKat devices when pressing volume buttons.
  • (779877) - Android: Fixed potential crash when using WWW without having Internet permission (also affects use of Unity Analytics).
  • (none) - Android: Fixed potential race condition in atomic access on ARM processors.
  • (689644) - Animation: Fixed scale value getting zeroed when removing scale curve components in AnimationWindow.
  • (762739) - AssetBundles: Fixed Compress Assets On Import setting ignored when switching platform
  • (734216) - AssetBundles: FIxed CreateFromMemory not working with "." in filenames.
  • (790345) - Editor: Fixed New installed Unity command line activation issue.
  • (776528) - iOS: Fixed memory leak when using On Demand Resources.
  • (783713) - MacOSX Editor: Fixed UI text rendering on Radeon HD 4000 series and older AMD GPUs.
  • (763638) - OpenGL: Fixed mislocated fragment shader default float precision. Now also basing the default precision on actual HW capabilities.
  • (784880) - OpenGL: Fixed rendering when Graphics.Blit is being called after WaitForEndOfFrame.
  • (none) - OpenGL: Shader compiler: Added unused global uniform pruning.
  • (780831) - OpenGL: Shader compiler: Avoid temp name collisions.
  • (782514) - OpenGL: Shader compiler: Fixed shader translation bugs.
  • (773226) - Particles: Fixed a case where if OnWillRenderObject renders, it breaks the main scene.
  • (788023) - Particles: Fixed batching issues when using multiple cameras in the same position.
  • (780257) - Physics2D: Fixed a problem where both AreaEffector2D and PointEffector2D scaled-up forces for each additional collider on a rigidbody.
  • (none) - Physics2D: Fixed a problem where constantly changing an Effector2D collider would mean that no contacts were ever processed stopping the effector from working.
  • (754351) - Prefabs: Implemented OnWillSaveAssets callback when applying prefabs.
  • (764711) - UI: Fixed issue with crash due to dirty renderer being in the dirty list after being destroyed.
  • (none) - VR: Fixed an issue with incorrect Render Texture size being used. Most notable with deferred rendering.
  • (none) - VR: VRFocus now respects RunInBackground. Run In Background value of true will now disable rendering if VRFocus is lost.
  • (none) - Wii U: Fixed issues causing known crashes.
  • (none) - Windows Store: Fixed an assert happening during mesh compression.
  • (789538) - Windows Store: Fixed Build & Run for Universal 8.1 solution.
  • (789439) - Windows Store: The maximum amount of characters for short name for tiles will be 40 now.

The patch is available for download on Windows and Mac here.

GameDev News

5. May 2016

 

Introduction

Welcome to the first part of a multipart tutorial series on creating games using the Haxe programming language with the Heaps graphics engine.  Heaps is under development by Nicolas Cannasse, the guy that created the Haxe language in the first place.  In his own words:

Heaps is a cross platform graphics engine designed for high performance games. It's designed to leverage modern GPUs that are commonly available on both desktop and mobile devices. The framework currently supports HTML5 WebGL, Flash Stage3D, native Mobile (iOS and Android) and Desktop with OpenGL. 

Heaps is a very cool library, but not an incredibly well documented one.  So that’s where this tutorial series comes in.  We are going to look at creating 2D then 3D graphics using the Heaps engine.  For this series I will be doing both text and video versions of each tutorial.  The video version of this tutorial is available here.

 

Setting Up Your Haxe Development Environment

This tutorial is going to assume you are using Windows, if you are on another operating system, the steps are going to vary slightly.

First head to Haxe.org/download and download the appropriate Haxe installer for the most reason version.

image 

In my case I am going with the Windows Installer.  Run the executable and say yes to any security messages you receive.  You want to install everything like so:

image

 

Install where ever you like:

image

 

Verify your install worked correctly.  Fire up a command prompt and type haxelib version:

image

 

That was easy, eh?  Next you will probably want an IDE or Editor.  Personally I am using Haxe Develop, a special port of Flash Develop.  This is a Windows only IDE though.  Another option is Visual Studio Code with the Haxe language extensions.

 

Finally we need to install the Heaps library.  It’s not registered with Haxelib yet, so we currently have to install it from Github.  Run the command:

 

haxelib git heaps https://github.com/ncannasse/heaps.git

image

 

And done.

 

Creating a Hello World application

Now let’s create our first application to make sure everything is up and running correctly.  A simple hello world app.

Assuming you are using HaxeDevelop, go ahead and create a new project via Project->New Project

image

 

I created a JavaScript project like:

image

 

Inside our project folder, we need to create a folder for our resources.  I simply created a directory called res.  Simply right click your project in the Project panel and select Add->New Folder...

image

 

Next we need a TTF file, I personally used this font.  Simply download that zip and copy the ttf file into the newly created res directory.  You can open an Explorer window to that directory by right clicking it and selecting Explore.  I personally renamed it to not be all caps, it should work either way though.  If you are using HaxeDevelop, your project should look something like this:

image

 

We have two final bits of configuration.  First we need to text HaxeDevelop that we use the Heaps library, and that the resource folder is named Res.  Right click your project and select Properties

image

 

Next select the Compiler Options tab.  First add an entry to Compiler options with the value –D resourcePath=”res”.  Then add a value to Libraries of heaps.  That’s it, click Apply then Ok.

image

 

Finally some code!  First we need a WebGL canvas for our application to run in.  Simply open up index.html located in the Bin folder and add a canvas.  Your code should look something like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>JSTest</title>
	<meta name="description" content="" />
</head>
<body>
	<canvas id="webgl" style="width:100%;height:100%"></canvas>
	<script src="JSTest.js"></script>
</body>
</html>

 

Now we need to edit our main Haxe code.  By default it will be called Main.hx and it’s the entry point (and entirety) of our program.  Enter the following code:

import h2d.Text;
import hxd.Res;
import hxd.res.Font;
import js.Lib;

class Main extends hxd.App {
        var text : Text;

		// Called on creation
        override function init() {
			// Initialize all loaders for embeded resources
			Res.initEmbed();
			// Create an instance of wireframe.tff located in our res folder, then create a font2d of 128pt size
			var font = Res.wireframe.build(128);
			// Create a new text object using the newly created font, parented to the 2d scene
            text = new Text(font, s2d);
			// Assign the text
			text.text = "Hello World";
			// Make it read, using hex code ( RR GG BB, each two hex characters represent an RGB value from 0 - 255 )
			text.textColor = 0xFF0000;
        }

		// Called each frame
        override function update(dt:Float) {
			// simply scale our text object up until it's 3x normal size, repeat forever
			var scaleAmount = 0.01;
			if (text.scaleX < 3.0) text.setScale(text.scaleX + scaleAmount);
			else text.setScale(1);
			
        }

        static function main() {
            new Main();
        }
    }

Now go ahead and run your code by either hitting F5 or click this button image

You should see:

GIF

 

Congratulations, your first Haxe programming using the Heaps library.  Next up, we will jump into 2D graphics with Heaps.

 

Video

Programming , ,

Month List

Popular Comments

Moai Tutorial Part 5: Mi GUI es tu GUI… or how to make buttons and stuff
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


11. September 2012

 

In this recipe, we are going to show how to create a GUI using Moai.  This functionality isn’t actually built directly into Moai, it is provided by a third party library, so we have to do a bit of setup first.

 

There are a few ways you can get moaigui.  First, it is already included in your moai install in the samples directory.  In the samples folder, look for a contrib folder, in my case it was located at C:\moai-sdk\samples\contrib.  Select the folder moaigui and copy it into your project directory.  Otherwise you can get the newest version using github. To do so ( assuming you have git installed and configured ), open a console window, change directory to your project and type:

git clone https://code.google.com/p/moaigui/

 

This will clone the newest source of the moaigui as a subdirectory in your project.  Alright, that done, on with the code:

 

screenWidth = MOAIEnvironment.screenWidth
screenHeight = MOAIEnvironment.screenHeight
if screenWidth == nil then screenWidth =1280 end
if screenHeight == nil then screenHeight = 800 end

MOAISim.openWindow("Window",screenWidth,screenHeight)

viewport = MOAIViewport.new()
viewport:setSize(screenWidth,screenHeight)
viewport:setScale(screenWidth,screenHeight)

package.path = './moaigui/?.lua;' .. package.path
require "gui/support/class"
local moaigui = require "gui/gui"
local resources = require "gui/support/resources"
local filesystem = require "gui/support/filesystem"
local inputconstants = require "gui/support/inputconstants"
local layermgr = require "layermgr"


local gui = moaigui.GUI(screenWidth,screenHeight)


gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "fonts"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "gui"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "media"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "themes"))

layermgr.addLayer("gui",99999, gui:layer())
gui:setTheme("basetheme.lua")
gui:setCurrTextStyle("default")

function onButtonClick(event,data)
    label1:setText("You clicked the button")


end



function onLessProgressButtonClick(event,data)
    local curProgress = progress:getProgress()
    if(curProgress > 0) then
        progress:setProgress(curProgress-10)
    end

end

function onMoreProgressButtonClick(event,data)
    local curProgress = progress:getProgress()
    if(curProgress < 100) then
        progress:setProgress(curProgress+10)
    end
end


button = gui:createButton()
button:setPos(0,0)
button:setDim(100,25)
button:setText("This is a button")
button:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onButtonClick)
button:registerEventHandler(button.EVENT_TOUCH_ENTERS,nil,onButtonClick)

progress = gui:createProgressBar()
progress:setPos(0,25)
progress:setDim(100,25)
progress:setText("This is a progress bar")

button2 = gui:createButton()
button2:setPos(0,50)
button2:setDim(49,25)
button2:setText("Less Progress")
button2:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onLessProgressButtonClick)
button2:registerEventHandler(button.EVENT_TOUCH_ENTERS,nil,onLessProgressButtonClick)


button3 = gui:createButton()
button3:setPos(51,50)
button3:setDim(49,25)
button3:setText("More Progress")
button3:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onMoreProgressButtonClick)
button3:registerEventHandler(button.EVENT_TOUCH_ENTERS,nil,onMoreProgressButtonClick)
button3:registerEventHandler(button.EVENT_TOUCH_TAP,nil,onMoreProgressButtonClick)

label1 = gui:createLabel()
label1:setPos(0,75)
label1:setDim(100,25)
label1:setText("Click the top button")
label1:setTextAlignment(label1.TEXT_ALIGN_CENTER)

function onPointerEvent(x, y)
    gui:injectMouseMove(x, y)
end

function onMouseLeftEvent(down)
    if(down) then
        gui:injectMouseButtonDown(inputconstants.LEFT_MOUSE_BUTTON)
    else
        gui:injectMouseButtonUp(inputconstants.LEFT_MOUSE_BUTTON)
    end
end

function onTouchEvent(eventType,idx,x,y,tapCount)
    --gui:injectTouch(eventType,idx,x,y,tapCount)
    onPointerEvent(x, y)
        if (MOAITouchSensor.TOUCH_DOWN == eventType) then
                onMouseLeftEvent(true)
        elseif (MOAITouchSensor.TOUCH_UP == eventType) then
                onMouseLeftEvent(false)
        end
end


if MOAIInputMgr.device.pointer then
    MOAIInputMgr.device.pointer:setCallback(onPointerEvent)
    MOAIInputMgr.device.mouseLeft:setCallback(onMouseLeftEvent)
else
    MOAIInputMgr.device.touch:setCallback(onTouchEvent)
end

Run the code and you will see:

image

 

Buttons and bars and labels, oh my!

 

The top 10 lines are pretty much unchanged from earlier tutorials, except I switched to the native resolution of my device, since I am doing a lot more on device testing lately.  Obviously you can change screenWidth and screenHeight to match your preferred settings.  The new code starts at:

 

package.path = './moaigui/?.lua;' .. package.path
require "gui/support/class"
local moaigui = require "gui/gui"
local resources = require "gui/support/resources"
local filesystem = require "gui/support/filesystem"
local inputconstants = require "gui/support/inputconstants"
local layermgr = require "layermgr"

The first line looks a bit daunting, but it is important to realize that Lua doesn’t really understand file directories the way you or I do.  It uses a variable called package.path to determine where to look for source files.  We want to add the moaigui subdirectory, which is what this line does, we append that folder and tell it to include all .lua files within in the path.  We then have a series of require statements for importing various required parts of the moaigui library.  We don’t have to add paths to these values, as moaigui takes care of that for us.

 

local gui = moaigui.GUI(screenWidth,screenHeight)

Create a moaigui GUI object named gui, by passing in the screens width and height.

 

gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "fonts"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "gui"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "media"))
gui:addToResourcePath(filesystem.pathJoin("moaigui/resources", "themes"))

These are a number of essential files for moaigui, these lines make them all available in the resource path. 

 

layermgr.addLayer("gui",99999, gui:layer())
gui:setTheme("basetheme.lua")
gui:setCurrTextStyle("default")

Add a layer to the moaigui layer manager for the gui layer.  It needs to be the topmost layer so it will receive first crack at all the input coming in.  This is why we set it at layer 99999.  Just don’t go creating a layer 100000 now, ok?  We then load a default theme ( we will look at this in a second, but don’t worry, someone else has already done the work for us ) named basetheme.lua, and set the text style to default… if you don’t do this, text wont show up, so do it.

 

function onButtonClick(event,data)
    label1:setText("You clicked the button")
end

function onLessProgressButtonClick(event,data)
    local curProgress = progress:getProgress()
    if(curProgress > 0) then
        progress:setProgress(curProgress-10)
    end
end

function onMoreProgressButtonClick(event,data)
    local curProgress = progress:getProgress()
    if(curProgress < 100) then
        progress:setProgress(curProgress+10)
    end
end

Here we create 3 button click/touch handlers, one for each button we are going to create.  The first simply updates the text on a label, while the next two advance or decrease the progress status on a progress bar by 10%.

 

button = gui:createButton()
button:setPos(0,0)
button:setDim(100,25)
button:setText("This is a button")
button:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onButtonClick)

progress = gui:createProgressBar()
progress:setPos(0,25)
progress:setDim(100,25)
progress:setText("This is a progress bar")

button2 = gui:createButton()
button2:setPos(0,50)
button2:setDim(49,25)
button2:setText("Less Progress")
button2:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onLessProgressButtonClick)


button3 = gui:createButton()
button3:setPos(51,50)
button3:setDim(49,25)
button3:setText("More Progress")
button3:registerEventHandler(button.EVENT_BUTTON_CLICK,nil,onMoreProgressButtonClick)

Speaking of buttons and progress bars, here we create 3 buttons and a progress bar.  There are a few things to note about moaigui.  First off, position is all done by percentages ( which I personally love!  so easy ).  So saying setDim(100,25), sets the dimensions to 100% width and 25% height.  Nice easy way to scale your UI to the device you are running on.  For each of the buttons, we register the click function we just declared in the call registerEventHandler().

 

label1 = gui:createLabel()
label1:setPos(0,75)
label1:setDim(100,25)
label1:setText("Click the top button")
label1:setTextAlignment(label1.TEXT_ALIGN_CENTER)

Oh, and we create a label too, that will update when the user clicks the topmost button.  Using setTextAlignment, we set the text centered.

 

function onPointerEvent(x, y)
    gui:injectMouseMove(x, y)
end

function onMouseLeftEvent(down)
    if(down) then
        gui:injectMouseButtonDown(inputconstants.LEFT_MOUSE_BUTTON)
    else
        gui:injectMouseButtonUp(inputconstants.LEFT_MOUSE_BUTTON)
    end
end

You need to feed UI events in to moaigui, so when the user hits a key, moves the mouse or taps the screen, if you want moaigui to know about it, you need to tell it.  This is done with a series of inject calls, like injectMouseMove() when the user moves the mouse.  If you don’t wire events up as moaigui is concerned, they didn’t happen.  For example, with the current setup, you can type till the cows come home, and your gui will be completely oblivious.

 

function onTouchEvent(eventType,idx,x,y,tapCount)
    --gui:injectTouch(eventType,idx,x,y,tapCount)
    onPointerEvent(x, y)
        if (MOAITouchSensor.TOUCH_DOWN == eventType) then
                onMouseLeftEvent(true)
        elseif (MOAITouchSensor.TOUCH_UP == eventType) then
                onMouseLeftEvent(false)
        end
end

Currently touch support in moaigui is a bit… in development.  So for now we emulate the user using a mouse.  This means when the user touches the screen, we create a mouse pointer event, when the user touches the screen, we create a left click event and when the user releases the screen, be set the left mouse button status to up.  I also got it working by making a few small changes to the moagui code itself, but unless someone specifically requests it, I wont go into them here.

 

if MOAIInputMgr.device.pointer then
    MOAIInputMgr.device.pointer:setCallback(onPointerEvent)
    MOAIInputMgr.device.mouseLeft:setCallback(onMouseLeftEvent)
else
    MOAIInputMgr.device.touch:setCallback(onTouchEvent)
end

Finally, we wire up a callback for each io event we want moai to tell us about.

 

One other thing I mentioned earlier was the theme file basetheme.lua.  This file is located in the /moaigui/resources/themes/ directory, and looks like this:

data = {
    textstyles = {
        default = {
            font = "arial-rounded.TTF",
            size = 44,
        },
        listselected = {
            font = "arial-rounded.TTF",
            size = 14,
            color = {0, 0, 0, 1}
        },
        listunselected = {
            font = "arial-rounded.TTF",
            size = 14,
            color = {1, 1, 1, 1}
        }
    },
    label = {

    },
    button = {
        normal = "button normal center.png",
        pushed = "button pushed center.png",
        hover = "button hover center.png",
    },
    checkbox = {
        normal = "check box.png",
        hover = "check box.png",
        pushed = "check box.png",
        selected = "check box select.png",
    },
    radiobutton = {
        normal = "radio button.png",
        hover = "radio button.png",
        pushed = "radio button.png",
        selected = "radio button select.png",
    },
    editbox = {
        normal = "edit box center.png",
    },
    vertscrollbar = {
        normal = "vert scroll center.png",
        scrollernormal = "vert scroller.png",
        scrollerhover = "vert scroller.png",
    },
    horzscrollbar = {
        normal = "horz scroll center.png",
        scrollernormal = "horz scroller.png",
        scrollerhover = "horz scroller.png",
    },
    vertslider = {
        normal = "vert slider center.png",
        slidernormal = "vert slider.png",
        sliderhover = "vert slider.png",
    },
    horzslider = {
        normal = "horz slider center.png",
        slidernormal = "horz slider.png",
        sliderhover = "horz slider.png",
    },
    progressbar = {
        normal = "progress bar center.png",
        bar = "progress bar.png",
        mask = "progress bar mask.png",
    },
    textbox = {
    
    },
    widgetlist = {
        selected = "listselected",
        unselected = "listunselected",
    },
    cursors = {
        default = {

        },
    },
}

return data

You can easily make small changes to your UI look and feel by changing this file.  As you can see, I vastly increased the default font size to improve visibility on my phone.  You can also change the button images, and other UI elements, by altering their images in the /moaigui/resources/gui directory, while additional or different fonts should go in the moaigui/resources/fonts folder.

 

In the next exciting tutorial we will put our new found GUIness to work.

 

Now you know, and knowing… is half the battle. Or was that a quarter?  No, no, definitely half.

 

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments