Friday, 21 June 2013

World of Fighters - Handling damage over multiplayer


Little update on the progress of World of Fighters. We've now have hit and ko animations for our characters thanks to Alex of apm-designs. So when a punch and kick connects, the player taking damage can react accordingly. I put in some healthbars to show the damage taking progress, and made it so that it's all spawnable and editable using the MultiPlay.io editor.

For the combat mechanics, the first thing I'm testing out is short and long pressing on the attack buttons. The longer you hold down the more powerful your action is, however, the longer you hold down your attack button, the more you risk your opponent unleashing their attack. Will need to add in a block and attack taxing, so if a punch is blocked, you open yourself up for a counter. But yeah, this should be fun to balance out.

As requested on Twitter, there will be finishing sequences, with the kid that looks nothing like Justin Bieber currently threatening to do a sing-along head-exploding microphone performance as his manoeuvre.

Up next will be the fight sequencing. Round 1, Round 2, Fight, Finish Him, You Win, You Lose.
Watch this space.

Wednesday, 19 June 2013

How to install an iOS adhoc build using iTunes

If like me you get asked a lot about how to install a packaged adhoc build by super-awesome business dev folk.
Here's a super-duper-short (<25 seconds) video walkthrough on how to do just that.


:)

Friday, 14 June 2013

Developing Multiplayer fight controls in Real-Time


Was just working on the control system for the fighting engine of the upcoming World of Fighters game. And, I have to say, it is so much cool being able to code in real-time. Seriously, I wasted so many years of my life, compiling, linking, deploying, refreshing. Just being able to code and see what happens is amazing.

I'll give you three scenarios I was just working through. Remember, for all these changes, I didn't have to compile/re-deploy any code, I just hit command-s to save and the code just updated in real-time as I was experimenting.

Punching and Kicking
First up was how the action buttons should work. Should they issue an attack as soon as they are pressed or when they're released? I didn't know which one to go with, so I just experimented with the two options until I found one I liked.

Modified the auto-generated .js file from the UI Editor to use onPress rather than onRelease.


Moving
Ok for moving it was a more difficult choice. Originally I had it so that the player moved a step towards or away from their opponent if the left or right button was first pressed. However, this required tapping several times in order to get close to your opponent, which is very un-natural compared to how all other fighting games operated.

Move towards your opponent on a right press.

To solve this, I instead marked a flag when the arrow buttons were pressed, then unmarked it when it was released. Then in my update loop, I would move the player accordingly.


The problem with this approach however was that it increased the data being sent across the multiplayer network. So to reduce this packet, I put in a timer, which updated the key press state once every x number of milliseconds. With x being a value I experimented with until I was happy with the response time.


So rather than the client telling the server that the right or left arrow was pressed every update loop, it instead sent out the message every 250ms.


Camera
I had a few issues when setting up the camera for the fight. I wanted to have it focus in-between the two players fighting, however I had a bug in my calculation. So first up to solve this, again in real-time, I inserted a marker in the map, and moved it to point at different parts of my calculation, until I visually saw the part of the maths that was incorrect.


Once that was solved, I then played around with the camera distance values depending on how close or far away the players were from each other.

A multiplier of 2.5 seemed about right.


Cool huh?
I remember watching WWDC ten few years ago when Steve Jobs introduced the new linker improvements for XCode.

Well now ten years later, you can not only get rid of linking, but you pretty much zero-everything apart from debugging out... damn you debugging.
Well at least with zero-stop/compile/run, debugging is a lot improved as it totally reduces the need to having to re-setup scenarios for the problem states to occur. Which is doubly awesome for multiplayer gaming, as those problem states are so much harder to set up.

Note: we're still currently in beta, but it's public so you're more than welcome to give our tools a go and  start modifying your code/ui/design or assets in real-time :)

Thursday, 13 June 2013

World of Fighters - Introducing the Fight UI


I love Street Fighter, it's been one of my most favourite games of all time. I remember playing at the arcades, actually once I spent £20 in one go trying to defeat my school friend Mewael, who was a Street Fighting god at the arcades. £20 might not seem like much nowadays, but back when I was a kid, it was about two months pocket money.

