Moving from Flash to HTML5

Stubborn_Donkey

So you’re a developer who is super comfortable with ActionScript and Flash, but now you’re looking to jump Adobe’s ship or at least dip your toes after seeing HTML5 armada slowly gaining in strength.

Well I’ve been currently going through that transition and found a good gangplank for anyone else out there looking for a jumping off point.

Now I’ve looked at these transpilers (Source-to-Source compilers), to try and find a nicer alternative to writing pure JavaScript. Which seemed quite alien to me not having any form of “real” Generics or Inheritance.

  • CoffeeScript – Lots of useful shortcuts and fancy features. Reminds me of Ruby in terms of readability. Quite a large learning curve especially coming from ActionScript.
  • Google Dart – Syntax is closer to ActionScript. Liked having the built in libraries do some of the leg work for me. DartEditor is based on Eclipse (I hate Eclipse). Was a real hassle to get it to comfortable interface with external JavaScript libraries, when I did there was no auto-complete.
  • Microsoft TypeScript – Syntax is basically ActionScript with minor differences. Compiles to plain JavaScript. Requires Definition files (d.ts) to interface with external JavaScript libraries.

So for me I found it was easiest make the transition from ActionScript to TypeScript mainly due to the similar syntax and being the easiest to setup.

I also looked at these IDEs to try and find the one that worked best with TypeScript.

  • Brackets – Open Source project written in HTML, CSS and JS. Doesn’t support TypeScript out of the box required an additional plugin. Auto-completition didn’t work as well as I’d hoped. Required manual compilation of TypeScript to JavaScript through Command Line. Totally free for anyone to use. Live development preview didn’t work with TypeScript as a result.
  • Sublime Text – The whole experience was very DIY. Required plugin for TypeScript support. Auto-completion again didn’t live up to my expectations. Took a lot of fiddling to get it exactly as I wanted. Has nice editor shortcuts. USD $70 for license, super expensive for what is essentially a barebones text editor with some fancy short-cuts and plugins, however it is free for “evaluation” purposes. Very minimalist for those who are easily distracted by lots of nice icons and buttons.
  • Visual Studio (2013 RC) – This is the intended IDE for TypeScript but I still felt it didn’t support it enough. Didn’t like having to manually add files to the solution in order to see them. Liked the new feature in 2013 that searched for definition files using your existing JavaScript files. Overall didn’t feel very intuitive. Express edition totally free for anyone to use.
  • WebStorm – Really good informative auto-completion. Worked with TypeScript out of the box (after pointing it to the compiler). Compiles TypeScript into JavaScript upon saving of the file. Unfortunately the LiveEdit feature currently (7.0.1) still does not work when modifying TypeScript. Very intuitive has a solid tool chain and good customization options. Has a range of licenses and prices for all audiences Academic, Personal, and Commerical. Provides free licenses for the Classroom, Open Source Projects, and Microsoft Most Valuable Professionals.

I settled on WebStorm found it to be the easiest to use coming from using FlashDevelop as my exclusive Flash IDE. Also managed to get a free license (for a year) through my university after getting a faculty member to fill out their form.

Found a few useful extras along the way. CreateJS library which provides a very similar structure to that of ActionScript, things like a stage, addChild, and etc. really helped the transition. Also I found a great little module in Node.js called “live-server” that provided me with a close alternative to the “LiveEdit” feature of WebStorm that worked with TypeScript.

I’m going to do another post soon explaining how to get TypeScript, WebStorm, CreateJS, and live-server all talking to each other in a way that really accelerated my workflow.

A New Age

So I haven’t posted anything new in ages (as usual), so I thought I’d write an update as to why this is and what I’m moving towards. Firstly I went on holiday during the months of July and August, and although I’d hoped to get some work done during this period a lot of my hopes didn’t come to fruition. This was due to me moving around a lot, not having a designated workspace, and generally not having a reliable internet connection.

