Can OutSystems P10 be used to build games?

Can OutSystems P10 be used to build games?

  

Short answer is, yes. I've been in my spare time, building some simple, yet funny games. ( at least in my opinion  ).

Currently I've around 10 ongoing projects (some already in Production) in my Personal Environment and 4 of them are games.


While trying to build games using P10, I came across some limitations, or we can call them as not yet optimized features! But we need to take into consideration that P10 was released not so long ago.

Some of them I've already shared with the team, but we need to know that I'm reporting stuff that's not directly related with Enterprise Applications, and I know before hand that they might not get implemented, but it's worth the sharing.

Since P10 we can build heavily based JavaScript applications with the ease that we're used to do it in the past. So why not benefit from that and enter the hype of minimal, simplistic yet funny HTML5 games, that once build can be deployed across different platforms without so much effort?


Let's breakdown some of the limitations that I've identified and that I would love to see them tackled down in future releases of the platform.


  • WebGL and Canvas support.

As we all might know, P10 uses Cordova (previously known as PhoneGap), and by looking to a Scirra benchmark we will know that:


"PhoneGap unfortunately appears on the whole to be unsuitable for publishing HTML5 games. This is mainly because it is stuck with the system default browser which is usually too slow. On iOS the system browser is Safari which actually performs very well, but when you wrap it up in PhoneGap it drops three times slower on iPad 2, ten times slower (!!) on iPad 3 (using the retina display), and bizarrely for reasons I really struggle to comprehend, is only marginally slower on the iPhone 4S. So the only utility for PhoneGap appears to be for targeting the iPhone. Windows Phone 7 also seemed to take a performance hit from using PhoneGap, so perhaps there are difficult technical issues around putting a browser in a native app."


Nevertheless I gave it a try, and by building simple and not heavy animated games, the platform can do the job. But if you're aiming to rich eye candy games, unfortunately is a big no go ...

With this in mind I created Tappy Colors. It's a fully HTML5 + Javascript game, no canvas or webgl was used. On new phones, with newer versions of Android it runs really well, but for older phones with old Android versions it can gets a bit sloppy.



But I also want to give canvas another try, because in the first game, a platformer, I was adding to much stuff on the screen, from animations, to particles, the world, and so on. While testing in the desktop browser I was getting a nice, smooth and stable 60fps, but when I moved the first version to native I got it to an average of 7fps...

On the second try, the game was a simply clone of the iOS version Perfect Square. Where we need to fit one square onto the platform so that it’s aligned perfectly. Touch it to grow and release to let it fall! It may sound simple, but this one touch game will take super precision and timing to master it!



In my version of Perfect Square, since it is really simple and minimalist I've no issues at all on modern phones, while using canvas! And just some minor issues on older phones.


  • Plugin Variables

This one is a minor issue, and easily overcome. But there are some plugins which we're required to add up some variables. Due to the fact of platform re-usability, we always try to create once, use it in every application that needs it. But in this case we cannot do that.

For example, I created the OutSystems version of Google Play Services plugin. This Cordova plugin needs to know which game (in the playstore) are we going to attach. In P10 this is done at the plugin level, so in order to have the same plugin for multiple games, you need to have one plugin replica for each game.


  • WebRTC

This is also a limitation of the default Cordova webview. There's no support for native WebRTC, useful for real-time messages for example, and I came across this when building a real-time multiplayer game, that I'll release soon. To overcome this limitation I easily integrated P10 with Pusher and now I can have real-time communications for my games and apps. But would be nice to see this natively in a next version of the platform.


These are the biggest limitations (in my opinion) to develop games using the platform, but we need to keep in mind that the platform is aimed for enterprise grade applications and to games  . And I've described limitations that are more related with Cordova and not directly with the platform.


With this projects I've created some useful plugins that I'll share with the community soon, from Ads, to Native Audio, Google Play Services for leaderboards... It's been a funny and interesting way to spend some of my spare time!


Have any of you gone through the same pains? Do you have any game to share with us? How about to create a showcase of OutSystems games?


Cheers!

That's pretty cool! Thanks for the informative post!

Very cool, awesome work!

This is cool! Good job!

bullet force

Good one....!


Shashank...

Very nice.. thanks for the information..

Also, there's the easter egg in the mobile preview (browser):

Hi,

The Rabbit game looks cool.

