Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

17. December 2015

 

In a project that sounds disturbingly similar to VRML of days gone past, Mozilla have launched AFrame, a technology intended to bring VR to the web without requiring WebGL programming knowledge.  An attempt to make a 3D Oculus friendly web browsing experience ( think cyberspace/ the matrix ) easy to create.

 

From the announcement blog:

A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone (Android support coming soon), and the Oculus Rift.

We created A-Frame to make it easier to create VR web experiences. WebVR has shipped in builds of Firefox and Chromium since the summer of 2014, but creating content for it has required knowing WebGL. The WebGL scene is unbelievably talented and has created many mind-blowing VR experiences in the last year, but they are a small subset of the full web dev community. There are millions of talented developers who do not know WebGL. What if each of them could create and share VR experiences on the open web?

A-Frame is designed to be familiar to those web developers. It wraps the power of WebGL in HTML custom elements, so creating a high performance VR experience is as simple as:

<html>
<head>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="https://aframe.io/aframe/examples/_skies/lake.jpg"></a-sky>
<a-model src="https://aframe.io/aframe/examples/showcase-composite/sculpture.dae" position="0 0 -2"></a-model>
<a-image src="https://aframe.io/aframe/examples/showcase-composite/portland.png" width="1" height="0.35" position="-2 1.2 1"></a-image>
</a-scene>
</body>
</html>

A-Frame ships with powerful and concise “primitives” for common use cases such as 360-degree videos, images, models, skies, and more. Primitives make it easy to block out a scene in minutes. Primitives can also be combined with lighting, animation, sound and interactivity. For the full list of primitives included in A-Frame 0.1.0, see the A-Frame documentation.

For users who want deeper control and flexibility, A-Frame is built on an entity-component system which provides accessible components for lighting, materials, re-usable assets, and more. This pattern is common in the game development world, and is the backbone of A-Frame. Visit the A-Frame documentation to learn more about the entity-component system.

A-Frame is ultimately just the DOM, so developers can also manipulate it with standard JavaScript methods, such as:

var scene = document.querySelector('a-scene');
var cube = document.createElement('a-cube');
cube.setAttribute('color', 'red');
scene.appendChild(cube);

A-Frame is new. The 0.1 version has several known issues (Android rendering textures as black, for example), and the API will change over the next few months as we get feedback and open source contributions. Our hope is that early adopters find it as fun as we do, and join us in improving A-Frame over time.

To get started with A-Frame, visit aframe.io, view the examples and grab the code. The FAQprovides additional details.

To discuss A-Frame with our team and fellow developers, hop into the A-Frame Slack channel. Feedback is welcomed at @aframevr. As are bug reports and pull requests. For the latest overall WebVR setup instructions, visit MozVR.com.

As a kid the grew up on dreams of cyberspace thanks to the likes of Neuromancer, Snow Crash and Shadowrun, I’m genuinely excited by this concept.  Then again, I was excited by VRML too and we know how that turned out.

GameDev News ,

17. December 2015

 

Unreal have just released a new complete game + tutorial Match 3 Game for Unreal 4.10.  It is currently available for download in the learn section of the Epic Game Launcher.

image

 

This is actually a pretty impressive example project as it illustrates:

  • UMG UI Graphics
  • Paper2D Toolset
  • Blueprint and C++ Code
  • ads
  • acheivements
  • in app purchases
  • leaderboards
  • analytics

 

So basically most of the functionality required of a modern 2D game.  You can learn more about the release here or download the sample game on the Android store (iOS coming soon).  The entire project weighs in at about 120MB.  You can also learn more about the sample (and other Unreal Engine things) in the Unreal Engine live stream video:

GameDev News

17. December 2015

 

The recently rebranded Xenko game engine just announced the release of version 1.5.  New animation funtionality, a new profiler, runtime physics debug shapes and UI improvements top the new features.  Here is the highlight list  from the release:

Skeleton asset

A new Skeleton asset (*.xkskel) has been introduced. Both models and animations now hold a reference to a skeleton. This allows to reuse the same skeleton definition in multiple assets and to retarget models and animations to different skeletons.

Skeletons can be created alongside other assets, when importing an FBX file or other model format.

Root motion support for models, cameras, lights, etc.

Animations now apply root motion if they have no skeleton, or the ‘Root Motion’ property is enabled on the animation asset. The animation will then move the entity itself, instead of the skeleton’s root bone. This is especially useful to import animations of lights, cameras or unskinned models, without the need to bind them to the bones of a skeleton.

The FBX importer will now also import animations of various camera parameters (near-plane, far-plane, field of view) and apply them to the CameraComponent of the animated entity. More properties may be supported in the future.

