Split Screen functionality?

[peterl...@gmail.com]

Hi ! 

I'm making this little game using melonjs 0.9.8 & Tiled and would love to have split-screen functionality.

I have two little clouds that fly around and cooperate to rain on some plants & collect them.

( try for yourself : http://myfutureselfandme.com/clouds/ )

Right now, (as you can see if you tested the game out) the clouds are in the same viewport / screen. And I would aboslutely LOVE to give them their separate

screens so I could have the clouds move away from each other to perform different tasks around the game world in the name of cooperation & fun.

Does anyone of You know how to implement Split-Screen with melonjs?

All the best, Peter!

[Jay Oster]

You would effectively need two viewports for split-screen. It is possible to create a second viewport right now, but you would have to attach it to a canvas, and manage the drawing separately. Theoretically, this could all be done with the plugin API, which allows you to patch parts of the library. You would want to patch (at least) : me.game.reset(), me.game.update(), me.game.draw() ... and possibly also me.game.loadTMXLevel(), or just set the viewport bounds on the me.event.LEVEL_LOADED event.

[peterl...@gmail.com]

Dayum, that sounds like quite the project for a beginner like me. It does also sound like I could get a great load of experience from doing that.

Thank you for pointing me in the right direction Jayy.

All the best.

[Jay Oster]

If you look at the melonJS source code, in core.js, search for the viewport references. These features would have to be duplicated on your second viewport. Here's the file: https://github.com/melonjs/melonJS/blob/master/src/core.js

[peterl...@gmail.com]

I was very uncertain on where exactly to start. Thanks a lot again Jay. I Hope I make it, as this is the most ambitious attempt to implement some functionality into a game so far in my short 'career'.

Great to have some team players / some guidance.

May the winds of this.vel.x guide you.

[melonJS]

well i don't think it's really that easy to achieve, mainly because as of today, the display is solely manage by the me.video api, that is the only one to access the canvas.

If I would implement multi-camera support, the first thing i would do would be to manage a canvas surface within the viewport, and probably modify the game loop in core.js to make one pass per camera, and each time passing by respective camera's rectangle area.

but another funny way to do it would be as well to use the following  :

http://www.pubnub.com/blog/lightweight-multiplayer-html5-games-with-pubnub-and-melonjs/

I guess it could be use to have 2 instances of the game within the same browser, but with the extra option that you could run it on 2 different browsers or machine in your local network :)

[Jay Oster]

Correct me if I'm wrong, but after the canvas is created, video.js doesn't do much with it, really. The real work happens in the entity update (check if each entity is within viewport), entity draw (passes canvas context), and finally viewport draw.

I wouldn't say "easy" is the right word, but with some work, this should definitely be doable. And would be way better than trying to synchronize two independent game engines. ;)

[peterl...@gmail.com]

Okay, I really want to do this. I've tried to patch all the relevant methods in me.game using the me.plugin.patch-function!

But now I wonder how on earth I attach the 2nd viewport to a canvas!

In theory how do I do this? 

Thank you for your awesome support! And forgive me for not answering directly to your other messages guys, I fucking love this framework, so easy to work with & gives me the power of browser gaming in a sweet way.

All the best, Peter.

[Jay Oster]

A lot more is necessary, but the only part needed for 'attaching' the canvas and the viewport is passing the canvas context2d to the draw method of each object within the viewport. Like this: https://github.com/melonjs/melonJS/blob/master/src/core.js#L1477-1500

[peterl...@gmail.com]

Akward noob question #14290128490. I've modified the brains out of your source and have an ( almost perfectly ) working viewport delivered to a Canvas. Now, how in god earth do I get it on the main viewport! I don't feel like it should be necesarry to manage on event window-resizing stuff++. Maybe There is an object I can attach a canvas to? Thank you for your excellent support!!

Wish you absolutely all the best ( and some more )!

[peterl...@gmail.com]

Here is a link to what the splitscreen project it looks like and works now. I know its horribly implemented, I just want to make it work before I build 'clean' code... Maybe this might aid someone who knows how I can get the second screen moved to the original viewport. :v

http://myfutureselfandme.com/split_2/

.. ( yea I just edited the lib directly for this one without using the patch module... SRYY ! lol )

All the best.

[Jason Oster]

I will have a closer look at this later! Definitely cool that you have come up with something usable in such a short time!!

The second canvas is really not ideal, as you can tell, but makes it much easier to get working! The next steps will be reducing the area for the original viewport to cover only half of the canvas. And then placing the second viewport in the unused area of the canvas. :)

Also a nice optimization, if you haven't already thought of it is performing the update loop and draw loop on both viewports simultaneously. I mean, you DO NOT want to update an object more than once per loop; you just want to know whether it is visible in one (or both) viewport. I would actually set a private variable on every object with a link the the viewports they appear in. That will make drawing to the proper viewport effortless. :D

Sounds like great progress so far! This is a feature we should consider integrating, for sure!

--
You received this message because you are subscribed to a topic in the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/melonjs/caOfioYFMrw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[peterl...@gmail.com]

Thank you for all the time. I made it work! :D Check it out!

http://myfutureselfandme.com/split_2/

Just need to clean this bad girl up now. LOL.

[Jay Oster]

Totally awesome! I just tried it out. I haven't looked into the code, but functionally, it looks like it is there. :D

[peterl...@gmail.com]

Damn it! i just wrote a long and funny message about my gross code but it disappeared!

Anyway, I have attached a zip-file containing the newest build with

commented code and guidance to what in hell is going on in my dirty, dirty code. 

Be sure to read the README before looking into the code, it will supply you with 

some hints on how exactly I raped the lib. And keywords to search for with ctrl+f / cmd+f.

I wish thee all the best & g00d luck.