I’m about to start the planning phase of my third year computing project and I plan to use a lot of the software I’ve been researching to make my idea possible. I’ll shortly be writing another post to evaluate the software and technologies I hope to leverage in my project which should hopefully give anyone who’s interested an insight as to what I’m doing currently.

This project is hopefully going to help me transition away from Flash/AS3 and towards HTML5/JS/CSS, all the while building upon my existing skill set.

Industrial Placement – June ’13

At the end of last month I had received an Alpha build of the new GTS Welcome Pack which included the new Dynamic Multilingual Component that’ll be in the next update. This gave me a chance to get ahead start at integrating the new component into the bet history framework so that when the update goes live and gets pushed to all the operators the new bet histories will support it. This update should also give us the ability to fix various bugs that were out of our control such as unsupported languages like Thai. This update should also include a new bet history DisplayComponent that’ll handle when the player reaches maximum winnings more graceful then in the past.

I also got an email from University confirming that I had received my first choice for my 3rd year project, which was “An Analysis of Metrics in Mobile Game Design” supervised by Andy Day, I’m hoping to get a head start on the project during the summer months of July and August, during which I’ll try to document my progress on this site. I hope to have the basic game finished with the recording of metrics successfully implement along with a method of quickly updating and splitting my user base for A/B testing.

doc

Another key chunk of my time this month was devoted to updating the bet history framework while thoroughly documenting it for the new placement student that’ll be taking over after I finish at the end of this month. This was my first time writing and generating ASDoc so I had to brush up on my command line skills, in order to get them to generate smoothly without any errors. Luckily FlashDevelop has a basic Documentation Generator tool built-in, which saves out its own separate project file containing all the export options. This saves me the pain of having to hard code my own batch files and makes it easier for others to update and regenerate the documentation as improvements are made.

I also wrote an in depth tutorial explaining how I go about creating a bet history for a new game using the bet history framework I’ve created. It goes into setting up the project and images, how to display data effectively and how to configure the language files appropriately.

Industrial Placement Supervisor’s Comments:

I tasked Josh with creating a user guide which will be used by our next student placement. The guide must be comprehensive and easy for someone to follow so after it’s completion it is to be reviewed by other programmers in the team. He also tidied and commented up the code for the Bet History so an ASDoc could be generated.

He was also given a task to review and connect up the MLC which was given to us by GTS. He provided feedback to the main developer of this tool so improvements would be made to it.

Alison Schofield

May Project – Bottles

bottles_banner

It’s been a while since I’ve done a project update (a month roughly), so I thought it’d be best to post something rather than nothing at all. So here it is my “unpolished” demo Bottles it was basically finished at the end of last month but was missing a key element and I couldn’t let it go without fixing*, so that’s why there was no update last month. In the meantime while waiting on helpful feedback from the people on the Starling and Nape forums I’ve also been working on a level editor for Flat2D which is functional but nowhere near finished so I’ll try to get it out by the end of the month (no promises) as well as an update to Flat2D which should include my ‘Fragile’ class which is used in this demo for the fracturing of entities with polygonal shapes.

So Bottles! this is really just a more improved version of the March project with a few more additional features:

  • The fractures now occur relative to the point of impact.
  • The fracture now works on concave and convex shapes.
  • The amount of pieces produced are relative to the impact force.
  • *The Image from the original entity is cut up appropriately for the child entities.
  • The entities produced from the fracture can be fractured again.

Didn’t quite get the last one unfortunately, it works fine apart from a bug where the 3rd-generation entities produced from a fracture seem to be incorrectly placed when being added back to the world. I think it’s something to do with the way I’m handling the aligning of the Nape bodies. Click the link below to give the demo a go:

Bottles Demo

Before I go back to working on the level editor I’m going to try and polish the Phluid and Bottles Mobile Demos and try to get them on the Google Play Store and if I can’t or it takes to long for approval I’ll just post the APKs on the site in the coming weeks.

Industrial Placement – May ’13