New animation update system

The animation system now internally uses a new UpdateEngine to update objects. This allows us to animate arbitrary properties of entities, while accessing them in a highly efficient way. It will be the foundation for a future animation curve editor inside the GameStudio.

The new ‘Animated Properties’ sample demonstrates how to create animations of any property from a script.

Simple Profiling system

It is now possible to visualize profiling information of all the game systems and custom profilers directly within your running games. To get started, use the Game Profiler built-in script, attach it to an entity and when the game is running press LCtrl-LShift-P.

Physic debug shapes at runtime

It is now possible to enable the rendering of physics collider shapes during runtime. The debug shapes are normal entities and they must be enabled for each physics shape that requires it. The best way to start with this feature is to use the Physics Shapes Render built-in script and attach the script to any entity that has a Physics Component and when the game is running press LCtrl-LShift-P.

Asset View

The Asset view has been improved to help you better organize and manage your assets.

New ‘view options’ menu

The view options are gathered in a single menu accessible from the asset view toolbar.

You can display all the assets in the current folder only, in the current folder and its sub-folder. The third option let you display the assets and the sub folders.

You can also sort your assets by name, order, type or modification date.

New asset filter bar

With the new asset filter bar, you can filter your assets by name, tag, type or a combination of those. Each ‘filter tag’ can be disabled by a single click or removed from the active filters.

To add a filter, type in the filter bar and matching filters will be displayed. Click on the one you want to add it to the list of active filters.

Only the assets matching the active filters will be displayed in the asset view. Note that type filters are inclusive, while name and tag filters are exclusive.

Folder support in asset view

If the ‘Assets and folder in selected folder’ options is selected, the first level of sub-folder will be displayed in the asset view. You can drag and drop assets inside them. You can also copy/paste complete folder structure.

 

Copy-paste assets with their dependencies

You have now the ability to copy assets with their dependencies. To do that use the new entry ‘Copy with dependencies’ from the asset view context menu, or press Ctrl+Shift+C.For example, if you copy/paste a model with its dependencies, you will get a copy of this model along with a copy of all its dependencies (skeleton, materials, textures)

Border and Center support in sprite sheet editor

For ‘Sprite2D’ sprites, you can move the position of the center by selecting the icon in the toolbar of the sprite editor. Grab and move the cross to the desired position.

For ‘UI’ sprites, you can change the borders by selecting the icon in the toolbar of the sprite editor. You can then resize each border (left, top, right and bottom) separately in the same way as the texture region, by grabbing and moving one of them. Note that the icon lets you ‘lock’or ‘unlock’ the sprite borders while resizing the texture region.

New built-in scripts

We added a few more built-in scripts with this release such as an FPS camera script and First player controller script. To use them, just click on “New Asset”, “Script source code”, select the desired script and attach it to an adequate entity.

Precompiled Sprite Fonts

Font rights are quite restrictive and it is quite common that only some persons of the project have access to the font files. This was preventing some people to build the game. To solve this problem, we created a new type of asset, the precompiled sprite fonts. It is an asset taking as input an image and containing all the glyph information required to render the set of character specified. Inside your games you can used it exactly like a standard sprite font. To generate a precompiled sprite font, the owner of the original font file just have to right click on an existing static font and choose “Generate Precompiled Font”.

 

Full release notes are available here.

GameDev News ,

17. December 2015

 

RoboVM, the technology the enables you to deploy Java based games and applications on iOS just released version 1.12.  The major features of this release are support for iOS 9.2 as well as experemental support for Apple’s new tvOS.  From the announcement:

 

iOS 9.2 Support

In the meantime, Apple also released iOS 9.2, which comes with a few minor API additions. Check out our API diffsto find out what’s new!

Bug Fixes & Enhancements

As always, we squashed bugs, improved performance and added some bells and whistles. Here are the most important changes:

  • The simulator will be brought to the front when you resume an app during debugging.
  • You can now select on which connected Apple device you want to run your app
  • Added @Availability annotations to all iOS APIs indicating the supported platforms (tvOS or iOS) and versions. In a future release we will emit compiler warnings and/or errors if you use unsupported APIs on a specific platform.
  • Added a setting in IntelliJ IDEA/RoboVM Studio to allow you disabling automatic run-configuration generation on project imports.
  • Updated the default launch images to look even more awesome.
  • Revamped the Eclipse project wizard. You can now select the type of project via the template dropdown. You now also have to explicitely specify a package name.
  • Added bindings to JavaScriptCore.
  • Android application id is no longer hardcoded in templates.
  • Fixed a GC issue when collecting soft/weak references.
  • Fixed a memory leak in IntelliJ IDEA/RoboVM Studio that would slow down the IDE to a crawl.
  • Fixed an issue in the debugger when dynamic proxies are used, e.g. in Retrofit code.
  • Fixed synchronization issues between IntelliJ IDEA/RoboVM Studio and Xcode when adding/removing@IBOutlet and @IBAction fields and methdos.
  • Fixed NetworkInterface#isUp().
  • Improved handling of primitive types in lambda compilation by removing unnecesssary boxing.
  • Made the conservative treeshaker the default if nothing else is specified. Previously, not using the tree shaker was the default.

