►
From YouTube: Building Xbox games with Power Apps
Description
In this 26-minute citizen developer-focused demo, the presenter Brian Dang, steps through several apps and explains which Xbox sticks and buttons are used to navigate each app. Follow along and start to build a game. The build process: Set up environment, create a player with attributes, see techniques for moving the player around screen, refine movement using functions, and rotate player. Games are tables with skins and the player is manipulated inside the table Have a bug crawling around your screen in no time! This PnP Community demo is taken from the Microsoft Power Apps community call – December 2021, recorded on December 15, 2021.
Demo Presenter: Brian Dang (Microsoft) | @mrdang
Supporting documents:
• Repo - gamepad | https://github.com/johnnliu/gamepad
• Documentation - Power Apps component framework overview (PCF Component) | https://docs.microsoft.com/powerapps/developer/component-framework/overview
• Website – Gamepad Tester | https://gamepad-tester.com/
Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/m365pnp/videos
• Blogs https://aka.ms/m365pnp/community/blog
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.
A
A
A
A
It
lands
on
a
screen
for
accessibility
settings
and
I
think
this
is
a
good
pattern
that
you
know
just
throwing
a
nugget
out
there
that
anytime,
you
build
a
game.
You
should
start
with
those
accessibility
settings,
a
quick
win
for
anybody
trying
to
use
your
app.
So
I
got
things
like
text,
size
and
language
and
so
on
so
I'll
go
ahead
and
click
save.
This
is
a
kind
of
puzzle,
game
and
I'll
I'll
ask
for
some
help
here.
Let's
do.
A
Let's
do
level
three
and
what's
different
about
this
game,
is
I'm
holding
down
the
menu
button,
and
that
brings
up
it's
kind
of
like
a
right
click
and
I
could
change
between
using
the
gamepad
as
a
cursor
or
using
the
gamepad
as
the
buttons
themselves
so
I'll
go
ahead
and
click
use
game
controls,
and
you
can
see
this
time
for
this
game.
I'm
using
the
left
stick
to
move
my
selection
and
I
could
use
the
d-pad
as
well.
A
Okay,
so
that's
another
example
of
just
a
basic
app
using
the
cursor
using
the
left
and
right
sticks
for
for
movement.
Now,
let's,
let's
go
a
little
bit
more
complex
here.
Here's
a
shift
game!
You
probably
saw
some
demos
of
this.
I
will
click
here.
I've
got
some
settings,
but
I
go
ahead
and
click
this
next
button
move
my
mouse
out
of
the
way
and
let
me
increase
the
volume
just
a
little
bit,
so
you
can
hear
the
music
and
then
let
me
change
a
couple
settings
here.
A
A
B
A
A
It
should
really
be
a
circle,
but
I
just
chose
box
now
I
could
move
this
character
and
let
me
switch
to
game
control,
so
I
can
move
this
character
with
my
gamepad
and
I
could
add
another
character
on
the
screen
and
you
can
see
that
our
boxes
are
going
to
bump
into
each
other.
If
I
try
to
walk
into
this
this
wall,
it
will
bump
what
if
I
stand
next
to
this
other
character
again,
this
should
be
circles,
we're
actually
bumping
it
together.
A
A
So
I'm
actually
fighting
this
character
here
and
I
could
switch
back
between
these
modes.
I
wanted
to
show
you
this,
because
every
game
that
you
make
is
just
a
table
so
with
these
demos
shown,
let
me
switch
over
to
what
we're
going
to
be
making
today
and
todd.
Can
I
get
confirmation
that
sound
and
everything
is
coming
through
yeah,
it's
a
little
late
to
be
asking
that,
but
okay,
so
let
me
jump
over
to
what
are
we
gonna
be
making
today?
A
A
In
other
words,
it's
a
it's
an
api
that
will
react
to
the
key,
the
inputs
of
a
gamepad.
So
this
is
already
pasted
in
chat.
You
can
scroll
up
to
grab
it
once
you
download
this
and
and
john
was
kind
enough
to
export
it
as
a
as
a
zip
file.
For
me,
you'll
go
to
powerapps
admin
center.
First,
I'm
going
to
jump
to
an
existing
environment
that
I
have,
and
I
want
to
enable
pcf
components
for
this
environment.
So
this
is
my
prod
environment.
A
I
click
settings
at
the
top
zoom
in
here
click
settings
at
the
top
of
this
environment.
I
expand
the
product
category
and
click
into
features
inside
the
features
you
can
enable
things
like
geospatial
services
mixed
reality.
I
think
mixed
realities
here
collaboration
I'm
going
to
enable
powerapps
component
framework
for
canvas
apps
mine's
already
on
once
you
set
that
click
save
at
the
bottom
of
those
settings
and
your
environment
will
be
set
up
so
that
it
can
import
pcf
components,
I'm
going
to
jump
to
my
environment
now,
so
I'm
in
make.powerapps.com
the
powerapps
portal.
A
A
Now
I
already
have
this
component
inside
my
solution
or
inside
my
environment.
So
I
don't
really
have
to
do
this
again,
but
you
would
click
import
next
and
follow
the
instructions
on
screen.
Okay,
I'll,
go
ahead
and
cancel
this,
so
the
components
inside
that
environment
now
any
app
that
I
make.
I
can
potentially
add
that
component
inside
the
app.
A
B
A
A
Our
apps
community,
oh
I'll,
click,
create
I'm
making
this
a
in
the
in
the
tablet
form
factor.
Okay,
so
the
first
thing
I'll
do
is
show
you
how
to
insert
that
pcf
component.
Well,
when
you
want
to
insert
things,
you
click
the
insert
menu
on
the
left
side
of
the
screen
go
to
the
bottom,
where
it
says,
get
more
components.
A
A
A
A
So
if
I
were
to
start
changing
this,
you
see
right
away
that
I
get
the
inputs
of
this
of
this
controller.
If
I
move
the
stick,
I
can
see
that
the
numbers
in
that
first
part
change,
there's
a
another.
Stick
that
changes
numbers
I
can
push
buttons
and
they
return
true
or
false.
If
they
are
clicked,
they
also
return
one
or
zero
one
being
true,
zero
being
false
all
right,
so
I
have
confirmation
that
that
gamepad
is,
is
working
and
it's
being
pulled
into
this
app.
A
What
I
want
to
do
next
is
bring
in
nice
control
just
to
keep
all
my
things
organized
and
we're
joined
by
emma
today,
who
had
a
hand
in
making
these
container
controls
I'm
going
to
insert
a
vertical
container
just
keep
things
nice
and
tidy.
I'm
going
to
cut
this
pcf
component
paste
it
in
here
and
we're
going
to
have
a
lot
of
controls
today.
A
Okay,
so
I'll
bring
that
on
the
left
side.
Next,
this
is
where
I
want
you
to
be
involved.
I'm
going
to
create
that
player.
So,
jumping
back
to
the
map
here
we're
going
to
create
details
for
a
player
that
we're
going
to
move
okay.
So,
let's,
let's
do
this
in
a
variable,
I'm
going
to
set
something
that
I'm
calling.
A
Okay,
so
let
me
start
it
off
and
then
I
want
to
get
some
ideas
from
you
and
todd.
If
you
can
read
out
some
of
the
ideas,
I
I
don't
have
a
view
of
the
chat
right
now.
So
when
I
describe
a
player,
I
I'm
gonna
start
with
its
name:
okay,
my
player's
name.
It
we'll
just
use
my
cat's
name:
abby,
okay.
How
else
would
you
describe
a
player?
B
B
A
So
I'm
going
to
collect
that
player
to
this
table,
I'm
not
going
to
use
that
table
to
for
today's
demo,
but
I
just
want
you
to
see
that
I
could
I'm
going
to
be
manipulating
the
details
of
this
player
inside
that
table.
If
I
were
to
create
this
actual
app,
okay,
I'll
change,
the
text
on
this
button
just
to
say
reset
reset.
Okay,
now
I'll
go
ahead
and
insert
a
an
icon,
let's
insert
an
icon
on
the
screen.
A
A
I
created
a
property
called
var
player,
dot
the
avatar
and
before
I
do
anything
else,
let's,
let's
click
this
button.
If
I
zoom
out,
I
I
set
this
this
player's
avatar
to
a
bug.
I
gave
this
player
a
an
x
property
and
a
y
property.
So
let's
fill
that
in
the
x
properties
of
our
player
dot
x,
the
y
property
is
var
player
dot
y.
A
A
A
Now
I
haven't
gotten
to
the
part
where
I'm
using
the
gamepad.
Yet,
let's,
let's
go
ahead
and
do
that.
How
do
I
listen
for
this
gamepad
this
time,
I'm
going
to
do
these
controls
outside
of
the
container
just
so
I
can
make
a
point
about
its
location.
Now
the
d-pad
on
the
on
the
gamepad
has
four
directions
and
I
could
use
this
website
called
gamepad
tester
to
find
out
which
button.
A
What's
the
name
of
that
button,
button
12
is
up.
Button
13
is
down
button,
14
is
left
button.
15
is
right
so
in
the
in
the
app
I'm
going
to
show
you
when
I'm
clicking
those
buttons
I'll
use
a
toggle
and
I'll
go
ahead
and
insert
four
of
these
up
down
a
left
and
a
right
one.
Just
to
make
it
a
point
and
let's
go
ahead
and
name
these
toggle
up,
toggle
down
toggle,
left
and
toggle
right.
A
Okay,
so
for
this
first
toggle,
when
I
want
to
detect
that
I'm
pushing
up,
I
could
reference
that
gamepad
component,
so
I'll
type
gamepad
dot,
and
this
is
where
I
can
pull
up
all
the
different
properties.
It
has
all
these
different
x
axes
y
axes.
Button
12
is
the
one
I
want
for
up
right
now.
It's
zero
because
I'm.
A
A
A
And
the
player
can
have
many
properties,
but
if
I
only
want
to
change
a
couple
of
properties,
I'm
going
to
catch
it,
I'm
going
to
take
the
existing
value
of
the
player
and
inside
these
brackets,
I'm
only
going
to
modify
the
x
and
the
y,
so
the
x
property
I'm
going
to
keep
it
at
its
same
x,
property,
the
y
property
I'll
reference,
its
existing
y
property.
If
I
were
to
do
nothing
right
now,
all
this
formula
is
doing
is,
if
I'm
pressing
one
of
those
buttons
it'll,
keep
that
same
position.
B
A
About
four
pixels,
when
it's
moving
and
if
I'm
moving
left
in
the
x
direction,
I
want
to
subtract
that
number
minus
four
pixels.
If
I'm
moving
right,
I
want
to
add
four
pixels.
So
if
I'm
traveling
to
the
left,
then
I
want
to
subtract.
If
I'm
traveling
to
the
right,
I
want
to
multiply
by
1,
which
is
adding
that
number
I'm
going
to
copy
that
kind
of
logic
to
the
second
one
and
change
it
so
that
if
I'm
traveling
up
I'm
subtracting.
If
I'm
traveling
down
I'm
adding.
A
B
A
B
A
A
A
A
A
A
A
This
this
this
should
be
the
the
screen
width
of
the
entire
screen.
So
this
is
the
screen:
one
dot
width,
okay,
sorry
it
was.
It
was
relatively
to
the
container
there.
Let
me
show
you
one
more
thing,
so
that's
the
x
direction
now,
what
if
you
wanted
it
to
wrap
now
I'll,
do
this
with
the
y
direction.
You
wanted
the
player
to
warp
to
the
other
side
of
the
screen.
A
If
I
push
up
it
warps
to
the
other
side,
so
those
are
two
nice
quick
patterns
that
you
could
do.
We
didn't
get
to
rotation
today,
but
that's
okay!
You
have
the
game
component.
You
can
see
how
you
can
use
it
into
your
own
apps
and
add
some
motion
or
selection
to
your
app,
and
with
that
I
want
to
thank
you
for
having
me
and
I'll
hand
it
over
to
emma
who's
going
to
be
showing
you
some
collaboration,
features
so
emma.
Why
don't
you
take
it
away.