This month me and Cezary continued to work on porting Winnings of Oz, we also got our first list of bugs back from quality assurance after our initial release. Almost all of which consisted of wrapper flow issues. One of which I rectified was that the showServerBusy calls were sometimes being called in the wrong places or at the wrong time. To prevent this I decided to clean things up by remove all of the showServerBusy calls that were scattered through out the project and only add them before a request was sent and after a response was received. I also added a temporary Error for debugging purposes so that if a duplicated showServerBusy call was made it would throw this Error making it easier to track down the special cases. Also this month Little Britain went live on Betfred and the market team did a great job with the promotion of the game as shown in the screenshot.

little britain

Another large chunk of this month was spent researching ideas for my 3rd year project proposal that had to be finalised by the end of the month. A good source that I’ve been using for the past year was the GDC Vault they offer lots of interesting lectures from prominent companies in the gaming industry. After much thought I managed to come up with following two ideas:

2D Platformer Game with Modern Gameplay Mechanics:

Research the recent influx of old school platformer games from the indie scene that have grown in popularity over the past three years. What allowed for new life to be given to this seemingly exhausted genre in an overly populated profit focused industry. With the advent of digital distribution and the games industry slowly producing less and less publishers funded big budget/risk AAA games, will a more crowd funded experimentally adventurous approach to game development be the most viable route to success in the future? I’ll apply what I learn to a game of my own and obtain feedback from players about what aspects of the game they enjoy most, then compare it with reviews of similar games I’ve researched during the game design phase of the project to obtain a conclusion.

An Analysis of Metrics in Mobile Game Design:

Create a simplistic mobile game that collects metrics and statistics about the user’s interactions with the game. From this data a lot can be gleaned about the user experience, such as where a player enjoys, grows tired, progresses, and finishes the game or subsections there of. After this data is analysed in appropriate manner flaws in game design may be made apparent. This allows for the developer to reassess design decisions and make subtle or core changes to the game’s design where required. After the changes have been made, an update can be pushed to the user-base to test if the changes have improved the user experience. All the while continuing to collect data to gain a better understanding about what makes a mobile game successful in today’s market.

The first idea was brought about by an interesting documentary I’d seen called the “Indie Game The Movie“. The second was influenced by various lectures on GDC Vault I’d seen relating metrics to game design and how they’re used in today’s gaming industry.

Another interesting development that happened at Adobe MAX was the announcement of Flash Professional CC which offers a plethora of new features and will be going live in June. However I don’t think we’ll be getting it here for quite awhile as Playtech only just bought Flash Professional CS6.

Industrial Placement Supervisor’s Comments:

Josh continued to assist Cezary were he could. He was also given time to improve code and look into his university work.

Alison Schofield

Mochi Scores API Insecurities

Last month’s project is going to be a little late so I thought to make up for it I’d post some interesting info I got sent to me awhile back by a fellow CMP student (Tom Le Cornu) at UEA. He managed to hack the Mochi Score API in one of my games allowing him to post fake scores to the high score board.

Encryption: you’re doing it wrong!

Okay, so, here we go…

This is a game online: http://caffeinatednightmare.com/blog/evocannon/
From a fellow CMP student.
(click the “Evocannon” link mid-way down the page.)

The high score was 1 million or something. Too much time would be needed. So,
let us use them skills.

When you die, you can submit your score. Using Firebug you can see that a HTTP POST request gets sent to scores.mochimedia.com. Cash monies. So if you use tamper data or something similar, you could change the score! Win! But wait…

Here’s a sample capture:

It’s encrypted. So we have an MD5 hash and RC4 encrypted data.

Okay, so we need to get the key for the encrypted data, decrypt it, alter it, presumably hash it, then create a crafted POST request then send it.

So I decompile the game and after a bit of sifting, I see that the Mochi media company have their own API for doing stuff with the leader boards and whatnot.

The call to update the leader board uses this function call:

Which in turn calls this function:

However, there was nothing of interest in this file. But then, by chance, I see this at the top of the MochieServices file:

So, I go the “services.swf” file and I’m presented with a pink screen. Not very useful so I decompile it. To find what I’m looking for I search for “RC4″ in the text and this pops up:

The encrypted RC4 data is just some JSON stuff encrypted with the key and the MD5 is a hash of the data and the key. But where is the key?

Maybe they used SSL.
Maybe they used TLS.
Maybe the generated it randomly.

Or maybe, just maybe, it was in the source code. And thus, without further ado:

static var _key = “REDACTED”; (I’m not going to actually publish the key.)

I can decrypt data, create the correct the hash, but how to actually do the attack? Well, I
wrote a socks server a year or so back that comes in handy every now and then.

So I alter the code to change the name and score, encrypt it all, hash it properly, then send
it as if nothing happened.

And thus, two hours later, Unroc El Mot, with a score of 2,000,000 is at the top of the leader-board.

Disclaimer. This is absolutely nothing to do with the creator of the game, or an attack on his person. But to do with the software provided by Mochi media.

It’s all good and well using encryption, but sheesh, don’t put the key in the code!

- Thomas Le Cornu

Industrial Placement – April ’13

2013-06-24 09_46_35-Ash Gaming GTS Lobby_ AS3wrapper game

After I got back from my week off at the end of last month, I came back to find that while I was away a few bugs had come back for Adventures in Wonderland Scratchcard which were promptly sorted by Cezary in my absence. This means that the game could finally enter the testing phase carried out by our internal quality assurance department.

While waiting for the test cycle to finish I used my time effectively to fix all the left over bet history bugs that had accumulated during the time I was unavailable due to being on holiday and before that focusing on meeting our deadline for Adventures in Wonderland Scratchcard. Most of the bet history bugs were concerning the phrasing of “Total Payout” and whether this should be a cumulative sum of all the payouts received in all draw states, or if it should be “Freespins Total Payout” and be the cumulative sum of all the payouts received during only free spin draw states.

The next task me and Cezary had been given to work on together was porting Winnings Of Oz to the GTS platform. I’d previously had experience with this game when doing the Marketing Demo using the William Hill version of the game so I had a good understanding of what the game consisted of. We decided that we’d collectively work on the Game Loader and Wrapper integration whereas Cezary would handle the porting of the Normal Spin and Trail/Wizard Bonus rounds, then I’d handle the Jackpot functionality and the Freespins/Superspin rounds.

Industrial Placement Supervisor’s Comments:

Josh was involved in going through Bugtracker and selecting with Cezary bugs for him to address for Alice Scratchcard. He also assisted Cezary with the port of Winnings of Oz – another game that would be hosted on the GTS platform.

Cezary found Josh’s help invaluable as he was against tight deadlines. He was able to easily delegate tasks to him and Josh remained calm under pressure and completed tasks in a timely manner. His work was also to a high standard and Cezary was very impressed by Josh’s efforts.

Alison Schofield

March Project – Shatter

shatter_banner

It’s been one hell of a busy month at work I’ve moved off doing bet histories and started porting my first game to a new platform, so it’s been a mad rush trying to finish fixing all the bugs that were assigned to me. As a result I haven’t had much time to work on this month’s project which was to implement breakable objects using my engine Flat2D.

There’s a lot of stuff I didn’t get to add e.g. concaved polygons, textured polygons, slicing (Fruit Ninja Style), impact shattering, and irregular shattering. So I may work on this in between work and next month’s project. Once it’s all polished up I might even push the feature to github. My other main concern at the moment is getting my engine to dispose properly when switching between states, the main culprit being Nape at the moment so I’ll also try to look at that as well this month.

Shatter Demo

Controls:
Pause: P
Reset: R
Debug Draw: D
Shatter Entity: F + Click
Select Slices: 1-9

Industrial Placement – March ’13

vegas-game-alThe majority of this month was spent on porting my first game to the GTS platform with assistance from Cezary our dedicated porting developer here at Ash Gaming Ltd. This first game was Adventures in Wonderland Scratchcard the majority of the porting process had been two years prior by Ross and Cezary, it was my job to polish of the remaining bugs and programming the Jackpot feature which hadn’t yet been set up on the server-side.