GameDev News

16. December 2015

 

Today Ludei released a new version of their game focused HTML5 app wrapper Cocoon, now called Cocoon.io and based on Cordova.  I was beginning to think Cocoon was no more, so it is nice to see a new release.

 

From the announcement:

Cocoon.io has been designed from the ground up to try to include many of the cool features users have been demanding for quite some time. Let’s review the main advantages and differences of Cocoon.io:

      • The main structural change is that Cocoon.io is completely based on Cordova. When Ludei started working on HTML5, Cordova wasn’t as widespread as it is today. It also was completely tied only to the system webview. Cocoon has always defined itself to try to overcome some of the original Cordova limitations but it was not built on top of it. Cordova is the de facto standard in the industry to setup HTML5 to native project compilations and we have decided to embrace it and contribute to the community with our approach in Cocoon.io. This new Cocoon mixes all the benefits that have made Cocoon great plus all the advantages of Cordova.
      • Select the best webview runtime for your needs: There are different needs when it comes to HTML5 games and apps, and the new Cocoon is designed to allow you to easily select between the best webview runtimes depending on your needs. We still provide our state of the art runtime called Canvas+ specifically built and well suited for games based on 2D and WebGL canvas. We also have our full DOM support using WebView+, an advanced webview based onChrome for Android and Safari for iOS. Cocoon.io even allows to select the regular systemWebView for those developers who still want to use it.
      • Redesigned UI/UX to simplify and improve the user experience. We really hope you like it. The user feedback has been very positive so far and we will continue to improve it in the future.
      • Easy Cordova plugin setup as Cordova has tons of plugins to select from. Cocoon’s new search engine plus easy to use UI will certainly help you navigate through this sometime tedious process. Of course, you can add your own plugins to your projects!
      • Github integration to tell Cocoon.io to compile your projects directly from the content of a git repository. A very convenient way to ease the process of developing, committing/pushing and compiling your apps.
      • Let Cocoon.io help you with the signing of your final native apps. Signing your final projects both on iOS and Android can be a bit tedious. If your provide your signing keys, Cocoon.io will be able to compile a final signed app ready to be uploaded to the stores.
      • Login with different types of accounts like Google or Facebook accounts for your convenience. Of course, you can still use your current Cocoon user and password or even create a new account.
      • Web2App: We are trying to redefine the ease of use to create native hybrid apps based on responsive websites. We will provide great plugins to create native apps based on a website in order to create a compelling native app with all the advantages of mobile applications regarding performance and user experience. Directly from your responsive website URL!

GameDev News

Month List

Popular Comments

Moai Tutorial Part 2: Loading and displaying a sprite
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


24. August 2012

 

When we last visited Moai land things were getting started, hot and pink; but just a bit boring.  Let’s spice it up a bit with a sprite that totally isn’t the logo from Watchmen!

 

screenWidth = MOAIEnvironment.screenWidth
screenHeight = MOAIEnvironment.screenHeight
print("Starting up on:" .. MOAIEnvironment.osBrand  .. " version:" .. MOAIEnvironment.osVersion)

if screenWidth == nil then screenWidth =640 end
if screenHeight == nil then screenHeight = 480 end

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

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

layer = MOAILayer2D.new()
layer:setViewport(viewport)

MOAIRenderMgr.pushRenderPass(layer)

sprite = MOAIGfxQuad2D.new()
sprite:setTexture("smile.png")
sprite:setRect(-200,-200,200,200)

prop = MOAIProp2D.new()
prop:setDeck(sprite)
prop:setLoc(0,0)
layer:insertProp(prop)

MOAIGfxDevice.setClearColor(1,1,1,1)

 

And when you run it:

 

image

 

At least half of this code we covered in the prior tutorial, so we will skip right past that and jump in to what’s new:

 

sprite = MOAIGfxQuad2D.new()
sprite:setTexture("smile.png")
sprite:setRect(-200,-200,200,200)

 