@Kilian Someone already built 2048 in Outsytems? I was building it in my spare time. do you have the URL for the game?

Regards,

Marcelo

Marcelo,

Like I said it's an easter egg in the emulator (a.k.a. PreviewInDevices). Open a mobile app in the browser, then double click the "home" button, and play away! :)

Hi,

never touched the "home" button before. nice Easter egg. Thanks for the tip.

Regards,

Marcelo


You also have the Flappy Alpaca game in the SilkUi Mobile patterns page, pressing the Home button too.

The button used to be visible, they hid it, but if you inspect the element and pull it up, it still works :)


Really cool, I need to share this to my colleagues.

Awesome post. Might I suggest submiting it to the Outsystems Blog?


Regards,

   CLSJ

Nice, I remember seeing examples of games during the launch of P10 in Lisbon. 

But I think that saying OS P10 can do games is a bit of a stretch: javascript-that-runs-on-Cordova-that-runs-on-OutSystem gives the possibility to do so, within the not ideal borders of Cordova. It is not an OutSystems feature that one can build games: every environment that runs javascript/Cordova can do this.

Now, if OS had system components/extensions (react-native?) with game-specific actions then that would be different. Or even a visual way to program JS within OS. That would be a more OutSystems specific way to build (mobile) games.


Hans Bruins wrote:

Or even a visual way to program JS within OS.

Erm... that's exactly what OS on mobile is :)


About the real-time thing: we build once a simple game wherein this was needed. The goal was to demo a big data setup and a privacy tool and I saw the opportunity to build a game to show aspects of this. 

It was a pretty simple game; where a number counts back and you need to stop it near or on zero; the closer to zero the more points. After each run the counter is smaller making the run to zero faster. Oh, and when you overshoot the zero you lose points. 

I had made a crude setup to prove it was possible and also used OS as a UI for it. The team then took it up and made it to a nice game. And yes, most of it (85%) was in JS. 

However, while testing we noticed that on iPhone (Android was fine) that there was a lag in the reaction which basically made the game nearly worthless on the iPhone. It had something to do with the touch interface. Luckily Joost L was on our team and saved the game by finding a JS-lib that solved this problem, after which the game was perfected and successfully used by a lot of people during the demo.

It was without a doubt one of the projects I had the most fun with :)


Kilian Hekhuis wrote:

Hans Bruins wrote:

Or even a visual way to program JS within OS.

Erm... that's exactly what OS on mobile is :)


If that were only true..

Maybe I have missed something but can you have logic that is JS under the hood WITHOUT writing the JS yourself?

Because that is what I call visual programming. Having blocks with my OWN JS code in it and move that around; not so.

BTW this is a 15 year old wish from me. Indeed Mobile has taken a (very) small step towards that.




Hi Hans,

Mobile OutSystems apps are hybrid apps, in that they use HTML5 and JavaScript. So for Mobile, all your visual code is compiled to JavaScript, instead of the usual .NET C# or Java for Web Apps.

Kilian Hekhuis wrote:

Hi Hans,

Mobile OutSystems apps are hybrid apps, in that they use HTML5 and JavaScript. So for Mobile, all your visual code is compiled to JavaScript, instead of the usual .NET C# or Java for Web Apps.

Yes, React Native js, what makes it easier to compile to a native app. But that was not the point; the bespoke games are programmed in javascript/html5 on top of that. Not in react-native js and not in OutSystems visual logic language. 


Well, I might have too little knowledge on the matter, but it seems to me you could very well program your game logic in OutSystems, and use some JavaScript to do the visuals?

Hans, 

Mobile apps in O10 have Client Actions that are compiled to standard JavaScript code. The Screens are compiled to standard React, not React Native. You can open them in Google Chrome and Safari in Desktop, and check for yourself :)

It's true that if you want to use technologies like Canvas, there are no built-in OS library that wraps it. But you probably can just easily wrap common APIs as Client Actions, using a JavaScript Node to run the custom JS, and reuse them afterwards.

And React is also JS which makes Kilian right in a sense. I thought I had seen React Native as part of the stack when OS 10 went native. 

The point about wrapping up JS Node and creating your own libraries is, of course, possible. It also worries me a little bit because it seems OS leans with version 10 more and more to text-based coding then previously. Which is ironic for a low-code platform.