Anyway, so as we're now trying to get our easy-to-use real-time multi-platform games maker feature complete. I have the opportunity to actually make a little street fighter clone for primarily web and mobile platforms!

Introducing... World of Fighters
I've totally spaced out thinking of all the crazy cool stuff that should be done for this game, but I'm going to try to keep it as simple as possible to get started. The concept is a fighting game that's mobile first and fully MMO'd up.

You start the game, select a character to play with, then walk around an arena looking for opponents.

Once you find someone to play (either another online combatant or a pesky AI), you tap on the character, and then you'll be zoomed into fighting mode, where you get to punch and kick their faces.

Previously, I made mobile games using code only, which meant I had to imagine how things worked out in my head. However, for this game, I got to use the MultiPlay.io game maker, which meant I could design the fight UI and arena levels visually. As well as update the code I was working and in real-time see how it affected the gameplay in real-time.

So far, the intro screens in, the character select screens in, you can walk around, and once you challenge an opponent the UI shifts into fighting mode.




So next up is introducing the health bars and implementing in the fighting engine.
Excited? Well check out my these awesome designs...


Take it easy :)

Wednesday, 12 June 2013

Disable JavaScript caching for development in Chrome and other browsers

If like me you're constantly battling with Chrome Dev Tools to respect your wish of disabling the caching of JavaScript files.

PHP Solution
Just add ?<php echo time(); ?> to the end of your script's src parameter.
?<?php echo time(); ?>
i.e.
<script type="text/javascript" src="../js/external/gl-matrix.js?<?php echo time(); ?>"></script>
This'll add the current time to your script call, and force Chrome to always respect your wish of disabling the caching of JavaScript files.

It's also better than using the Chrome Dev Tools 'disable cache' feature, because it'll always work, and it'll allow the caching of images to still occur.

Note: Your breakpoints will be forgotten between sessions, which is a pain.


Apache Config Solution
Just add a cache-control header to .js files being served in your httpd.conf file.
<FilesMatch ".(js)$">
Header set Cache-Control "no-cache"
</FilesMatch>
Note: Less guaranteed to work than the PHP solution, but keeps your breakpoints.


If you have a better solution, please let me know.

Saturday, 8 June 2013

Android Dev on your Windows Phone

One of the big features I've been working on with the Multi Editor is to make sure it runs across mobile devices. What means you can edit the javascript, UI, animations, 3d models and more all from iOS, Android, WP8 and HTML5 compatible devices.

Which means you can actually make, edit and publish games from different mobile phones.

i.e. Here I'm modifying the UI being displayed on an Android device with my Windows Phone..


Pretty cool?

Thursday, 6 June 2013

Making UI that goes punch and kick

Hey guys, over the past 30 days, we've added two cool new features to the realtime multi-platform editing experience.

With the UI Editor you can draw new UI screens, resize the buttons, assign images and javascript function calls to them all inside a visual interface that gets syncrhonized live as you edit it.

With the Animation editor, you can drag and drop in FBX animation files and visually debug any issues.

Putting this stuff together with the map and javascript editor is the plan for next week. I'm working on a little MMO street fighter style tech demo, that'll use the UI editor for menu screens which join a map created by the Map Editor. The map will use another UI created from the UI Editor which provides buttons that let you to fight other players by calling animations made from the Character Editor. It'll be awesome honest!

Other things we did in May included going to China for the first time to present at GMIC. Went to SF to present at Tizen DevCon, and presented a fun pitch at Lion's Cage.
This month we're going to be giving a talk at the Apps for Goods Awards ceremony, presenting our tech at Startup Stories V and of course launching our awesome documentation and getting started sections.

As always, if you have any feedback, suggestions, abuse, anything really, feel free to contact me.

Thanks for the support!
Ashraf Samy Hegab

PS. Follow us on TwitterYouTube and Facebook, for free hugs.
PPS. Recently had a request for helping make a 3D fps game using the tech, which is in progress. So watch this space.

*Note, if you run into trouble connecting, please try again later as our servers may have gone down from unexpected demand.