How to make a grid over world map with buttons?
A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: How to make a grid over world map with buttons?

  1. #1
    Junior Member
    Join Date
    Aug 2010
    Posts
    10

    How to make a grid over world map with buttons?

    Hey all

    Im making a game, and im very new to this, so please explain as good as you can.

    I have started with making the background which is a simple world map. I put in script so you can scroll around the map with the arrow keys.

    Now this will be a wargame, so i need some kinda grid over the map, like buttons of 50x50 placed all over the map, like the board game Risk for an example, so people can fight for territory. I tried doing this with buttons but made the game file very large, and it used to much ram.

    Anyone got an idea to how this could be achieved?

    Thanks
    Jesper

  2. #2
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    No one got any suggestions?

  3. #3
    :
    Join Date
    Dec 2002
    Posts
    3,517
    The more information you can provide and the more specifc your questions, the more likely people are to respond.

    What version of Flash and Actionscript are you using?
    How big is your map?
    What will be the purpose of the grid?
    Didn't the board game use irregular shapes, like the outlines of countries?

  4. #4
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    Im using CS4, AS3. Map is 2000x2000.

    The purpose of the grid will be used for people to click on a certain region, then he can choose to place troops there to defend it. Other people from enemy regions may then attack that region and the ones defending it. etc.

    Yes some shapes will be irregular. I thought of importing images of the regions and convert them to buttons, but i dont know if that will do.

  5. #5
    :
    Join Date
    Dec 2002
    Posts
    3,517
    Instead of buttons, here's one possible approach - that uses a single bitmap of different colored regions as hotspots...
    Code:
    // In the library is a bitmap that was each region a different color.
    // On the stage is movie clip 'mapMC' that has the bitmap on the bottom layer.
    
    // List of colors that correspond to each region.
    var map:Dictionary = new Dictionary();
    map["000000"]="not a region";
    map["807355"]="Region 0";
    map["616b41"]="Region 1";
    map["ffff00"]="Region 2";
    map["949449"]="Region 3";
    map["ffff66"]="Region 4";
    map["505027"]="Region 5";
    map["808000"]="Region 6";
    map["ffff80"]="Region 7";
    map["ff8080"]="Region 8";
    map["800000"]="Region 9";
    map["804040"]="Region 10";
    map["ff0000"]="Region 11";
    map["dee679"]="Region 12";
    map["0000ff"]="Region 13";
    map["004080"]="Region 14";
    map["008cff"]="Region 15";
    map["0080ff"]="Region 16";
    map["000080"]="Region 17";
    map["275900"]="Region 18";
    map["ff915b"]="Region 19";
    map["804000"]="Region 20";
    map["ff8000"]="Region 21";
    map["c27300"]="Region 22";
    map["633317"]="Region 23";
    map["ae5700"]="Region 24";
    map["004141"]="Region 25";
    map["008000"]="Region 26";
    map["00a6a6"]="Region 27";
    map["009c41"]="Region 28";
    map["55ff80"]="Region 29";
    map["80ff31"]="Region 30";
    map["004000"]="Region 31";
    map["80ff00"]="Region 32";
    map["008040"]="Region 33";
    map["008080"]="Region 34";
    map["8000ff"]="Region 35";
    map["ff00ff"]="Region 36";
    map["800040"]="Region 37";
    
    //
    var me:Object;
    var hexString:String;
    var colorBmp:Bitmap;
    var colorData:BitmapData;
    
    var bounds:Dictionary = new Dictionary();
    bounds[mapMC]=new Rectangle(stage.stageWidth-mapMC.width,stage.stageHeight-mapMC.height,mapMC.width-stage.stageWidth,mapMC.height-stage.stageHeight);
    
    mapMC.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    
    function grabMe(e:MouseEvent):void {
    	me=e.currentTarget;
    	me.addEventListener(MouseEvent.MOUSE_UP, clickMe);
    	stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
    }
    function dragMe(e:MouseEvent):void {
    	me.startDrag(false, bounds[me]);
    	me.removeEventListener(MouseEvent.MOUSE_UP, grabMe);
    	me.removeEventListener(MouseEvent.MOUSE_UP, clickMe);
    	e.updateAfterEvent();
    }
    function dropMe(e:MouseEvent):void {
    	me.stopDrag();
    	stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
    	me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    }
    function clickMe(e:MouseEvent):void {
    	me.removeEventListener(MouseEvent.MOUSE_UP, clickMe);
    	stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
    	me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    	getColour(e);
    }
    function getColour(e:Event):void {
    	// this is why bitmap needs to be on the bottom layer
    	colorBmp=me.getChildAt(0);
    	colorData=colorBmp.bitmapData;
    	hexString=colorData.getPixel(colorBmp.mouseX,colorBmp.mouseY).toString(16);
    	while (hexString.length < 6) {
    		hexString="0"+hexString;
    	}
    	trace(map[hexString]);
    }
    Last edited by dawsonk; 08-13-2010 at 10:59 AM.

  6. #6
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    Wow, thats amazing Dawsonk, how did you make the map function like that?

    I have my own map, think its possible to do the same with that?

  7. #7
    :
    Join Date
    Dec 2002
    Posts
    3,517
    Quote Originally Posted by jesperj86 View Post
    Wow, thats amazing Dawsonk, how did you make the map function like that?
    Are you asking about the Dictionary object 'map'?

    Quote Originally Posted by jesperj86 View Post
    I have my own map, think its possible to do the same with that?
    Yes.

    Here is some code to make it easier to generate the dictionary entries...
    Type the description in the input box, then click the region.
    When done, click the btn.
    Copy the trace output and paste it into the code.
    Code:
    //
    // added a button 'btn' on the stage and 
    // added an input text box 'intxt' on the stage
    // remember to delete them after generating the dictionary
    //
    function getColour(e:Event):void {
    	// this is why bitmap needs to be on the bottom layer
    	colorBmp=me.getChildAt(0);
    	colorData=colorBmp.bitmapData;
    	hexString=colorData.getPixel(colorBmp.mouseX,colorBmp.mouseY).toString(16);
    	while (hexString.length < 6) {
    		hexString="0"+hexString;
    	}
    	//trace(map[hexString]);
    	storeColor(hexString);
    }
    //
    // -------------- delete all this (and call to storeColor above) after using, only needed to generate dictionary entries
    //
    var test:Array = new Array();
    var saved:Array = new Array();
    function storeColor(hex:String):void {
    	if (test.indexOf(hex)==-1) {
    		test.push(hex);
    		saved.push([hex, intxt.text]);
    		intxt.text="";
    	} else {
    		intxt.text="already got";
    	}
    }
    
    btn.addEventListener(MouseEvent.CLICK, doList);
    function doList(e:Event):void {
    	for (var i:* in saved) {
    		trace("map[\""+saved[i][0]+"\"]=\"" + saved[i][1]+"\";");
    	}
    }
    Last edited by dawsonk; 08-18-2010 at 12:32 PM.

  8. #8
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    My map dont have the same regions as the one you used. My map is only seperated in continents, no country or state regions. How do i make those? do i just need to edit the map in photoshop and create the regions myself or how does it work?

    Thanks again for all your help

  9. #9
    :
    Join Date
    Dec 2002
    Posts
    3,517
    Yes, edit your map in photoshop so that each region is a different color.

  10. #10
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    Ok excellent

  11. #11
    :
    Join Date
    Dec 2002
    Posts
    3,517
    Quote Originally Posted by jesperj86
    Just wondered if u have any suggestions on how to show if a region is captured by others etc.

    Im gonna make 4-5 alliances. But i need a way for people to see who owns what. Like regions owned by alliance 1 is red, and alliance 2, blue and so, but with my current region setup that wouldnt work ofc. So you know any tricks that could work for this?

    Thanks

    Okay, mapMC now has 3 layers. Bottom layer is same - bitmap of map with each region a different color. Middle layer - bitmap of map with all regions the same color. Top layer - bitmap that is all transparent and same size as other bitmaps.

    Note that other layers can be added to the mapMC as long as these three are on the bottom.

    Code:
    // In the library is a bitmap that was each region a different color.
    // On the stage is movie clip 'mapMC' that has the bitmap on the bottom layer.
    
    // List of colors that correspond to each region.
    var map:Dictionary = new Dictionary();
    map["000000"]="not a region";
    map["ffffff"]="not a region";
    map["807355"]="Region 0";
    map["616b41"]="Region 1";
    map["ffff00"]="Region 2";
    map["949449"]="Region 3";
    map["ffff66"]="Region 4";
    map["505027"]="Region 5";
    map["808000"]="Region 6";
    map["ffff80"]="Region 7";
    map["ff8080"]="Region 8";
    map["800000"]="Region 9";
    map["804040"]="Region 10";
    map["ff0000"]="Region 11";
    map["dee679"]="Region 12";
    map["0000ff"]="Region 13";
    map["004080"]="Region 14";
    map["008cff"]="Region 15";
    map["0080ff"]="Region 16";
    map["000080"]="Region 17";
    map["275900"]="Region 18";
    map["ff915b"]="Region 19";
    map["804000"]="Region 20";
    map["ff8000"]="Region 21";
    map["c27300"]="Region 22";
    map["633317"]="Region 23";
    map["ae5700"]="Region 24";
    map["004141"]="Region 25";
    map["008000"]="Region 26";
    map["00a6a6"]="Region 27";
    map["009c41"]="Region 28";
    map["55ff80"]="Region 29";
    map["80ff31"]="Region 30";
    map["004000"]="Region 31";
    map["80ff00"]="Region 32";
    map["008040"]="Region 33";
    map["008080"]="Region 34";
    map["8000ff"]="Region 35";
    map["ff00ff"]="Region 36";
    map["800040"]="Region 37";
    map["80ff80"]="Region 38";
    map["400040"]="Region 39";
    
    //
    var me:Object;
    var hexString:String;
    var colorBmp:Bitmap;
    var colorData:BitmapData;
    
    var bounds:Dictionary = new Dictionary();
    bounds[mapMC]=new Rectangle(stage.stageWidth-mapMC.width,stage.stageHeight-mapMC.height,mapMC.width-stage.stageWidth,mapMC.height-stage.stageHeight);
    
    mapMC.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    
    function grabMe(e:MouseEvent):void {
    	me=e.currentTarget;
    	me.addEventListener(MouseEvent.MOUSE_UP, clickMe);
    	stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
    }
    function dragMe(e:MouseEvent):void {
    	me.startDrag(false, bounds[me]);
    	me.removeEventListener(MouseEvent.MOUSE_UP, grabMe);
    	me.removeEventListener(MouseEvent.MOUSE_UP, clickMe);
    	e.updateAfterEvent();
    }
    function dropMe(e:MouseEvent):void {
    	me.stopDrag();
    	stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
    	me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    }
    function clickMe(e:MouseEvent):void {
    	me.removeEventListener(MouseEvent.MOUSE_UP, clickMe);
    	stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
    	stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
    	me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
    	getColour(e);
    }
    function getColour(e:Event):void {
    	// this is why bitmap needs to be on the bottom layer
    	colorBmp=me.getChildAt(0);
    	colorData=colorBmp.bitmapData;
    	hexString=colorData.getPixel(colorBmp.mouseX,colorBmp.mouseY).toString(16);
    	while (hexString.length < 6) {
    		hexString="0"+hexString;
    	}
    	trace(hexString +" : "+map[hexString]);
    }
    // this is the function to called to change a region to a different color
    function setColour(mc:Object,locColor:String, newColor:uint):void {
    	if (map[locColor]!="not a region"&&map[locColor]!=undefined) {
    		var oColor:uint=uint("0xFF"+locColor);
    		colorBmp=mc.getChildAt(0);
    		colorData=colorBmp.bitmapData;
    		var rect:Rectangle=new Rectangle(0,0,colorBmp.width,colorBmp.height);
    		// this is why empty transparent bitmap needs to be on the third layer
    		mc.getChildAt(2).bitmapData.threshold(colorData, rect, new Point(), "==", oColor, newColor, 0xFFFFFFFF, false);
    	}
    }
    // note the new color needs to be ARGB
    setColour(mapMC, "807355", 0xFFFF0000);
    setColour(mapMC, "804000", 0xFFFF0000);
    setColour(mapMC, "800000", 0xFFFF0000);
    setColour(mapMC, "ffff66", 0xFF0000FF);
    setColour(mapMC, "dee679", 0xFF0000FF);
    Last edited by dawsonk; 09-08-2010 at 05:02 PM.

  12. #12
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    Yup that worked like a charm. What would i do without you lol

    Thanks

  13. #13
    Junior Member
    Join Date
    Aug 2010
    Posts
    10
    lol nvm im stupid, simple typo.

  14. #14
    Junior Member
    Join Date
    Aug 2010
    Posts
    7
    come in to learn

  15. #15
    Registered User
    Join Date
    Mar 2013
    Posts
    1
    Dowsonk or jesperj86,

    I was trying to do a similar thing, making a risk like game, so I found this and thought that it might be a good start (Dowsonk's actionscript for a map) but I don't have something set up right. I made a bitmap with the colors listed in the actionscript and a movie clip that was titled and given an instance name of mapMC, however, I am getting an output that says

    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()
    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@37105139 to flash.display.Bitmap.
    at Untitled_fla::MainTimeline/getColour()
    at Untitled_fla::MainTimeline/clickMe()

    Can anybody help me figure this out. Thank you.
    j3dub

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center

Poll by Flashkit.com