Ludum Dare entry using Cocos2d-x HTML5


#1

I just wanted to say that I really found this framework very solid. I finished a 2 day marathon game competition using it and I am very happy with the results:
http://bobthegoblin.com:8081/LD48/index.html

Since this is a forum and should be used for the benefit of others here is the source code from my efforts.

peace out!


#2

Nice work, fun little addicting game :slight_smile: Out of curiosity, have you considered a touch implementation for controls, something along the lines of “move towards the touch point”? The reason I ask is that I spend the majority of my time in the mobile space and see this a lot: a neat project that could be adapted fairly easily for a mobile device, but because of dependence on a mouse or keyboard, isn’t immediately available. In your case, the controls would be fairly intuitive.

I tried the application on my PlayBook browser and there were a handful of issues but nothing that can’t be fixed from what I saw. For instance, when I swipe my finger on the screen the page scrolls vertically since the content extends past the screen dimensions. With some programmatic resizing and touch handling that could be fixed.

In any event, nice job with this (even more impressive doing it in 2 days) and thanks for sharing the source back with the community!


#3

Thanks for the solid advice Erik and yes I was considering this as a possible next step if the game was well received. You mention some things I never thought of such as the resizing the canvas dimensions programmatically to the device. I will have to look into these techniques closer when I can. Also I was going to look into using the touch mechanic and you confirmed my initial feel that it would be a simple transition from what I have. Actually I have played around with implementing touch controls in another 2d-x HTML5 sample whipped up a couple weeks back.

Trent


#4

That’s great to hear, it would be cool to see this hit more platforms :slight_smile: Just for reference, this is how I’ve been adapting my Cocos2d-HTML5 projects to essentially any device:

            /*global window, document, console */

            var ccCanvas = document.querySelector('#ccCanvas');

            (function () {
                'use strict';
                ccCanvas.width = window.innerWidth;
                ccCanvas.height = window.innerHeight;
            }());

The only thing you need to be mindful of is laying out your controls relative to the dimensions of the screen, or relative to other controls you’ve already placed. Since ccCanvas is defined in a global scope, you can use its width and height properties in any of your other JavaScript files to get those dimensions.

I’m sure though that this is just one of many ways though.


#5

Thanks Erik that’s brilliant. This makes it easy for me and I will for sure use this verbatim.

I will post here shortly once this next phase is complete. I would really like to hear some feedback, what I received so far has be positive and helpful so thanks again.

Trent


#6

Im amazed, good job with the game!

did you encounter any problem with cocos2d-html5 during the 48 hours?

What would improve your workflow with cocos2d-html5?

Let us know please!


#7

Hello, guys! Trent Nont, nice game!
I want to say, that I agree with Trent Nont, we make our ludum dare in this engine + box2d. And this is pretty nice. It was our first project with using Java Script and Html5. During the process we found some bugs, but it was very fun. If you interested, you can see our game here: http://www.ludumdare.com/compo/ludum-dare-24/?action=preview&uid=16595
Thanks!


#8

Pretty solid framework indeed, I would like to confirm as well ! I’m thinking about using this framework for my first time ludum dare somewhere somehow.

@Erik Oros, Thanks for pointing out about resizing out the touch area so playing on browser won’t be any problem.
Please allow me to share mine, for my project, I adapt it from the example in github page as we scale out all the content to the size of the current screen resolution. In that case it would be fit to any screen (you may have to make it smaller a bit as the scrollbar may exist and it will be annoying).
I use the following code “AppDelegate.js” here in gist https://gist.github.com/3514418.

Please note in the code that I have my own Global.js class just to expose setting. In AppDelegate.js, you will have the option to do fix scaling, or full scaling according to the current resolution. As well at the bottom, there’s a notable function which grabbed from github page and adapted a very little, my team added the option to receive the current width and height externally and not always from “window”, this way you can make some calculations first to make it compatible with device you’re debugging.

Hope it will be useful.

Note: My code is based on Alpha version 2.


#9

`Sasha: Very nice game! Naturally avoiding traps, the first level took me a little bit to understand, but it was smooth sailing from there. Very entertaining!

I think I’m going to adapt my virtual controls class to allow for easy integration into apps; something you can just create an instance of, set a few parameters, and have it go. Currently it supports two 8-direction joysticks and four buttons, and if I can map the joystick and buttons to keyboard events, it might be an easy way for game developers to just pop in the framework, and have instant controls to mobilize their apps onto touch devices. In fact, I’ll work on that tomorrow. I really want these games on more platforms :slight_smile:

`Wasin: Interesting gist! I didn’t think about scrollbars, but you’re absolutely right (my approach, without a larger container, will stretch a little too far.) Appreciate you sharing.


