Super Crayon Bros – Soria Moria Nightmare – Final Delivery

Video with a full playthrough of the entire experience above.

We have created a game framework AND a game using the framework. During ACDC 2024 in 3 days! We used Power Platform and the products within like, Power Apps, Power Automate, Copilot Studio and Dataverse. We also used Azure DevOps for ALM and making the solution portable to other tenants and environments.

Of course it is responsive! and looks beatiful!

Gamification framework

We have created a framework for a gamified way to learn. This framework can be reused to create new games with all kinds of thinkable subjects. 

The framework has predefined content like

  • Game progress
    • Start and Story
    • Quests and Tasks
    • Finale
  • points
  • layouts
  • dialog boxes
  • inputs
  • outputs

Exceptional looks!

Images for backgrounds and characters can be customized to create a unique look and a complete new looking game and story. Look at this blogpost for screens: Great user experience and beautiful screens!

Quest and tasks

The Quests in the game can be created by adding new entries to the Quest and task tables.  The tasks can be of any kind, just limited by the creators imagination.

In this solution we have tasks like:

  • Point and click
  • Puzzle
  • Send in an external email to unlock a task

This methology and design makes it easy to adjust and add content, making it reusable for all kinds of training or fun (or both some will say….)!

Of course we have AI!

A large amount of the actual content is generated by AI. Images and stories are created by custom GPTs within OpenAI.

Intelligent NPCs!

A NPC follows the user in the game and will guide the player. This makes the game a lot more fun and personal. The character has a personality and will answer question about the environment the player currently is in. The player ask in natural language and the NPC answers by using generativ AI. This is implemented as a custom prompt in Copilot Studio. 

The information to the NPC is feed from the game database. This means that new quests and tasks will automatically be fed to the NPC. 
Look at this blogpost for details. Using AI to create a game

The game progress framework as a picture

Glossy Pixels + Mario badge + Chameleon

Before the hackathon we used some hours doing research, which included doing use research. Sofie on our team had experienced that renovating a bathroom includes a lot of back and forth between plumber, carpenter, project manager and several other people. It took more time then it needed to, to finish the bathroom due to bad communication, jo flere kokker, jo mere søl/Too many cooks spoil the broth.

We talked to two amazing plumbers, first asking a random question:

They, and their colleagues wanted:
– A pipe planner for when they renovate a bathroom
– Supply list with which pipes and other equipment
– Pipe (hehe)line for all the workers including in building a bathroom

Sofie wanted:
– Certificate of completion automatically …

We hade several calls with them before and during the hackathon, they gave us invaluable information and insight, and they have evaluated our solution each day.

This is our user journey

And of course, here is the user journey translated to Super Mario (please zoome in)
user journey mario

Late last night, after a couple of beers we finally found the perfect name for our plumber solution! Say hello to Tubi! We made a logo we are happy with, short and sweet!

Using Microsoft UI components, with a dash of Super Mario sprinkles on top, the UI is done.

Since this blog isn’t the best medium to showcase the design, please check it out at Behance

Whack a banan.. wait is that a duck?

It is the working man who is the happy man. It is the idle man who is the miserable man.

Benjamin franklin

It is important to keep your mind sharp and occupied while waiting for bananas to be detected. With that in mind we have added a whack-a-banana game to keep you on your toes. It uses a canvas, and are embedded in out banana portal. Banana ducks appear randomly in a photo realistic map, and you have to detect it before ti disappears. Come over if you want to play!

Mario Badge

Mario Badge is all about engaging gaming experience for the user.

We have created the game Amazzing Adventures, which are a user interactive game, which allow the user to choose their game name, game settings, move around the map and even do different actions while playing.

  1. Choose the game username and specs such as theme and difficulty.

2. Choose your own Character

3. The player can move around in the game using the arrows.

4. When the player meets the villain, different options are displayed, which required user engagement. This is for example giving the villain a diamond, or kill it by throwing an wrench.

Nighttime Progress: A Snapshot of Dedication

As the night deepens at the hackathon, our team’s resolve only strengthens. With the outside world cloaked in darkness, the glow of our monitors lights up our determined faces. Remi delves into the heart of game development, fine-tuning mechanics to ensure our game is as engaging as it is seamless. His dedication to crafting an immersive experience is a beacon of our team’s passion for excellence.

In parallel, Sindre channels his creativity into Power Page styling and design, focusing on creating a visually appealing and intuitive user interface. His efforts to blend form with function are pivotal, ensuring that our project not only captivates but is also accessible and enjoyable for users. Together, their work epitomizes our team’s dynamic capabilities and unified goal: to deliver a project that stands out for its innovation and user-centered design, proving that even as the night wears on, our spirit and productivity soar.

A Day of Triumph: Unlocking Multiple Badges in a Single Sprint !?

Streamlining Efficiency: The “Go with the Flow” Badge Achievement

In the pursuit of optimizing business productivity within our solution, the implementation of an ALM pipeline has been a game-changer. This automated transfer of solutions between environments not only saves significant time and effort but also ensures that both unmanaged and managed versioning packages of the solution are seamlessly transitioned. Furthermore, the integration of a Power Automate flow for the approval of deployments has elevated our operational efficiency, marking a significant milestone in our journey to “Go with the Flow.” This achievement underscores our commitment to leveraging workflow automation for enhanced productivity.

Uniting Power and Simplicity: The “Power User Love” Badge

Our solution showcases an exemplary blend of low-code platforms with pro-code customization, embodying the #ProCodeNoCodeUnite philosophy. By implementing a Power Pages site for user interface and login, coupled with a PCF component coded in React and TypeScript for a gamified course, we demonstrate the power of integrating professional coding standards with low-code solutions. This approach not only streamlines development but also opens up a realm of possibilities for creating robust, user-friendly applications.