Our “sprite” is in fact a MOAIGfxQuad2D, which may at first sound like a remarkably more confusing name than sprite.  You see, behind the scenes Moai ( and pretty much every other modern engine ) is actually working in 3D, not 2D.  It’s just the way GPUs work these days.  So when you see a 2D library, it is actually faking 2D by creating a 3D scene and ignoring one of the D’s.  As part of the process, you don’t really have sprites anymore, instead you have textured quad’s ( 4 vertices rectangles ) that are parallel to the camera.  So, we create a rectangle that is aligned to the camera and draw our texture on top of it, giving the illusion of being a simple sprite or image, but making the GPU happy at the same time.  So… that’s why it’s called a MOAIGfxQuad2D instead of say… a sprite.

 

Anyways, we create a new MOAIGFXQuad2D, and set it’s texture to the file name we want to load onto it.  Oh yeah, you need an image to display, and you need to copy it to the same folder as main.lua.  While we are on the topic of “oh yeahs!'”, save the above code to a file named main.lua!  Once we load our texture, we are going to size and position our quad in a single call, setRect().  Coordinates are relative to the center of the screen, so position 0,0 is exactly in the middle of your screen.  So when we say –200,-200, we are saying the top left corner of the rectangle is 200 pixels to the left of center and 200 pixels above center.  While the other 200,200 is saying the bottom right corner of the quad is 200 pixels to the right and 200 pixels down from the center point.  End result, we create a textured quad centered to our screen that is 400x400 pixels, so I suppose that is technically a square.  By changing the values in setRect, you can reposition the sprite ( for example (-400,-200,0,-200) would move the quad 200 pixels to the left ) as well as scale it ( (-100,-100,100,100) would scale it to half it’s current size ).

 

prop = MOAIProp2D.new()
prop:setDeck(sprite)
prop:setLoc(0,0)
layer:insertProp(prop)

Now we create a MOAIProp2D.  Remember in the last tutorial when I said layers are made up of stuff that are composed together to create the frame?  Well a MOAIProp2D is one such example of “stuff”.  What then does setDeck do?  In the simplest term, think of a “Deck” as a data source.  An image or a sprite sheet ( or texture atlas in Moai parlance ) are both examples of decks.  Think of a Prop is an *instance* of a deck, or perhaps most accurately instanced from a deck.  To make life easier on yourself, just think of a deck as the data source for a prop.  I’ll be honest, I'm not a huge fan of the metaphor they choose, but then if you read their explanation, neither are they.  Next you position the prop within the layer, keeping in mind 0,0 is dead center.  Finally, the prop is inserted into the layer via insertProp(). To finish things off:

 

MOAIGfxDevice.setClearColor(1,1,1,1)

 

I like pink as much as the next man, but sometimes I like white a whole lot more.

 

That, is how you display a sprite ( erm, Prop ) on screen.

 

But wait!  There’s more…

 

You do however have a couple options.  You see, loading from file can be a bit expensive, especially if you are using the same image over and over.  So, instead of loading the sprite from disk in the setTexture call, lets instead load it from an Image already loaded and resident in memory.

 

texture = MOAIImage.new()
texture:load("smile.png")

sprite = MOAIGfxQuad2D.new()
sprite:setTexture(texture)
sprite:setRect(-200,-200,200,200)

 

Here we create a MAOIImage in advance, load the image file into it, then use that in our setTexture() call.  Now instead of loading from disk, it loads from memory, which is substantially quicker.  One thing should be pointed out here, that image is in system memory and needs to be copied to the GPU each time it is drawn.  Don’t worry, this makes sense and is completely normal, but on occasion can be a bit hard on performance.  If you have an image that is drawn a lot, like say, the player sprite or a static part of the HUD, you may want to cut the whole copy to video memory out of the equation and store your sprite in video memory.  MOAI has a way to do this as well.

 

texture = MOAIImageTexture.new()
texture:load("smile.png")

 

Basically you just use MOAIImageTexture instead of MOAIImage.  Keep in mind, video memory is a constrained resource, so don’t do this lightly.  Also keep in mind, changing the item in video memory effectively ruins any point of it being there in the first place, so only use MOAIImageTexture if your image isn’t changing often.  I would generally recommend you go with normal MOAIImage until you have a good reason not to.  Be careful, your optimization can easily cause performance to get worse!

 

 

And done…  you now know how to draw an image on screen, one step closer in our master plan to take over the wor… er, create a game.  Stay tuned for the next exciting episode where we demonstrate how to successfully raise a peasant army… or handle touch events.  One of those two topics, I’m not sure which yet.

 

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments