Posts Tagged ‘tutorial’

Using AIR Gamepad in your Flare3D game

Thursday, August 28th, 2014

Walk through our deferred lighting demo using Adobe AIR Gamepad!

Walk through demo using Adobe AIR Gamepad

turning your mobile device into a joystick with Adobe AIR Gamepad

One of the latest features released with AIR was Adobe AIR Gamepad. Basically, if you have adobe AIR installed in your Android phone or tablet you can use it as a joystick in your game. The integration is really easy (check out Adobe’s tutorial here) and provides you with a lot of possibilities such as adding the joystick functionality for your game or else you can use it as a second screen for interactive applications.
To play the demo you must follow the following steps:
Important: Flash Player 14 (or higher) is required

  • Open the demo here
  • Launch Adobe AIR application in your phone or tablet.
  • Shake your device to enable AIR Gamepad.
    AIR Gamepad

    AIR Gamepad enabled in your device.

     

  • Type into the demo the code that appears in your device and press “connect”

    Type the code that appears in your device.

    Type the code that appears in your device.

  • Once you get connected your device will vibrate and you will see on the device screen the touch areas for walking and looking around into the demo.

The demo

This demo uses our “Deferred lightning” example. You will find the demo’s source code at Flare3D Labs in a new folder called “gamepad” which has been added into src.
The VirtualPad class receives a gamepad’s reference and handle the input in the same way. This class was made to detect traditional touch events, but with a few changes was adapted to work with AIR Gamepad. As a complementary information you can checkout AIR Gamepad docs here.

Download the demo

Interpreting the input

AIR Gamepad recognizes Multi Touch and gestures input and send them to your application. So you can catch the input as if your app would be running in the mobile device. Once the connection between the app and the device has been established you are able to skin the device’s screen sending an image. In our demo, we are sending an image that shows a reference indicating the touch areas on to the screen.

 

It’s time to play! :-)

 

 

 

 

Football inspires! Bring life to your inspiration with Flare3D

Friday, July 11th, 2014

BannerBlog_Elsa_Football

On July 13, the world’s eyes will turn to Brazil for the final match of the 20th FIFA World Cup, the planet’s biggest football tournament. Inspired by the passion of fans from all over the world, Flare3D Team, being also big football fans, created this example “we had such a great time developing it that we decided to share it with you”. The game shows how to implement the basis for any other penalties game. You can download the full source code and assets here.

The Game is simple, drag the ball to define power and direction. The shooting height is defined depending on the position you pick up the ball (picking the ball  in the bottom you get a height shot).  The game use physics and is really simple.

Get Adobe Flash player

This example works with a custom Dev Build library (included with the example), this library was compiled only for development and testing purposes. If you want the latest and stable version of Flare3D you can get it from our website.

Take this example as inspiration, we will be happy if you take the challenge to build your own football game, adding moves, headers,dribbling, etc…

Download the full example

We’d like to create a gallery of football related themes, games and then showcase your creations with us and be part of the Flare3D footballmania. Team up with Flare3D 😀

Step by step – How to use Flare3D and Oculus Rift VR

Tuesday, October 22nd, 2013

 

In this tutorial, i’ll show you how to get a minimal Flare3D + Oculus Rift VR application:

Oculus VR’s Oculus Rift could be the device virtual reality needs to finally break into the mainstream, instead of just being something for tech-frenzied neophiles. The Oculus Rift is a virtual reality headset that can display stereoscopic 3D and offer head tracking to let you look around inside virtual worlds.

After a successful Kickstarter campaign Oculus VR put together a development kit that’s being slowly shipped out to customers, with sights on a consumer-friendly version in the future. In a few years, everyone might have their own Oculus Rift and use it to play video games and virtually tour other locations.

Creating the project:

First of all, we need to connect the Oculus to the PC, make sure to connect everything before turning it on.
You have to set the resolution to 1280×800 and duplicate the screens. Once everything is connected, turn the Oculus on.

Create a new AIR (AIR SDK 3.8+) project using Flash Develop or Adobe Flash Builder(4.6 or higher) and integrate it with Flare3D and the Oculus Rift library and Native Extension. I’ll show you the steps to do it using Adobe Flash Builder 4.7:

