Microsoft 365 Community Community Demos, 21 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Power Apps Demo Extravaganza 2021 - Kitty Run! Game

Description

In this 14-minute citizen developer-focused demo, Nicholas Nguyen takes viewers behind the scenes of his procedurally generated gesture controlled endless runner (a.k.a. Kitty) built in Power Apps (a.k.a., the low code rapid application development platform that's NOT for making games, but then again, why not?). See how Kitty is configured to run, jump and fly. Appreciate blocking for full parallax randomly generated background scrolling along with collision detection, pause, reset, score, and timing functionality. This PnP Community demo is taken from the Microsoft Power Apps community call – July 2021, recorded on July 21, 2021.

Demo Presenter: Nicholas Nguyen (BlueTriton Brands) | @PowerAppsGamer1

Supporting documents:
• Demo Extravaganza 2021entry - https://powerusers.microsoft.com/t5/Demo-Extravaganza-2021/Kitty-Run/cns-p/951957
• Video - View one life of Kitty Run here! | https://www.youtube.com/watch?v=a-Qc57S_CzY
• Video - View Kitty Run mobile experience | https://www.youtube.com/watch?v=ZnUzg_sU8q4

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

Just a quick introduction, my name is nicholas nguyen. I am a senior corporate quality resource at blue trend and brands, and I've been a power platform user for the last three years. Essentially ever since you killed off um infopath and access web apps. These are my contacts. As you can see.

A

When I first started professionally, I did not even know how to use excel, but I think it speaks to a general story for a lot of power platform users, which is you find a problem, and your next step is to find tools and then your third step is to learn those tools and teach them to yourself. So um I found that to be a very common story among like a lot of our users.

A

um So I this is my family, my daughter and my wife, and I actually started out with the exact opposite problem of rory. So a couple of times I found out uh a couple of weeks, I was actually waking up late. I was oversleeping and it turned out the reason. Why is because my daughter kept on taking my phone and in the morning before I fell asleep? She would download games play them on my phone turn off my alarm because you know she's in the middle of something, and you know when I finally wake up.

A

I find my phone has a lot more apps and I remember it so one day she came to.

B

Me that happened to me too, before.

A

I know right and you know, and one day she came to me with a bunch of construction paper and um let's see if I can share my screen real quickly and said hey. This is a game I want to make. Can we make this game and the game was called fight? The rattlesnake so.

A

So we made it in powerpoint and already she could tell something was wrong. She said: hey nothing happens if you jump on it or if you they miss. So you know at five years old she had a intuitive idea of the problems of game design. So that's um not bad. So I tried harder on the second um game that I made for my daughter and this time I'll try to see if I can share my phone one. Second, not perfect,.

A

And this is the next game we made and it is.

B

How long did it take you to build this app.

A

um So I would say- and you know honestly, this is probably my answer for every app I'm I've made. It took two days for it to work, and it's still going now just to make it good.

B

Know the feeling.

B

That's exactly how much time it took to build our app too the same story two days and then polish. It up.

A

A

Okay, here we go so you are a kitty and you're running endlessly. If you grab a heart, you get a power up. If you hit the spikes ow that hurts you punch, don't fall, ah there's an angry bird, oh wait! But if you get oh, no okay, I lost okay. So I was going to show you the power up, so I guess I'll have to do it again.

A

All right, okay, so one second, I think I had a comp. I think attic.

B

A

Again: okay: there we go okay and let me see if I can get this um so it's hard to talk and play at the same time. But let me see if I can get this um while if the power up will come up again, let's see.

B

I didn't notice the animation before in your in your uh your cat's face when I saw it on the smaller screenshot.

A

Oh yeah, let's see so I can't take credit for that. I've received um all the assets were taken from open game art, but um you know definitely like. um There was some modifications that we had to make in order to make the game work. ah You know what it's hard to get those that power up, but let me see if I can get it within this next turn.

B

Okay, so you said you got your assets for the game from a website.

A

um Yes, like um I went to the open game, art community and, um let's see so there's a lot of like you, know, app, there's a lot of assets and resources for game making in general, and um I applied that to you know, but none of them for power apps. So you know that's a new, so that's definitely a new field, so we um you know, use that and then, like uh my um daughter of course, had all the veto power. um She decided.

A

Oh, no, not not a not a dog running game, but a cat running game. um You know and she chose the enemy. um I told her. I want something a little bit nicer than like dinosaur, responding rattlesnakes. But, oh you know it's like. um Let's see.

B

It's hard to play the game with everyone's uh chat. Coming up too, I'm sure I.

A

I appreciate oh there we go okay, so that was like a quick trap. If you jump there and you miss it. Okay, um let's see where where's the hidden coin, it's a little bit like the golden snitch of the game.

B

Oh, you have an easter egg built into it. Oh.

A

Yeah yeah I, but I miss it the first time like um let's see but I'm, but I'm lasting longer than usual and um okay. Let's see, I think I think you saw a little. I think you saw a little bit of it earlier like when the k when the cap flies there's a coin that pops out randomly and every time that you hit that you grab the coin, you get to be in vince the cat flies and becomes invincible.

A

Just like you know in real life, and um you know basically, um that's when you can get all the power ups, but um let's see that's where you can get all the power-ups and, um let's see pull um grab health while avoiding the issues. So you see like how the heart there is hidden in the landscape. It's actually impossible to reach if you're the cat, but if you're, um oh man, maybe I can make it. Oh, no. I missed it.

A

Okay, I saw it yeah, let's see so I'll, put a pause here um and then I'll share back to my screen.

A

So the idea of the game is like everything. Character is going to be endlessly running in a background that will consistent well, I can continually like um progressively generate as you go over time, so one of the things I added was to add just controls, and you know it's actually fairly straightforward um for gesture controls.

A

um Basically, we have a you know. We have a slider, that's the size of the screen, but also transparent.

A

When we go into invincible mode, we switch the control to a different slider and the jump and the jump action of the character is a parabolic motion based on time and the player's um y component.

A

um Let's see for the back for the background to continually scroll what happens is we have like two basic blocks that are used as kind of paste blocks, and so that way it creates a continually scrolling motion where once one block moves off screen it moves behind the second block.

A

So you always see if you cover this um right now, you always see what essentially is an infinite motion and then, if you can switch speeds, you can make the ones in the back slower than the ones in the front and, um let's add some images attached to it.

A

Add it in add it closer, and then you have parallax motion which gives an illusion of depth um for your game and then the character, and then the game itself uses a type of collision detection, where I take a variable, um that's set by the position of the block um against um the other box and if it reaches a certain point, I plot from off it updates the y, um the y property of the player block. So everything here is just blocks touching each other, um so you can see here.

A

If I put a cat, you know that's tied to the position of the block, then I have a cat. That's running infinitely, let's see if I have. If I want to have a triangle, um let's see, I basically just create similar concept, except now the height of the cat is updated relative to its position on the triangle. So here we can see here. This would work.

A

So now the cat's running off the triangle: let's um make a triangle: let's make it a little bigger so now we're going to put it above the crevice, uh something now the cat's running above there and then. Finally, every time the cap runs off screen, I create a random function which will update the size of the platform, so we're able to create an endlessly changing, set a randomly generated progressively um set background that if you play you know between the last past five minutes, you won't ever repeat the same game. World twice.

A

And you know- and these are concepts that I've been able to put into um many other different games. These aren't quite, as you know, developed at the same point, but here we have a shooter game which is again controlled by um a slider. So on your on your um tablet, you'll again be using gesture controls avoid the meteors.

B

Fantastic, so you I see you flip your collision detection around and.

A

Even like um yeah and even pong, using pretty much the same like general concepts.

B

A

Yeah currently like um these different solutions, are being put into different um games that have been based on around what my daughter really been downloading. So once you download something I'll, try to reverse engineer that and power apps, um you know, and for me it was a great break because you know I do work with a lot of power. Apps professionally, and sometimes you need a break after trying to physically align a lot of labels and figuring out, like you know, gallery filter formulas.

A

So you know this was something that kind of still stretched your mind. You know sharpen some of the power app skills, but you know really. I created a lot of interesting problem, solving solutions that made you think differently than what you normally get in business apps.

B

A

You know even the concept itself, I think, has a lot of opportunity. um You know in that same field and I've been pitching it. um You know at different times, like you know, gamification like in the most literal sense, as a training tool as a teaching tool.

A

Let's see, and in those cases I don't think my daughter will veto power, but in this case she got to not only decide what the main character looked like, but also name the app. So thank you again for taking a look at kitty run, which is named by my daughter, valerie nguyen.

B

Awesome thank you for presenting it. I love how you show these these pieces behind the scenes here to help us conceptualize and understand how you built all the different pieces and they lay on top very helpful now. Did you upload your app to the gallery too?.

A

um No not yet I'm actually going to set it up in my github, like oh.

B

A

So and I actually, I did start a youtube channel where I've been going through like kind of the detailed um work through of the making of the app. um Let's see so the first series is called making kitty run and um you know we talked about how the timer um is used to create the endless motion.

A

And um you know the next um cases we'll take we'll try to explain some of the other game apps that we made as well and by the way I mean myself and my daughter.

B

That's very cool. Thank you for sharing it.

A

All right thank.

B