Hi,

After someone came up with a problem in the #unrealengine chatroom on irc.freenode I decided to task myself with solving the issue.

This issue was spinning a mesh with blueprints. For this tutorial I will work out of the basic startup (minimal_default.umap).

Step 1.


Setting up the file

Launch Unreal 4.
When asked for a project select your project (any map with a mesh will do) or use the default startup map with the chairs as shown here :

Unreal 4 basic map

This is the startup map with minimal items for Unreal 4. Click for a larger image


Change the static mesh transform type

Step 2.

The first thing you will want to do is set an option in the mesh you want to spin. Select the mesh you want to use. This will let you access the mesh properties on the right hand side. You will see an option in the Transform section shown below that will be set to “static” by default. Change this to “moveable”.

Unreal 4 static mesh properties

Static mesh properties on the right hand context menu let’s you change the transform type to moveable. Click for larger image.


Setting up the blueprint

Step 3.

For this tutorial we will use the Level Blueprint as an example but this can be easily transfered to a Class Blueprint for use on multiple meshes.

Open the Level Blueprint.

Unreal 4 open level blueprint

In the upper menu, open the Level Blueprint

Select the mesh you wish to rotate. This will give you the context within the blueprint to add a reference of the static mesh. Right-Click in the Blueprint and select “Add Reference for Chair”. This will change based on which mesh you have selected.

Unreal 4 Blueprint

Selecting an item gives you a context sensitive menu within Blueprint.

Now you have a reference for the Chair. Next we will add a function that changes the rotation. Meshes have a value called a Rotation that give you control over pitch, yaw and roll.

In the “Find a node” search bar type “Add Local Rotation”. This will give you the node to drag-and-drop onto the blueprint. Go ahead and drag it over.

Unreal 4 add local rotation

Drag-and-drop the “add local rotation” node onto the blueprint.

Now we need to connect the node to the reference of the Chair mesh. Drag the connector from the Chair to the target of the Add Local Rotation node. This will create a new node that defines a Static Mesh Component as a mid-reference between the Chair node and the Add Local Rotation node.

Unreal 4 connect to add local rotation

Connecting the Chair reference to the add local rotation node creates a new sub-reference type that defines it as a static mesh component

Let’s go ahead and setup the Add Local Rotation node. In this example we will set the Z variable of the delta rotation value. This is going to add the value of Z to the current rotation value. Set the value to 5.0 or any value you want. The value is in degrees of rotation. Now we are ready for the final step.


Setting up the tick timer

Step 4.

For the final step we need to tell the blueprint how often to rotation the mesh by 5.0 degrees. For this we will simply use the Event Tick. You could use another method with a counter but for this purpose the Event Tick is good enough. (Please read the first comment after this tutorial for a detailed explanation as to why Event tick may not be right for your project)

In the Node Browser type “Event Tick”. Drag the node onto the blueprint. You can also right-click in the empty space of the blueprint and use the menu to add the event from there.

Unreal 4 Event tick

The Event tick fires rapidly on each frame whilst the engine is active and serves many useful purposes.

Connect the white Exec arrow of the Event tick node to the white Exec connector of the Add Local Rotation node. This will execute the rotation on every tick of the engine. Once this is done we are finished ! Click “Compile” and don’t forget to save! Press Play to see your nice new spinning chair.

The final blueprint will look like this :

Unreal 4 Final Blueprint

This is how your completed blueprint should look.


Video example

 

Hi,

So after years waiting for the next installment of the fantastic Unreal engine, it seems that Scaleform and Epic have left the use of Scaleform as middleware that the UE4 developers need to purchase seperately. This really puts a damper on my Scaleform adventures currently and I am thinking about reverting to Unreal 3 just to get back upto scratch and develope some shiny new interfaces.

It looks as if the new Unreal engine has become modular like the Apple store in that you buy the initial product and pay for the extras as you go. As far as Scaleform goes for now I am in limbo… if anyone comes by this post and wants to hire me though I could use the work ;)

Tagged with:
 

Download xLabel Flash Label Class for UDK Scaleform

Current Version : 0.2b

 — last updated 18th August 2010 —

This Flash Label class extends the Scaleform GFX Label component to add the following functionality :

  • Set Font Size – You can now set the font size through the component inspector and through actionscript
  • Initialize on textChange – The component will automatically re-initialize when the text changes due to actionscript or localization from unrealscript.

:: Installation ::

- I STRONGLY RECOMMEND creating a copy of the original Label component however this is not a requirement if you add the class path to the component.

 - Make sure the paths for the class is setup for your project ( right-click component -> properties -> Class ) and simply add your Label components.

- To catch the event in flash / actionscript use the example below :

 

 

:: Code ::

 

/*
xLabel class  v0.2b by Marc Rogerson - http://www.f00n.com/unreal
Feel free to improve this simple class. 

:Installation:
You can keep the class anywhere in your class file structure but I have setup the class to run out of the com.f00n class folder.
If you wish to move it you will need to alter the class constructor to relate to the new file location

- Create a copy of the Scaleform GFX Label Component in your flash library named xLabel (you can change this or use the original Label component if you update the class constructor).

- Right-Click the component and click Properties. Set the Class Path to where you installed the class

- Right-Click the component again and click Component Definition. Make sure the class is set to the new xLabel class and click ok for the component inspector properties to update.

- Make sure the flash document knows where the class folder is. File -> Publish settings -> Flash -> Actionscript 2.0 Settings.


:Usage:

- Add a component to the stage ( in editor or through actionscript )

- Set the properties in the component inspector or through actionscript / unrealscript at runtime

- Catch the TEXT_CHANGE event using this code example :

myLabel.textChange = function() { //your code here }
myLabel.addEventListener("textChange", textChange);

	
** : Update 0.2b Changelog : **
- added support for Word Wrap. If WordWrap is enabled it will use the _maxWidth to size the textfield.
- added support for Max Width to use in conjunction with Word Wrap
- over-ride on draw() function to include re-initialization

*/