gtslogo

The first part of the porting process involved moving the project’s source out of the Visual SourceSafe (VSS) and into our new Subversion (SVN) version control, then removing all the redundant files that are no longer required as a result of not having to comply to William Hill’s slot specifications any more, such as a Virtual Host and a Logger.

One of the main parts that needed programming was the Jackpot’s heartbeat, which should send off a edge display jackpot request every thirty seconds, then if the user is idle for ten minutes it should stop sending these requests until the user becomes active again. The information received from the edge display jackpot response is used to update the jackpot display counter in-game.

I also needed to programming the parser for the results responses that contained information regarding the winning of the jackpot during the rabbit hole bonus. Such as how much was won and at what stage it was won during the bonus. Another requirement of GTS is the graceful handling of when a user reaches the maximum win set by the operator, which I also had to implement.

A few other things I did this month in and around the porting of Adventures in Wonderland Scratchcard included fixing more Bet History bugs for Angel or Devil, Glass Slipper, Reel Gems, Fairest of Them All, and X Factor. As well as making a quick addition to Wild Gambler to meet a new GTS requirement that allows the operator to enable and disable the space bar and double tap feature using the XML config file.

Industrial Placement Supervisor’s Comments:

This month Josh teamed up with Cezary ( a flash developer from R&D team) and was responsible for fixing bugs with a ported GTS game. This involved knowledge of how the GTS EdGE platform works which is very complicated and full time developers struggle with. It involves following an extensive guide, learning how to recreate over 100 test cases and following sequence diagrams to ensure the game communicates correctly with the wrapper (the container which holds the game).

Josh took the challenge and helped Cezary deliver this game to QA on time.

Alison Schofield

Industrial Placement – February ’13

Untitled

At the start of this month I finished of the Life of Leisure Marketing Demo for Henry. During it’s development I redesigned the implementation of the Marketing Demo’s user interface for both the AS2 and AS3 standalone games. By making it more detached for the original game’s source code and just adding a few hooks here and there for things such as tracking the user’s current balance. The user interface can be modified and exported as a separate SWF file from Flash Professional then embedded in the game’s source when compiled. Programming the functionality of the user interface is all handled in a single class with the Buttons’ being pre-scripted so they work out of the box.

The rest of the month was spent producing GTS bet histories for the following games; Jackpot GT, Fairest Of Them All, Hawaiian Treasure, Angel Or Devil, Nest Egg, and Reel Gems while fixing bugs on the existing ones that are making their way through the quality assurance tests here and at GTS.

winline1

During development of the Jackpot GT Bet History I actually diagnosed a serious issue with the game’s back-end as it wasn’t saving history data consistent with the results it was sending to the client. I managed to spot the issue after thoroughly comparing the server responses. The problem is clearly outline in the following screen shots. The first win-line’s data is incorrect as it’s inconsistent with the results the client is receiving where as the second win-line is correct. Using my diagnosis Mark managed to fixed this bug in the game’s back-end which resolved the issue.

winline2

Also this month I got offered the chance to go to the ICE conference at the ExCeL centre with some of my colleagues from the R&D team. One of the main sponsors of the conference was Playtech so the trip was part research part showing our support for our parent company. The conference gives many of the companies in the gambling industry the rare opportunity to meet, discuss, and connect with each other. It also gives companies the ability to show off their goods, which included a variety ranging from slot machines to poker tables.

ice

Industrial Placement Supervisor’s Comments:

During this month Josh was extremely busy assisting the marketing department with preparations for ICE conference. Demos needed to be compiled so marketing could demonstrate the games in order to sell the games to providers. He was also given the chance to attend the event to gain industry knowledge and see for himself what games are currently hitting the market and make notes of games that interested him and games that were poorly executed. He joined in presentation with team to report his findings after the event.

Alison Schofield