Forum ‹ Multiplayer ‹ One player loads an image for others to see?

[loucsam]

Would it be possible for a few people to be in a room, similar to say the DrawPad application and one player loads an image from his system into the room and the others can then see it? (p.s. Using flash)

[loucsam]

By the way I am expecting a no to this question.

I want to be able to allow the people in the room to choose an image and then have any of the players in the room to be able to move icons/sprites/small images around over the top of this large background image, and to also be able to draw or write over the top.

Think of it as a team game tactics organiser where the background image is the overhead view of the map you are playing, and the small images represent key parts of the game, eg a player of a certain class, where someone can build something (eg in TF2 a turret gun(sg)), and draw arrows or a shape to signify where the player should move to or area they should be covering.

Ultimately each map can be a resource and not need to be loaded by a user, but would be nice so I don't need to pre-populate the swf or dll with every map you want to talk tactics about.

The concern is the file will become large as you increase the number of images. Alternatively one map per application and call a different app for each map, but if I change the underlying code, every app will also need changing.

[playstation3Dood]

perhaps what you could do is if somebody wants to send every other user an image, he could upload it onto one of the millions of free image hostin sites, then let him input the URL into the client and the client sends the URL as a message to all the others, then flash loads the image from the website into a movie clip and voila! This is probably not the ideal way to send pictures, but it seems to be the best you can do right now with playerio.

as for drawing i suppose you could use lineTo to draw, then send the coorddinates to the other clients and they also draw to the same coords.

hope this helped.

[Benjaminsen]

You should also be able to send image data from one client by sending ByteArrays between clients.

To be able to save your world you will have to wait for the Data API

[playstation3Dood]

Yup i stand corrected. Something like ByteArray would be far superior to my idea. Sorry relatively new to AS3

[loucsam]

I'll see what I can dig up about sending bytearrays.

The following example loads an image from a site nicely

Code: Select all

var imageLoader:Loader = new Loader();
var image:URLRequest = new URLRequest("http://img.ngfiles.com/emoticons/emote-1.gif");
imageLoader.load(image);
addChild (imageLoader);
imageLoader.x = 200;
imageLoader.y = 300;

Understanding how to implement this in the DrawPad example and how each client sees the same thing is also something I'll need to look into. Completely new to all this.

[default0]

Maybe letting the users only use images from URLs, so that they need to upload them somewhere and then pass the URL to all clients so that every client loads the image?

Would be a possibility I guess.

Best regards

[mindfoolgames]

I did a quick test on this tonight. Sending ByteArrays is easy in PlayerIO.

I had more issues on the client side with the serializing/deserializing.

On the Client Side I added the following to the handleJoin function:

Code: Select all

imageLoader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
imageLoader.load(new URLRequest("http://www.mindfoolgames.com/images/layout_jovyInCircleW.jpg"));

connection.addMessageHandler("imageLoadResp", function(m:Message, x:int, y:int, b:ByteArray) {
   trace("imageLoadHandler--> " + x + "," + y + "  " + b.length);            
   var bm3:BitmapData = new BitmapData(x,y);
   bm3.setPixels(bm3.rect, b);
   addChild(new Bitmap(bm3));
})


I also added the following function:

Code: Select all

private function loadComplete(event:Event):void {
   var loadedImage:Bitmap = Bitmap(imageLoader.content);
   var bitmap:BitmapData = loadedImage.bitmapData;
   var bytes:ByteArray = bitmap.getPixels(bitmap.rect);

   connection.send("imageLoad", loadedImage.width, loadedImage.height, bytes);
}

On the server side I added the following to the switch statement in the GotMessage method:

Code: Select all

case "imageLoad":
   Console.WriteLine("imageLoad--> " + message.GetInt(0) + "," + message.GetInt(1));
   Broadcast("imageLoadResp", message.GetInt(0), message.GetInt(1), message.GetByteArray(2));
   break;

Note that while this works, it's sending raw bitmap data across the wire, so it shouldn't be used for production.

The JPEG and PNG encoding from as3corelib could be added just as easily as the bitmap manipulation I did and would provide a much more streamlined solution.

[Benjaminsen]

.... The JPEG and PNG encoding from as3corelib could be added just as easily as the bitmap manipulation I did and would provide a much more streamlined solution.

The as3corelibs can be had here http://code.google.com/p/as3corelib/

I don't suggest you use this for video streaming however, while its more than possible to do something like this, streaming jpeg images is not exactly efficient. Thus you will eat up your traffic allotment quite fast.

[loucsam]

The way I see my app going is it will have certain images contained within the swf, there'll be buttons on screen where a player can choose a particular image(eg an overhead image of a TF2 (FPS game) map) from a library of images (hopefully they aren't too large).

There will also be the ability for me to select an image from a URL I type into an input field, which will load the image to MY screen only.

Ideally when a map is selected and shown on MY screen (via either method above), I can then choose to broadcast it to others screens, and they can choose whether or not to accept it. Hopefully this eliminates players getting unwanted broadcasts and changes to their screen.

Ideally also each person in the room could potentially work on their own screen, including drawing over the image, or placing icons/sprites over it, and then choose to display what he is doing on other peoples screens or only let it be seen by himself.

Ideally also each person could return to his own screen to continue working on that. So 2 screens, one he is working on, and one that is broadcast by another person, and can flip between them.

And of course everyone in the room with the ability to collaborate on one screen.

