Difference between revisions of "Component: Joystick 2D (Controls)"

From Flowcode Help
Jump to navigationJump to search
 
(2 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
==Component Source Code==
 
==Component Source Code==
  
−
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_temp/Joystick_2dgi.fcfx FC_Comp_Source_temp/Joystick_2dgi.fcfx]
+
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_Joystick_2dgi.fcfx FC_Comp_Source_Joystick_2dgi.fcfx]
  
−
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_temp/Joystick_2dgi.fcfx FC_Comp_Source_temp/Joystick_2dgi.fcfx]
+
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_Joystick_2dgi.fcfx FC_Comp_Source_Joystick_2dgi.fcfx]
  
 
==Detailed description==
 
==Detailed description==
Line 81: Line 81:
  
 
''<span style="color:red;">No additional examples</span>''
 
''<span style="color:red;">No additional examples</span>''
 +
 +
 +
 +
 +
 +
  
  
Line 196: Line 202:
 
|-
 
|-
 
|-
 
|-
−
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
+
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
−
| width="90%" | Box Colour
+
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Pointer
 +
|-
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Fill
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | Specifies the fill colour of the shape&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 
|-
 
|-
 
| colspan="2" | &nbsp;
 
| colspan="2" | &nbsp;
 
|-
 
|-
−
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
+
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
−
| width="90%" | Shaft Colour
+
| width="90%" | Gradient Style
 
|-
 
|-
 
| colspan="2" | &nbsp;
 
| colspan="2" | &nbsp;
 
|-
 
|-
−
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
+
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
−
| width="90%" | Knob Colour
+
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Outline
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Style
 +
|-
 +
| colspan="2" | Outline line style&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-15-icon.png]]
 +
| width="90%" | Thickness
 +
|-
 +
| colspan="2" | Thickness of the outline&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | The outline colour of the shape&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Gradient Style
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Slide Area
 +
|-
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Fill
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | Specifies the fill colour of the shape&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Gradient Style
 
|-
 
|-
 
| colspan="2" | &nbsp;
 
| colspan="2" | &nbsp;
 
|-
 
|-
−
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
+
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Outline
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 
| width="90%" | Style
 
| width="90%" | Style
 +
|-
 +
| colspan="2" | Outline line style&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-15-icon.png]]
 +
| width="90%" | Thickness
 +
|-
 +
| colspan="2" | Thickness of the outline&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | The colour of the shape outline&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 
|-
 
|-
 
| colspan="2" | &nbsp;
 
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Gradient Style
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Background
 +
|-
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Fill
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | Specifies the fill colour of the shape&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Gradient Style
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 +
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Outline
 +
|-
 
|-
 
|-
 
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
Line 220: Line 337:
 
|-
 
|-
 
| colspan="2" | Outline line style&nbsp;
 
| colspan="2" | Outline line style&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-15-icon.png]]
 +
| width="90%" | Thickness
 +
|-
 +
| colspan="2" | Thickness of the outline&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Colour
 +
|-
 +
| colspan="2" | The outline colour of the shape&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
 +
| width="90%" | Gradient
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-12-icon.png]]
 +
| width="90%" | Gradient Style
 +
|-
 +
| colspan="2" | &nbsp;
 
|}
 
|}

Latest revision as of 11:57, 3 November 2023

Author Matrix TSL
Version 1.0
Category Controls


Joystick 2D component

A simple joystick component allowing for easy mouse or touchscreen based analogue control.

Component Source Code

Please click here to download the component source project: FC_Comp_Source_Joystick_2dgi.fcfx

Please click here to view the component source code (Beta): FC_Comp_Source_Joystick_2dgi.fcfx

Detailed description

No detailed description exists yet for this component

Examples

No additional examples









Macro reference

ReadAxisAsFloat

Fc9-comp-macro.png ReadAxisAsFloat
Reads a single axis of the joystick and returns as a floating point value. 
Fc9-u8-icon.png - BYTE Axis
Range 0-1 Where 0=X, 1=Y 
Fc9-f32-icon.png - FLOAT Return


ReadAxisAsInt

Fc9-comp-macro.png ReadAxisAsInt
Reads a single axis of the joystick and returns as a signed integer value. 
Fc9-u8-icon.png - BYTE Axis
Range 0-1 Where 0=X, 1=Y 
Fc9-s16-icon.png - INT Return


SimMoveThumbStick

Fc9-comp-macro.png SimMoveThumbStick
 
Fc9-f32-icon.png - FLOAT X
 
Fc9-f32-icon.png - FLOAT Y
 
Fc9-h32-icon.png - HANDLE Component
 
Fc9-void-icon.png - VOID Return


Property reference

Fc9-prop-icon.png Properties
Fc9-type-16-icon.png Joystick Type
Defines the directions the joystick can travel. 
Fc9-type-7-icon.png Return To Center
Decides if the joystick automatically returns to the center position when released. Yes: The joystick will return to the center when released. No: The joystick will remain in the current position when released. 
Fc9-conn-icon.png Limits
Fc9-type-15-icon.png Y Min
 
Fc9-type-15-icon.png Y Max
 
Fc9-conn-icon.png Theme
Fc9-conn-icon.png Pointer
Fc9-conn-icon.png Fill
Fc9-type-2-icon.png Colour
Specifies the fill colour of the shape 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Fc9-conn-icon.png Outline
Fc9-type-12-icon.png Style
Outline line style 
Fc9-type-15-icon.png Thickness
Thickness of the outline 
Fc9-type-2-icon.png Colour
The outline colour of the shape 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Fc9-conn-icon.png Slide Area
Fc9-conn-icon.png Fill
Fc9-type-2-icon.png Colour
Specifies the fill colour of the shape 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Fc9-conn-icon.png Outline
Fc9-type-12-icon.png Style
Outline line style 
Fc9-type-15-icon.png Thickness
Thickness of the outline 
Fc9-type-2-icon.png Colour
The colour of the shape outline 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Fc9-conn-icon.png Background
Fc9-conn-icon.png Fill
Fc9-type-2-icon.png Colour
Specifies the fill colour of the shape 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Fc9-conn-icon.png Outline
Fc9-type-12-icon.png Style
Outline line style 
Fc9-type-15-icon.png Thickness
Thickness of the outline 
Fc9-type-2-icon.png Colour
The outline colour of the shape 
Fc9-type-2-icon.png Gradient
 
Fc9-type-12-icon.png Gradient Style
 
Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Joystick_2D_(Controls)&oldid=39792"