Saving HTML5 Game State in WebView – Xamarin Android

We  were loading a HTML5 game into an Android webview (Webview renderer in Forms App to be specific – doesn’t matter though) in a Xamarin Forms application and we wanted to save the state of the game in our application.

That is, if the user was at level 5, exited the game or navigated to another page and came back, game shouldn’t start from beginning but from the same level or may be even the same points (as long as backend supports that).

Of course, it was difficult to get a direct sample on Xamarin to fix this issue but 2 sources helped us. We combined both to fix the issue.

  • Source 1 : How do we use Local Storage and cookies to save HTML5 games? – Link
  • Source 2: Using Android webview and storage – Link

 

Websites typically uses Local Storage to get this information stored and then share it with server when it loads (and not cookies).  Our reference was HTML5 Games Site – http://html5games.com/Game/Zombie-Massacre/3223c9b3-f528-4604-86a1-ed0daca4c285 ). We used Chrome developer tools to see its local storage and information stored for levels while playing to understand the process. Well, we are all newbies in certain areas, of course. We realized that LocalStorage was leveraged and were able to manipulate levels from the developer tools view or SQLite browser (Local Storage file inside windows Locals).

gamestatejpeg

 

We were able to save HTML5 games in Xamarin Forms Android WebView using local Storage. But, we haven’t implemented it yet on other platforms like iOS. My guess is that the steps should remain pretty much the same regardless of the platform. Given here is an Android sample.

Overall code is actually pretty less to make this working – the minimal code to save the level and points to local storage.

Control in the code below is your Android WebView control.

WebSettings settings = Control.Settings;
settings.DomStorageEnabled = true;
settings.DatabaseEnabled = true;
settings.JavaScriptEnabled = true;

string databasePath = this.Context.GetDir("database", FileCreationMode.Private).Path;
settings.DatabasePath = databasePath;

 

I would surely love to hear from you, if you have managed to achieve this in some other way, a better way.

 

~Trilok R~

Xamarin HackNight

Hackathon = Hack + Marathon – Really?!!?

 When I was invited to be a part of Xamarin Hackathon I was a bit skeptical, for one I had never been a part of such an event ever before, secondly, non stop coding and churning out a meaningful system at the end of the second day felt like a seemingly impossible task. Nevertheless, I accepted the challenge and turned up for Xamarin HackNight.

 2 – Aug – 2014 – Day 1

I was a bit late as usual. Folks were already there and were discussing something as I made my way to an empty chair. By folks, I meant Nish, Vic, Pooran and Anubhav. Surprisingly, we did not have an idea what we were going to make till then. Empty minds! May be that was a good thing.

I thought we would be discussing about the application but they were taking food orders, showing off the gadgets each had and the hacking they had done so far. I was searching whether I had any gadget to show off. I found a wedge mouse in my bag. That’s all I had. I was already thinking whether it was a bad idea to join these geeks. I was corrected in 10-15 minutes as we got back on track and started brainstorming on application ideas. It was quickly decided based on some of our previous discussions that it was going to be a Birthday Reminder application based on Xamarin forms for the event. I was able to contribute in small nevertheless meaningful way to the session. Phew!

Quickly, Pooran drew the screens on a white board and we started brainstorming on the integral parts or components of the application. He also shared an online version of OneNote where the tasks were immediately marked, assigned and shared with all of us. A MacBook pro was connected to WiFi and we ran Xamarin build host out there to test our iOS screens. (Steps to troubleshoot connection)

Application: Birthday Reminder

  1. Xamarin Forms for UI development – WP, iPhone, Android
  2. Xamarin Auth for Login
  3. Xamarin Social for picking data from Facebook and other APIs
  4. A backend to store these data and for notifications – Hangfire and AWS!
  5. MVVM to tie all these elements into a robust architecture.

Once the planning was done, we picked up one component each and started looking into it. Initial formal tones by now had changed to fun as we started discussing and working on our assigned areas, each helping out the other as the application slowly came to life.

Meanwhile, Kirti joined us late in to the evening though he had just recovered from a fever.  His motivation level was commendable. If I were him, I might have taken the easy way out and confined myself at home. He instead decided to join us and code! And we rewarded him by assigning Xamarin Forms and UI work!

  • What did we discuss? Everything under the sun. Some wavelengths matched others were over head transmissions. Disconnected discourses many.
  • What did we not discuss? Very few things escaped our chatter boxes.
  • What did we code? Many things. (Detailed blog on this later)

Pooran, Vic and Nish brought in their combined experience and knowledge in different areas to guide us and push the application work forward. Anubhav and Kirti brought in the enthusiasm and mobile application development experience to keep the night young and alive. Vic ensured that the fun never stopped with his inimitable attitude and comments. Nish played the resourceful host literally with both his Xamarin knowledge and event hosting.

 

3 – Aug – 2014 – Day 2

