-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfly-everything-devlog-1-control-schemes.html
More file actions
131 lines (117 loc) · 6.59 KB
/
fly-everything-devlog-1-control-schemes.html
File metadata and controls
131 lines (117 loc) · 6.59 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Programming Pixels</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/" rel="dns-prefetch">
<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Abril+Fatface|PT+Sans:400,400italic,700&subset=latin,latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://programmingpixels.com/theme/pixelsquare/style.css" />
<link rel="stylesheet" href="https://programmingpixels.com/theme/css/danny.css" />
<link rel="stylesheet" href="https://programmingpixels.com/theme/css/poole.css" />
<link rel="stylesheet" href="https://programmingpixels.com/theme/css/hyde.css" />
<link rel="stylesheet" href="https://programmingpixels.com/theme/css/syntax.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '1598442', 'z5g7y5g5j2', 'load');
</script>
<!-- End MailerLite Universal -->
</head>
<body class="theme-base-0d">
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1>
<a href="/">
<img class="profile-picture" src="https://programmingpixels.com/theme/images/sidebar/dark.png">
Programming Pixels
</a>
</h1>
<p class="lead">A blog about making games, Python and Godot. </p>
<p></p>
</div>
<nav class="sidebar-nav">
<a class="sidebar-nav-item" href="https://twitter.com/prog_pixels">
<i class="fa fa-twitter"></i>
</a>
<a class="sidebar-nav-item" href="https://www.youtube.com/channel/UCA52UIysqTUBT8-D1N8_8KA">
<i class="fa fa-youtube"></i>
</a>
<a class="sidebar-nav-item" href="feeds/all.atom.xml">
<i class="fa fa-feed"></i>
</a>
<a class="sidebar-nav-item" href="https://github.com/programmingpixels">
<i class="fa fa-github"></i>
</a>
</nav>
</div>
</div> <div class="content container">
<div class="post">
<h1 class="post-title">Fly Everything devlog #1 - Control schemes</h1>
<p class="post-date">
<span>Published by </span>
<a href="https://programmingpixels.com/pages/about.html">Danny Barthaud</a>
<span> on </span>
<span>Tue 22 October 2019.</span>
</p>
<div>
<p class="summary"><p>Trying out different control schemes for the first playable aircraft.</p></p>
</div>
<div>
<p>Real work on the project has begun and there are some basic assets and gameplay in place. I had the idea that the drone could be controlled with a single touch on the screen by having the drone fly towards the location of the touch.</p>
<video alt="control scheme video 1" class="videoborder onebyone" autoplay loop >
<source src="https://programmingpixels.com/images/dronedevlog1/flies and lands 2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>User testing uncovered a number of problems though:</p>
<ul>
<li>Because gravity is constantly pulling the drone down, the player need to touch somewhere above the drone every second or so to prevent it falling to the bottom of the screen. This means that the players hand often blocks their view of the screen.</li>
<li>Can't easily navigate around the top section of the screen as you need to touch above the drone to maintain it's height.</li>
<li>It's uncomfortable to have to hold a phone/ tablet with a single hand which the player is required to do as one hand needed to touch anywhere on the screen.</li>
</ul>
<p>To tackle these problems I changed to a safer and more familiar control layout and add buttons to the screen.</p>
<video alt="control scheme video 2" class="videoborder onebyone" autoplay loop>
<source src="https://programmingpixels.com/images/dronedevlog1/buttons as controls.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>The biggest problem with button style controls on a touchscreen is the lack of tactile feedback. When you use a console controller you're constantly receiving feedback through your thumbs about where they are on the controller- if you miss a button you can feel that you haven't pressed anything. You don't have that on a touch screen though. To counter this, I've actually made the effective button area much much larger than the button images on the screen. Touching anywhere in the shaded blue area will actually trigger the button.</p>
<p><img alt="control scheme image" src="https://programmingpixels.com/images/dronedevlog1/control scheme.png" class="videoborder onebyone" ></p>
<p>Hopefully progress on new features will be rapid now I've settled on a control scheme.</p>
<p>The next devlog is available <a href="https://programmingpixels.com/fly-everything-devlog-2-control-schemes.html">here</a></p>
<br />
</div>
<div id="mailerlite" class="ml-form-embed" data-account="1598442:z5g7y5g5j2" data-form="1415584:m8n4j9">
</div>
<div id="mailerlite-failed" class="hidden tetradic1">
<p>It looks as though something is blocking our newsletter signup form.
If you would like to signup you can send an email to danny@programmingpixels.com.
We will only ever send you updates of our latest blog posts and your data will never be shared with anyone, ever.
</p>
</div>
<div>
</div>
<br />
<div id="commento"></div>
<script src="https://cdn.commento.io/js/commento.js"></script>
<div id="commento-failed" class="hidden tetradic1">
<p>It looks as though something is blocking our comments system.
Comments on this site are powered by the lightweight, privacy-focused commenting platform <a title="Commento has not, does not, and will not gather your personal information to sell to advertisers, third-party trackers, or other organisations." href="https://commento.io/">commento</a>.
</p>
</div>
</div>
<script src="https://programmingpixels.com/theme/scripts/external_element_checks.js"></script>
</div>
</body>
</html>