import gfx.controls.Label;
[InspectableList("disabled", "visible", "textID", "bindingEnabled", "enableInitCallback", "autoSize", "labelFontSize", "setWordWrap", "setMaxWidth")]
class com.f00n.xLabel extends gfx.controls.Label {
	//define a labelFontSize 
	private var _labelFontSize:Number;
	private var _wordWrap:Boolean;
	private var _maxWidth:Number;
	
	private var dispatchEvent:Function;
	
	public function xLabel() {
		super();
		_labelFontSize = labelFontSize;
		initLabel(_text, this);
	}
	
	public function initLabel(lbl:String, o:MovieClip):Void {
		
		var txt_format:TextFormat = new TextFormat();
		txt_format.size = _labelFontSize;
		
		o.textField.wordWrap = _wordWrap;
		
		o.textField.setTextFormat(txt_format);
		
		if(_wordWrap==false) {
			//added extra pixel space for filters
			o.textField._width = textField.textWidth + 20;
			o.textField._height = textField.textHeight + 5;
		}else{
			o.textField._width = _maxWidth;
			o.textField._height = textField.textHeight + 5;
		}
	}
	
	[Inspectable(name="Font Size", type=Number, defaultValue="60")]
	public function get labelFontSize():Number { return _labelFontSize; }
	public function set labelFontSize(value:Number):Void {
		if(value >= 1) {
			_labelFontSize = value;
			initLabel(_text, this);
		}
	}
	
	[Inspectable(name="Word Wrap", type=Boolean, defaultValue=false)]
	public function get setWordWrap():Boolean { return _wordWrap; }
	public function set setWordWrap(value:Boolean):Void {
		if(value == true || value == false) {
			_wordWrap = value;
			initLabel(_text, this);
		}
	}
	
	[Inspectable(name="Max Width", type=Number, defaultValue=0)]
	public function get setMaxWidth():Number { return _maxWidth; }
	public function set setMaxWidth(value:Number):Void {
		if(value>=0) {
			_maxWidth = value;
			initLabel(_text, this);
		}
	}

	public function get text():String { return _text; }
	public function set text(value:String):Void { 
		isHtml = false;
		_text = value; 
		if (textField != null) { textField.text = value; }
		alignForAutoSize();
		initLabel(_text, this);
		super.dispatchEvent({type:"textChange"});
	}
	
	private function draw():Void {
		if (sizeIsInvalid) { 
			alignForAutoSize();
			_width = __width;
			_height = __height; 
		}
		constraints.update(__width,__height);
		initLabel(_text, this);
	}
	

}

 

Tagged with:
 

Flash Cursor Class ( as2.0 )

On 06/30/2010, in Flash, flash classes, by Marc

Hi

Download Cursor.as

This is a flash cursor class I made that utilises the flash PopUpManager class in order to make the cursor stay on top of any other PopUps that are created through scaleform gfx CLIK components.

For example : The cursor would not be on top of a dropdown menu when it was opened.  Regular DepthManager usage was unable to be utilised as it requires a UI component from Flash to work.  However adding a regular flash component when scaleform components are being used conflicts with their classes.

:Installation: You can keep the class anywhere in your class file structure but I have setup the class to run out of the gfx.controls class folder. If you wish to move it you will need to alter the class constructor to relate to the new file location

:Usage:
- In actionscript you need to instantiate the class using - 
     var myCursor = new Cursor("myLibrarySymbolName"); 
- You can enable and disable the cursor using - 
     myCursor.enable(); 
    myCursor.disable();
- The _disabled Property (boolean) is available  to check if the mouse is enabled -
     if(myCursor._disabled==true) return;

- Code -

/*
Cursor class by Marc Rogerson - http://www.f00n.com/unreal
Feel free to improve this simple class. 

:Installation:
You can keep the class anywhere in your class file structure but I have setup the class to run out of the gfx.controls class folder.
If you wish to move it you will need to alter the class constructor to relate to the new file location

:Usage:
- In actionscript you need to instantiate the class using -

	var myCursor = new Cursor("myLibrarySymbolName");
	
- You can enable and disable the cursor using -

	myCursor.enable();
	myCursor.disable();

- The _disabled Property (boolean) is available  to check if the mouse is enabled -
	if(myCursor._disabled==true) return;
	


*/


import gfx.managers.PopUpManager;


class gfx.controls.Cursor extends MovieClip {
	//public vars
	public var _disabled:Boolean = false;
	//private vars
	private var mCursor:MovieClip;
	private var libraryMC:String;

	//instantiate the class
	public function Cursor(linkage:String) {
		libraryMC = linkage;
		//initialise
		init();
	}
	
	private function init():Void {
		//attach the cursor with the PopUpManager class
		createCursor();
	}
	
	private function createCursor():Void {
		//create the pop up
		mCursor = PopUpManager.createPopUp(_root, libraryMC);
		//set the dimensions of the cursor **possibly make this a public function**
		setCursorDims(25, 25, mCursor);
		//enable the cursor
		this.enable();
	}
	
	private function setCursorDims(w:Number, h:Number, o:MovieClip):Void {
		o._width = w;
		o._height = h;
		
	}
	//disable the cursor
	public function disable():Void {
		mCursor.stopDrag();
		mCursor._visible = false;
		_disabled = true;
	}
	//enable the cursor
	public function enable():Void {
		mCursor.startDrag(true);
		mCursor._visible = true;
		_disabled = false;
	}

}
Tagged with:
 
Page generated in 0.73332 seconds ( 94.07% PHP, 5.93% MySQL )