Gamification at Its Best: Achieving the “Mario Badge”

Elevating user interaction through gamification, the implemented PCF component with interactive controllers to navigate through course levels. Each course represents a level, challenging users to advance and showcase their proficiency. This gamification aspect not only makes learning more engaging but also encourages users to level up their skills in a fun and interactive environment.

Visual Insights: The “Dash It Out” Badge

Our solution now features a Power BI report embedded within the Power Pages site, along with additional reports for user access to high scores and admins for an overview of active players and their progress. These reports, showcasing at least four graphs, gauges, or KPIs, highlight the business value of our dashboard. The integration of these visual insights ensures that both users and administrators have a comprehensive understanding of performance metrics at their fingertips.

Adaptive Excellence: Securing the “Chameleon” Badge

The responsiveness of the Power Page, adapting automatically to all devices and screen sizes, exemplifies our solution’s versatility. This inherent adaptability ensures that our application delivers a consistent and user-friendly experience across various platforms, earning us the “Chameleon” badge. It’s a testament to our dedication to creating solutions that are not only powerful but also universally accessible.

All koopas need training

The Mario vs Koopa Troopa war is brutal, and the Koopas need to be able to take Mario out.

In our Mario Detection System app we have created a training program so that the Koopas can practice their Mario Hunting/Killing skills.

You have 60 seconds to click on and kill as many Marios as possible. And your highscore will be saved in the games home screen.

Mario Onboarding Center

We claim badges:

Hipster: We protect privacy by not saving any user information except the name in our database. Also, provide cartoon avatars instead of real face of the employees.

The Existential Risk: Our AI generates interesting background stories where humans may fail to do so.

Mario badge: Gamification of the onboarding process. Instead of boring onboarding we provide users a game character creation experience when joining the company

Thieving Bastards: We use paid ChatGPT api to do api requests.

Do you want a fast onboarding process for your agents? We have the right solution.

In our company, we use AI to generate images that look like your agents. We have customizable prompts to generate different characters. We can create a quick backstory for an immersive customer experience.

You can choose different appearance options. For Image generation, we will need a prompt and an image of the person. Based on the selected character AI will make your avatar a lookalike.

Take your picture and generate an image. We are using chatgpt API for image generation. It is a subscription model for text generation and pay as you go model for image generation. Using existing api instead of building a stable diffusion solution save from time. We use power automate cloud flows to call API requests and retrieve responses. We let the ai combine user picture and prompt to create a cartoony avatar.We do not save any user information in our dataverse to keep up with privacy requirements

Choose your theme for the background. AI will create a nice-looking story for you. Based on what is said in your story it will set a skill level too. This time we are using text generation apis of chatgpt with flows. Based on selected background option ai will generate a background story and skill level. Skill level considers generated story too, so it is meaningful.


Five badges in one poost?

Toad, a character widely recognized as Mario’s loyal companion, assumes a different role in our scenario. Instead of assisting Mario, Toad will be guiding Princess Peach through the perilous landscapes of the Mushroom Kingdom. Known for his extensive knowledge, Toad has documented everything in his personal wiki, which serves as a comprehensive guide to their world. In our application, Toad will utilize this knowledge to answer Princess Peach’s queries via a chat interface. This interactive feature will allow Princess Peach to navigate her journey with greater confidence and understanding.

Toad, an AI bot powered by Copilot Studio, learns from the web and adapts to new data. It uses advanced machine learning algorithms to understand and interpret information. This continuous learning makes Toad a versatile tool for tasks like data analysis, content creation, and problem-solving. It represents the next generation of AI, ready to assist with its ever-growing knowledge. (New text added here)

Live demo of Toad:

Who can resist the thrill of a captivating game? Our app takes you on an exhilarating journey, brimming with elements of gamification. It features a sophisticated scoring system for our beloved Princess Peach, tracking her progress throughout the game.

Live demo of score:

But that’s not all! Princess Peach has access to a dynamic Power BI dashboard, allowing her to review her progress and identify her strengths and areas for improvement. This interactive tool serves as a constant motivator, pushing her to strive for excellence

Last night, we celebrated a significant achievement as we won the award for ‘Excellent User Experience’ for Thursday. This accolade is a testament to the hard work of our experienced UX designer, who has crafted a fabulous Figma prototype to assist our developers. This victory leads us to the final chapter of our journey.

Last but not least, we invite you to step into the world of our application. Here, a vibrant pink palette, reminiscent of Peach’s dress, meets a shiny and glossy user interface, crowned with a touch of yellow, much like Peach’s crown. Our design choices, carefully considered for ease of navigation, make interacting with our app not just user-friendly, but a truly delightful experience. (New text added here)

Color palette from Figma

Live demo of shiny and glossy design (the design is not 100% complete in this video):

This post was edited 03.02 12:40

New text is marked with: (New text added here)

  • Added live demo of bot and some text
  • Added live demo of gamification
  • Added live demo of glossy design, picture and some text

GitHub Pages

With this blog post we are aiming for the badge

When Power Pages sites stopped provisioning, we tried instead to make the Peaches Mini Games start map in something called GitHub pages.

We created a repository in GitHub and added our code there. Following this tutorial:
GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Greate a new repo

For a low coder like me, this is unfamiliar and feels very developer’y 😀 I’m loving it!

Chat GPT and I created the framework for the game map that I added to the index.html in the repo.

Committed and pushed the code and 10 minutes later the GitHub Pages page was live and the initial game rendered:

The Public Repo is here:

Anyone is welcome to use this as the starting point for their game if they like.