Making an Arcade Style Joystick . . . losing it !

Hi all,

just had some spare time and have been playing with Corona, am trying to follow the very excellent tutorials from techority.com, what I'm trying to do is create an microswitch arcade style joystick with the ui class from one of Peaches tute's . . . I figured out how to get buttons to have roll over states and play audio - e.g. a click sound - now I would like to do the same for the joystick . . . basically an eight way joystick with the ball and stem that " clicks " at each increment and goes back to center when the user is not touching it - similar to the analogue examples throughout the site - this is driving me nuts !

If anyone can have a looksee at the code and give us a few pointers that would be great . . . I downloaded this tutee file from techority.com and doctored it up a bit . . . I wanna make a shmup for the first game but I need to understand code and how it works . . . trying to think logically with very very minimum coding background . . . will pick it up eventually.

I was thinking of using an invisible button that triggers a roll over state which would position the joystick ( yep I was trying to cheat - old school Macromedia Director user here ) - but it ain't working how I thought it was going to work - so by touch the joystick follows the left thumb and clicks at each of the 8 increments or microswitches when he user is not touching the joystick bit, the ball clicks back to the center - man I miss " tell target " syntax you could use it for almost anything to do with ui and graphics switching in Director . . . :(

Thanks in advance peeps !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
----------------------------------------------------------------------
--                                                      SCENE SETUP                                                             --
----------------------------------------------------------------------
 
display.setStatusBar (display.HiddenStatusBar)
-- Hides the status bar
 
----------------------------------------------------------------------
--                                                      LOAD CLASSES                                                    --
----------------------------------------------------------------------
 
require "ui"
--[[
Here we require the ui.lua, which we need to do a "mouse over" type button.
You can copy ui.lua directly from this project folder into your own, or find it in some of the
sample projects available in Applications/CoronaSDK/SampleCode.
--]]
 
----------------------------------------------------------------------
--                                                      LOAD GRAPHICS                                                   --
----------------------------------------------------------------------
 
local background = display.newImage ("assets/images/background.png")
background.x = 380
background.y = 500
-- Sets the background
 
local viper = display.newImage ("assets/images/viper.png")
viper.x = 380
viper.y = 500
-- Puts the usual picture into the app and positions it
 
 
----------------------------------------------------------------------
--                                                              JOYSTICK                                                        --
----------------------------------------------------------------------
 
local joystickplate = display.newImage ("assets/images/joystick_base.png")
joystickplate.x = 104
joystickplate.y = 922
 
local joystickdef = display.newImage ("assets/images/joystick_ball.png")
joystickdef.x = 104
joystickdef.y = 922
 
----------------------------------------------------------------------
--                                                              ARROWS                                                          --
----------------------------------------------------------------------
 
 
local up = display.newImage ("assets/images/upx.png")
--up.alpha = 0.5
up.x = 104
up.y = 873
 
local down = display.newImage ("assets/images/downx.png")
down.x = 104
down.y = 975
 
local left = display.newImage ("assets/images/leftx.png")
left.x = 50
left.y = 920
 
local right = display.newImage ("assets/images/rightx.png")
right.x = 155
right.y = 920
 
-- Puts in all four movement arrow images and positions them
----------------------------------------------
-- BUTTONS                      --
----------------------------------------------
----------------------------------------------
-- Simple button with rollover & audio                  --
----------------------------------------------
 