1- First, we need to create a new ActionScript Project:

New ActionScript project in FlashBuilder

 

2- Then we need to give our project a name and select the proper SDK to use. If you installed your AIR SDK properly, you should see something like this (don’t forget to check the “Desktop (runs in Adobe AIr)” option):

project settings

Open the Project Properties and go to Action Script Build Path in the menu:

project settings - External libraries

From this screen you can add any SWC files your project might need. In this case, we have to add Flare3D’s SWC. To do this, just press Add SWC and browse to the SWC file that came with your Flare3D distribution package.

To incorporate the head tracking, we have to add the Oculus swc and ane libraries to our project. You can download these here.

Now we have to add the Oculus SWC. To do this, press Add SWC again and browse to oculus-ane-master/ane/as3/bin/OculusANE.swc in the package you just downloaded.

Now, go to the tab Native Extensions:

project settings - Adding native extensions (ANEs)

Press Add ANE and navigate to oculus-ane-master\ane\bin\OculusANE.ane in the package you just downloaded.

Then press OK to close the window.

 

3- Just like when embedding a Flare3D project using HTML, we have to tell your AIR app that we need “direct mode” rendering. There’s also a bunch of other settings we need to configure. All this can be configured from our application XML file. In this particular case, it’s called “Flare3DAndroid-app.xml” but it will depend on the name you chose for your app.
So, let’s open it and add/change for the following lines:

 

And finally, let’s write some code:

Include this class: OculusScene3D.as, and the FLSL filter to emulate the Oculus: distortion2.flsl

Now, open your main class file and write something like this:

 

Make sure everything compiles correctly and press F11 to start debugging. You should see something like this:

Flare3D + Oculus Rift demo

 

Now put on your oculus, and enjoy! :-)

 

Or.. you can download the complete example project for Flash Builder or for Flash Develop.

EXTRA: Oculus Rift Calibration:

Everybody’s head is a little bit different. One fairly subtle, but extremely important ‘per user’ variable is the IPD (Interpupillary Distance) – which is different for everyone. Get this wrong, and it can cause eye-strain and nausea. 😕

Oculus SDK include an integrated IPD Measurement and Adjustment tool, you can download it here.

Make sure you have your Rift turned on and the resolution set to 1280×800, then go ahead and launch the utility.
It looks like this:

4.1

Use the new button to create a new profile. Give your profile a name. Specify your gender and which eye cups you’re using. With your Oculus Rift ready, hit the Measure button to launch into the IPD measurement tool. Follow the on-screen prompts to measure your IPD. The utility will automatically input the value into the box when you finish.

 

UPDATED: If you want to learn more about Oculus Rift development, you can also  check out this topic in our forum. You’ll find extra information and a new updated example made by Tom Goethals.

 

Nyanmizate! with Flare3D Publish templates

Thursday, June 27th, 2013

NyanFlare3D

Aren’t you bored that your published content looks always the same?

Flare3D brings to you the solution!

Official NyanFlare3D Template is available to download NOW! But be fast, there are only limited units available.

Download the original NyanFlare3D template for FREE!! And If you click twice on download link in the next five minutes, you will get an extra copy of Nyan Flare3D Template to share it with friends absolutely FREE!!

 

 

Don’t miss this incredible offer! Download now “NyanFlare3D Publish Template” and bring  your work to life!

Follow these instructions to install and use this template in 6 easy steps:

1 – Download the template from here.

2 – Unzip the file and copy the folder “Nyancatizate!”  into the Flare3D IDE’s “Templates” folder (To locate it  Open Flare3D IDE and go to File->Application Files…)

3 – Load your 3D asset into Flare3D IDE (or create some object from “Create” menu)

4 – Select the 3D object that you want tu publish and change it name to “cat”

5 – Select “Niancatizate!” option at “Publish Template” combo into “Publish” panel.

6 – File->Publish (or Ctrl+ENTER)

… and that’s all! Enjoy it! :-)

PS: Creating a custom publish template is an easy and funny task! Take Niancatizate! as reference and create your own template!