As the night dawned into day 2, backend was shaping up well. I could see Vic and Pooran feverishingly working on Hangfire and Services. Auth and Social component looked in place. Xamarin forms was proving a bit tricky as we learnt it and coded. Overall application architecture was in place. Integration was pending. And to be frank it is still a work in progress! We checked in stuff to GitHub by noon for a sumptuous lunch at a nearby restaurant. Post lunch we made plans on pending work and discussed other informative nuggets about Xamarin. What was supposed to be a small session and a quick winding up discussion extended to a 2 hour discussion!

For me, it was an amazing learning experience – Xamarin Forms mainly. What was the take away – new people, interesting interactions, fresh ideas, brilliant brainstorming, stimulating discussions and what not. I realized what you take away from such a gathering is not only technology but also an unique experience!

I am definitely looking forward to the next one.

What other hackers say:

“Hackathons for me are places where we learn something new every time. I learnt about hangfire”  – Pooran

“Amazing experience with Xamarin.Forms and how simple it is to get started with…Also, worked with Xamarin.Auth and it was amazing how it took care of Facebook Auth in all the platforms…”  – Anubhav

 “The Hacknight Day 1, I just recovered from fever and ran to join my Xhackers Gang. I had a quick Design Discussion and I started working on Xamarin Forms.”  (XForms).

During the discussion I got learnings on XForms, Xamarin Forms & Shared Project. It was very useful if we are building one project where all the XForms elements are shared within all three platforms(iOS, Android, Windows Phone). Also using the Compiler Directives we can write platform specific functionality inside the forms. The experience was awesome. Thanks to Nish for clearing all my doubts.

Around 3AM we had huge discussion on Architecture, Facebook Authentication, Models, View Models and UI. During this time I learned new thing HangFire (http://hangfire.io/) from Vic. I will dig more about HangFire.

 Overall my experience in this HackNight was absolutely awesome.  “ – Kirti

 

 P.S. This post covers the overall experiences of the first Xamarin HackNight in Bangalore. Application information, technical deep dive, details about the individual components and integration will be covered in the next blog post.

 

Few of the pictures below are Vic Parmer’s clicks 🙂

 

600_395389382 600_395389502 highres_395388522 600_395391012

10590029_10152605720679321_2056690945_n 10592118_10152605722379321_2034673902_n

Xamarin & XHackers

002_small_160

XHackers => Xamarin Fanatics – Guess what we code in C# for iOS and Android too!!!

this.btnClickMe.TouchUpInside += (sender, e) =>
this.lblText.Text = "Hello world to XHackers";
};

Story so far

There were these bunch of people in Bangalore who loved Xamarin, C#, .Net and wanted to show the world how awesome it is to develop applications using Xamarin and C# on Visual Studio! The common thread that brought us together was Xamarin Evangelist Nish (@NishAnil). He orchestrated our first Bangalore Meetup of Xamarin enthusiasts.

On Feb 1st 2014, 8 of us met in the laid back HSR Layout’s CCD. 8 of us were from different backgrounds, developers to architects to consultants to entrepreneurs. We spent some exciting time talking mobile, technology, codes and networking. Before our coffees were over, we saw a common theme emerge. We realized that we should now spread our enthusiasm for Xamarin and share our knowledge to developers in Bangalore. We decided to create our next meetup where we introduce Xamarin to a newbies. XHackers formally began then.

Within a week, we updated our Meetup group, created a Facebook group and a website for us. I have to admit website is still under construction (We got our day jobs as an excuse!). We finalized a Hello World day to introduce Xamarin.

Meanwhile, I had a chat with my UX designer friend Reeko. We brainstormed for two days and came out with the logo displayed here. Back story on this on a later post. 🙂

March 1st 2014 we had our proverbial Hello World session at Microsoft EGL Campus. Initial low attendance improved with Bangalore’s lazy weather getting better as day progressed and we had a pretty decent turnout by the time we started 😉

We had a mixed audience here too. From college students to entrepreneurs we had people from different interest groups who attended this event. We covered Xamarin platform introduction, its possibilities and Hello world on each of the trending platforms – Windows phone, Android and iOS.

Murugan started with Xamarin Introduction, followed by Chaitra’s informative session on Android.  Anubhav and Kirti gave an introduction to Portable Class libraries (PCLs) using Windows phone and Store application. Trilok [“I, me myself”] wrapped the session up with a Hello World on iOS (You could find iOS code from session here). Prashant (@prshntvc), who is with Xamarin came down all the way from Mysore to support us. First meetup’s agenda was to give the audience an overall feel about Xamarin and kick-start their Xamarin coding with C#. We believe we were able to meet that expectation based on the generous feedback we received.

Road Ahead

We are planning to follow-up March session with 3 more hands on labs where PCL and real cross-platform development will be discussed and coded. Dates and details are already up on our FB page.

We are all ears for your needs or ideas about what do you folks want to learn or do in these forums / workshops, may be even a Hackathon event! The more XHackers network grows the more inputs we as a group gather on Xamarin and its wide possibilities.

Local XHacker chapters, kick-start events, your Xamarin success stories are things high on our agenda. If you want to let us know on these you could always post on Meetup or mail in to xhackers dot co  and let us know your thoughts.

Hope to meet you soon in the next XHackers Meetup,

LogRCubed…