--local upbut = ui.newButton{
upbut = ui.newButton{
default = "assets/images/invisble.png",
over = "assets/images/ball_up.png",
--onEvent = buttonHandler,
--onPress = buttonHandler,
--alpha = 0.5
--id = "up",
x = 104,
y = 873,
}
 
redbutton = ui.newButton{
default = "assets/images/but_red_up.png",
over = "assets/images/but_red_down.png",
x = 484,
y = 965,
}
 
yellowbutton = ui.newButton{
default = "assets/images/but_yellow_up.png",
over = "assets/images/but_yellow_down.png",
x = 538,
y = 874,
}
 
greenbutton = ui.newButton{
default = "assets/images/but_green_up.png",
over = "assets/images/but_green_down.png",
x = 614,
y = 802,
}
 
bluebutton = ui.newButton{
default = "assets/images/but_blue_up.png",
over = "assets/images/but_blue_down.png",
x = 707,
y = 756,
}
 
----------------------------------------------
--      Playing sound on button touchevent                      --
----------------------------------------------
 
-- BUTTON CLICK AUDIO --
local click = media.newEventSound ("assets/audio/click.wav")
-- 1 Calling in audio
 
local function playclick (event)
media.playEventSound (click)
end
-- 2 Function to play audio
 
upbut:addEventListener ("touch", playclick)
redbutton:addEventListener ("touch", playclick)
yellowbutton:addEventListener ("touch", playclick)
greenbutton:addEventListener ("touch", playclick)
bluebutton:addEventListener ("touch", playclick)
 
-- 3 Listener to trigger sound - can happen on any event - collison / position etc.
 
----------------------------------------------------------------------
--                                                              MOVE VIPER                                                      --
----------------------------------------------------------------------
 
local motionx = 0 
local motiony = 0 
local speed = 10
-- Speed can be adjusted here to easily change how fast viper moves. Very convenient!
 
local function stop (event)
if event.phase =="ended" then
        
        motionx = 0
        motiony = 0
        end
        end
        
Runtime:addEventListener("touch", stop )
-- When no arrow is pushed, this will stop viper from moving.
 
local function moveviper (event)
viper.x = viper.x + motionx
viper.y = viper.y + motiony
end
 
Runtime:addEventListener("enterFrame", moveviper)
-- When an arrow is pushed, this will make me move.
 
--function up:touch()
function up:touch()
motionx = 0
motiony = -speed
end
up:addEventListener("touch", up)
 
function down:touch()
motionx = 0
motiony = speed
end
down:addEventListener("touch", down)
 
function left:touch()
motionx = -speed
motiony = 0
end
left:addEventListener("touch",left)
 
function right:touch()
motionx = speed
motiony = 0
end
right:addEventListener("touch",right)
 
-- The above four functions are stating the arrows should all listen for touches and defining
-- the way I should move based on each touch.
 
 
local function stage (event)
 
if viper.x < 50 then
viper.x = 50
end
----
if viper.x > 718 then
viper.x = 718
end
----
if viper.y > 800 then
viper.y = 800
end
----
if viper.y < 50 then
viper.y = 50
end
----
if speed < 0 then
speed = 0
end
end
 
Runtime:addEventListener("enterFrame", stage)
 
-- This will keep me from going off the sides of the screen. It's not actually a wrap, that would
-- involve me disappearing and popping back on the opposite side, but I'm in the habbit of calling
-- whatever function I use to keep the main "hero" on screen "stage", and I doubt that will change any
-- time soon.

You can have a look at the code from Matthew Pringle, a very experienced and senior developer (also a Corona Ambassador) that has provided a free plug & play code to do what you want. You could use that for inspiration.

You could step up your reference sources if you are interested in being a serious developer.

cheers,

?:)

Hi Jayant,

I have downloaded Matthew's example with the fighter jet and the dual analogue joystick with the tank demo - BUT - there is always that but with me - it's not how I envision what I'm trying to achieve - the beauty of what I'm trying to achieve is to have extremely simple and modular code using very minimum external sourced code - this pushes boundaries of what the development software achieves and innovates on methods to active a primary goal. This is the reason I picked up on Techrority.coms tutorials - as it explains things almost logically and it gels - I have sort of started my own self tutorial documents to self teach and get my head back into coding and actually using maths to move things - but being a visual person it helps to have visual references.

Analogue controls are great and I think Mathew's example is a great technical feat -- but overly complex for novice and intermediate aspiring developers to grasp - it's like jumping into the depend of the pool when you don't know the basics of swimming.

Now my reason for wanting to achieve this is quite simple - touch screen devices suffer from lack of physical controls - we all know that - and that is an identified problem - so the solution would be to create skeuomorphic control pad with tactile feedback so a user is familiar with the control - that is to trick the brain into thinking that one has physical controls under ones fingertips yet on a flat 2d plane which is glass - this is a very basic thing which I am surprised so many developers seemed to have over looked - so instead of a a flat touch 2d dpad - one should develop a 3d dpad ( or joystick ) with states and audio cues as one in real life so the brain computes via this tactile feedback that one is touching something physical - an area of the screen should be bounded off for this control system - I have looked into the control pad thing " icontrolpad " - but do believe that game great controls can be built in this manner within the application and once this designed and developed, it should be incorporated as a standard library of sorts and this would mean that no other hardware would be necessary to enjoy a game as it was intended on a touch device.

Many developers have come up with the solution of on screen interface design, but have not taken it to the next level - I'm talking about this next level - but composed of in a very simple way . . . hmmm . . . maybe I should really dissect Mathews code and really study it.

views:1584 update:2011/11/2 21:34:51
corona forums © 2003-2011