That's a few of my ideas anyway.

Questions:

1. What is the bandwidth you refer to, that may cause issue? Between players and playerio.com ?

2. What necessitates the encoding/encrypting of the images? (eg they aren't sensitive images, doesn't matter if seen by other parties, or purely an efficiency thing?, like compression?)

p.s. Thanks for the replies all, and the code mindfool, that small code has helped me understand concepts of moving data around from place to place (between players/server/client)

Cheers,
Max

[mindfoolgames]

Information about bandwidth restrictions can be found in the "Pricing" link at the top of this page.

The encoding I was referring to was for compression/bandwidth purposes.

If you are using static images it would be much cheeper from a bandwidth perspective to simply pass a URL through PlayerIO servers and let the clients load the image themselves from your own hosting account. Of course that also only works for people who have webspace to host images (that's typically not a problem for people these days).

It sounds like the images in your use case are pretty dynamic, so maybe you would still be better to pass things through PlayerIO.

[loucsam]

Having a go at the code above and I am getting an error on imageLoader, any ideas why? (p.s. I am using CS3)

1120: Access of undefined property imageLoader.

Code: Select all

      var imageLoader:Loader = new Loader();
         imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
         imageLoader.load(new URLRequest("http://www.mindfoolgames.com/images/layout_jovyInCircleW.jpg"));

         connection.addMessageHandler("imageLoadResp", function(m:Message, x:int, y:int, b:ByteArray) {
              trace("imageLoadHandler--> " + x + "," + y + "  " + b.length);           
              var bm3:BitmapData = new BitmapData(x,y);
              bm3.setPixels(bm3.rect, b);
              addChild(new Bitmap(bm3));


         })

Code: Select all

private function loadComplete(event:Event):void {
   var loadedImage:Bitmap = Bitmap(imageLoader.content); // <--------------THIS LINE HERE
   var bitmap:BitmapData = loadedImage.bitmapData;
   var bytes:ByteArray = bitmap.getPixels(bitmap.rect);

   connection.send("imageLoad", loadedImage.width, loadedImage.height, bytes);
}

Cheers,
Max

[loucsam]

Replaced this line:
var loadedImage:Bitmap = Bitmap(imageLoader.content);

with the following to get it to work

var loader:Loader = Loader(event.target.loader);
var loadedImage:Bitmap = Bitmap(loader.content);

[mindfoolgames]

Sorry for the confusion (that's what I get for cutting and pasting my code).

I had imageLoader defined at the class level, so it worked fine for me.

If you don't want it defined at the class level (which I could certainly understand), you could also replace...

var loadedImage:Bitmap = Bitmap(imageLoader.content);

with...

var loadedImage:Bitmap = Bitmap(event.target.loader.content);

[mindfoolgames]

Since I was still thinking about this topic, I decided to modify my solution to use as3corelib (as we discussed above) and send JPEGs as messages instead of BitMaps.

You need to download as3corelib and either add it's classpath to your FLA or place it's src folders in your project's directory structure (standard stuff).

On the Client I added the following import statement...

Code: Select all

import com.adobe.images.JPGEncoder;

On the Client Side I added the following to the handleJoin function:

Code: Select all

var imageLoader:Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
imageLoader.load(new URLRequest("http://www.mindfoolgames.com/images/layout_jovyInCircleW.jpg"));

connection.addMessageHandler("imageLoadResp", function(m:Message, b:ByteArray) {
   trace("imageLoadHandler--> " size= " + b.length);            
   var im:Loader = new Loader();
   im.loadBytes(b);
   addChild(im);
})



I also added the following function:

Code: Select all

private function loadComplete(event:Event):void {
   var encoder:JPGEncoder = new JPGEncoder(80);
   var rawBytes:ByteArray = encoder.encode(Bitmap(event.target.loader.content).bitmapData);
   
   connection.send("imageLoad", rawBytes);
}


On the server side I added the following to the switch statement in the GotMessage method:

Code: Select all

case "imageLoad":
   Broadcast("imageLoadResp", message.GetByteArray(0));
   break;

It's actually a little easier to convert between the as3corelib functions and the ByteArray. You also don't need to know the width/height of the image (so you don't need to pass that to/from the PlayerIO server).

So it's a little simpler and you have the added benefit of reduced file size. My example image was 131,200bytes as a bitmap and only 11,442bytes as a jpg.

[loucsam]

Wow that's a great reduction in filesize. Great work, I'll be sure to check it out.

As to the problems I had, well I am still completely new to understanding OOP principles and classes etc (mostly been doing as2, without classes) and was surprised I even got it to function (no pun intended) (I looked at the inline Flash IDE help at an example and just tried something I saw in that, without really fully understanding what I was doing, although I vaguely understood the imageLoader was unknown to the private function I think so had to be made known somehow.).

Something I'll get around to looking at next is that as I am using the DrawPad example as my base when I load the image and then draw, it appears behind the bitmap whereas I will want it to happen in front. I managed to remove the fade so it stays on screen at least.

I've also got an away3D based game (logic puzzle using a chessboard, but it isn't a game of chess, think more minesweeper involving a chess board, and chess piece move logic) about half done and only single player logic and really looking forward to attempting to go multiplayer using this API/service.

Anyway thanks for your help, it has been invaluable in getting started.

I need to get into more demo source to understand things better.


Regards,
Max