#10

Hello all,

So I’ve ported my existing virtual controls implementation for touch devices into a framework that I think might be beneficial to “desktop” devs. Basically, this lets you overlay Joysticks and Buttons onto your canvas, which you can associate with keyboard events (i.e. When the joystick is pulled left, trigger keydown for the “a” key and when released or move elsewhere, trigger keyup for the ‘a’ key.)

This means that with very minor (like, very minor) changes, you could add a Joystick, map the keys, and bingo bango the code you already have gets invoked by the framework. Usage looks like this so far:

var CocosApp = cc.LayerColor.extend({
    controls: null,

    init: function () {
        'use strict';

        /* Our Layer. */
        this._super();
        this.initWithColor(new cc.Color4B(50, 50, 50, 255));

        this.controls = new ControlsOverlay(ccCanvas);

        this.controls.addJoystick({
            imageBase: './Resources/controls_overlay/dpad.png',
            imagePad: './Resources/controls_overlay/pad.png',
            fixed: false,
            trigger: new cc.Rect(0, 0, ccCanvas.width / 2.0, ccCanvas.height),
            opacLow: 0.0,
            simulateKeys: ['a', -1, 'w', -1, 'd', -1, 's', -1]
        });

        this.controls.addButton({
            image: './Resources/controls_overlay/buttonred.png',
            pos: new cc.Point(ccCanvas.width - 54.0, ccCanvas.height - 54.0),
            opacLow: 80.0,
            simulateKey: 'enter'
        });

        this.addChild(this.controls);

        return true;
    }
});

In this example, we’re adding a Joystick with Left, Up, Right, and Down mapped to A, W, D, and S, and a button mapped to ‘enter’. The –1 in simulateKeys means we’re excluding diagonals from triggering keyboard events, but we very easily could trigger something for those as well.

Joysticks can be both fixed in one spot or appear where the user touches. I’ve replaced the controls in my samples with this, but what I haven’t done is test this out with a real keyboard implemented game. So, my ask to the community is:

Can anyone point me at a sample that uses keyboard movement to, say, move an image around a screen? Something basic. If I write it myself, I might unwittingly do stuff to force it to work, so I’m looking for a pre-written sample.

Once I can verify that all works as expected, I’ll be making the framework, a usage guide, and everything associated with it public. I just want to make sure it’s working properly first.


#11

@Erik Oros, Pretty handy and clean usage code, thanks for sharing. One example is MoonWarrior (Demo: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/MoonWarriors*-*Cocos2d-html5_Showcase | Github: https://github.com/ShengxiangChen/MoonWarriors). I didn’t look into a control code yet, but believe it actually uses keyboard (it should).
Looking forward to your framework, nodge us when it’s ready for beta launch :slight_smile:


#12

Thanks Wasin. I’ve given MoonWarrior a look and actually hit some issues along the way which further led to some fine-tuning of the controls. At present I’ve actually removed the keyboard and mouse injection since there are some fundamental issues:
# Dispatching a KeyboardEvent doesn’t actually pass the keyCode to the default HTML5 event listeners (i.e. keydown, keyup, etc.) This was worked around by leveraging the keyIdentifier property, but would require developers using HTML5 event listeners to still modify their code.
# Dispatching a KeyboardEvent doesn’t trigger the Cocos2d-HTML5 onKeyDown (and similar function) implementations.

This means that the dev needs to make modifications to their code anyways, and if this is the case then let’s tackle it properly. Each control now allows the dev to implement custom functionality, and this is where they would implement their behaviours.

For instance, when the user holds left on a Joystick, instead of:
# Dispatch KeyboardEvent with key ‘w’.
# Intercept key ‘w’.
# Invoke my functionality.

The dev now implements their functionality directly into a custom Joystick function (onTouchStart, onTouchMove, or onTouchEnd) where they can leverage the direction of the Joystick (8-compass directions) or velocity (X and Y amplitudes that the pad is being dragged in) to perform the necessary behaviour.

The ultimate result is a little more refactoring on the dev’s part (maybe) but a much cleaner controls implementation. Perhaps if there is enough feedback on the controls once they’re published, we could take another look at dispatching KeyboardEvents and MouseEvents but at this time the implementation doesn’t seem to be worth a bloated framework.

I’ve just finished all the documentation in the source code and am finalizing an article for actual usage. Hoping to have it available next week and will reach out here again for feedback if anyone’s interested in trying it out.

Cheers!


#13

Sorry for reviving an old thread, but I said I’d post about the virtual controls once they were available. More documentation is underway, but for the time being the source / usage docs are up. You can read more here: