Corona use object properties from Tiled layers - json

I am new to Lua scripting, and game development. So please I am just a noob in Lua.
I have searched the net for solutions to my problems, without any luck.
I use Photoshop, Corona, Dusk, json and Tiled on windows7.
I am creating a "board" like game, i.e. Setlers. I am using a world map, as the background. The background image of the game area is a world map (world.png file). I have no problem here.
I would like to create transparrent clickable objects matching the countrys borders on my gamemap with all parameters and values (I have added in Tiled) stored in the object. So When the player clicks on the country the transparrent object (on top of the map) is the one clicked and an eventlistener acts on the click.
In Tiled I can create all the objects I need, naming them + assigning parameters and other values.
If I add object.alpha value in Tiled, the alpha value is passed on to corona and working there.
How can I read these data from the json/tmx file in Corona and adding them to a lua table?
The way I am thinking to use the Tiled map and its objects, is to create one polyline trace of each country’s border (creating one object per country). Then place each “country traced object” on top of the world.png map, also naming the object with the countrys name like “object.name = TileBritannia” and also the other properties for use in game.
My problem is getting the objects info, like object.name, and an eventlistener reacting to a click on the object.
Is a polyline the right way to create a clickable area on a map, when I use a png file as a background image?
What is the best way to create a country border objects, in one layer or with all countries as individual object layers in Tiled.
Can I create one layer with sub objects and still access them in my code?
How do I get the object name and other properties, set in Tiled.
When I try to use the (local britannia = tiledMap:load("britannia.json")) the "load" is not working, getting a nil value.
I am looking for a code that will extract/get/read the object.name i.e. “objBritannia” or "TileBritannia". from the json/tmx file.
When I try to read the different parameters from the json file, I don't get the result I expect. I get the result = function: 046A73B0, was hoping for an object name of some sort.
Please provide links to or code example.
I have edited the question.
Thanks

For questions 1 and 2: I have not used Tiled, but based on Corona Tiled, you have the right strategy in mind. That page makes me think that you can just use tap event listener to detect tap. If you are having issues with the example on that web page, please update your question to be more specific. If tap event handling doesn't work (maybe you're talking about a different Tiled lib), look a Polygon fill and Point in Polygon detection, because that's basically what you need to do. Try some stuff from there. If it still doesn't work for you, then update your question with specifics otherwise it will be likely get closed (it is a little too broad as it is).
For #3, Lua is a dynamic language that supports adding properties to objects in one line. So upon the example on the Corona Tiled page, all you would have to do is
tiledMap = require("tiled")
local britannia = tiledMap:load("britannia.json")
britannia.name = "Britannnia"
local Zulu = tiledMap:load("zulu.json")
zulu.name = "zulu"
Naturally you will probably have a whole bunch so you will create a function that you call for each tile. It's not clear what map.layer["objBritannia "].nameIs("TileBritannia") is supposed to do so I can't comment.

Related

Draw polygon using ngmap

I'm trying to draw polygon on my map using ngmap. The map is displayed correctly as this example is showing, but when I finish the draw, this is what I'm getting:
ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
I used the same code of the example.
My questions:
1- How can I solve this error?
2- If I want to let the user draw only polygon form, I have tried to set the value of drawingMode to "polygon" but I'm always having the other draw options (circle...). How can let only the polygon draw?
3- How can I let the user clear the drawn polygon?
4- Is it possible to detect the action of putting (drawing) every points. I mean that to draw a line in the polygon for example I need at least two points. Can I detect when the user draw the first point then the second and get its coordinates?
Edit
This is the whole error that I see when I include ng-map.js instead of ng-map.min.js :
Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44)
at Array.reduce (native)
at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39)
at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70)
at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249)
Edit 2
I solved the first question:
My problem was that I'm using routes in the app.js. So the html and the controller are linked in it. To solve the problem, I put $scope.onMapOverlayCompleted instead of
var vm = this;
vm.onMapOverlayCompleted because I don't write the the ng-controller="DrawingManagerCtrl as vm" in my HTML. Then in the HTML I put on-overlaycomplete="onMapOverlayCompleted()" and it works.
I solved also the second question by using:
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
I'm want now to solve the other problems.
Any help please?
3
As the example you referenced shows, the overlaycomplete callback function receives e (Event) as the first parameter. This OverlayCompleteEvent object contains reference to the drawn overlay at Event.overlay (see docs of the original Google Maps JS API more info, since ng-map is only wrapper of the original API after all, specifically "OverlayCompleteEvent object specification" section).
Using that you can get the reference to the created overlay, store it and then later call .setMap(null) on it to delete it from map. E.g:
$scope.myDrawnOverlays = []; //array where you store drawn overlays
$scope.onMapOverlayCompleted(e){
...
myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn
}
$scope.deleteAllDrawnOverlays(){
for(var i = 0; i < myDrawnOverlays.length; i++){
myDrawnOverlays[i].setMap(null); //remove overlays from map one by one
}
myDrawnOverlays = [];
}
Then whenever you want to delete all overlays, just call the function $scope.deleteAllDrawnOverlays (you can tie it to some button using ng-click or do whatever you want with it).
4
This is NOT possible using google.maps.drawing.DrawingManager which is used in your example. The reason is that DrawingManager doesn't support events for clicking at the map while drawing (see docs again for possible events, section "DrawingManager class").
So except hacky workarounds which could break any time with new api release, the only possible solution is to implement drawing of polygon yourself and not use DrawingManager. Check for example this SO answer, specifically the referenced example (right-clicks on map). They don't use ng-map, but basically what would you have to do is to add on-click="mapClickHandler" to your ng-map, in the mapClickHandler get position where you clicked on map, draw Marker there which would look like a dot and if you have more dots connect them with lines.
This is however too much for one question, you would have to probably read up on ng-map and relevant sections of Google Maps Js Api yourself.

How to zoom and pan a gameobject not the whole scene in unity

I have several images in my scene, I managed to make the zoom and pan work but the problem is, All of the images are zooming in at the same time. The scripts are place on each gameobject. I used gameobject for the images.
You need apply a filter so you just appli the transformations to one game object, since every one of them are GameObjects I recommend use raycast to sellect an object and then activate his Zoom.cs script just for this object.
I sugest to use just one Zoom.cs in the scene instead of every object having his own copy, then change your function to work with one game object as a paremeter and, when you touch your game object then that object will be the one to suffer the transformation.
If you doesn't want to implement a raycast or change your function at all, then you could set all the images inside a matrix, or use an index system, the central image, or the index you designed, will be the one to suffer the transformations. so you can scroll betwen your gaery and be sure that just the image that you designate in your matrix/index will be the choosen one. The trouble here is that you need to fully control the scroll animation so no one of the images will be in a wrong place like in between two index.

How To Merge Objects In AS3, So That They Become Draggable as a Whole

I'm quite new to as3, and I'm heading with a (for me complex) problem.
I have some identical objects (movieclips), wich I made draggable sqaures.
But I want to achieve the following thing:
When I drag one of these objects to another one, I want them to "attach" to each other, just like in some "building games".
And after two (or more) objects are attached, I need them to be draggable as a new whole.
Which means if you click on any of them, every object drags along, en they stay om the same attached position.
I honestly don't know how to do this.
I would appreciate if anyone could provide some examples or code.
Thanksin advance!
Here's a simple algorithm for you:
1) Make an array that will hold "draggable" objects.
2) Upon selecting the first object add it to the array.
3) On FRAME_ENTER move (translate) all the object that are in the draggable array and check objects in the array collision with other objects. If the collision is true, add those objects to the draggable item array.
People here won't write code for you, it's up to you. But if you run into a problem where your code does not work how you intend it, feel free to post it and surely some help will come!

Shadow-casting shaders in Stage3D

I've been working a lot with AGAL vertex and fragment shaders. I've got individual objects lit correctly (including specular shading) but I'd like to have objects cast shadows on OTHER objects. I have looked online, but I think most people working directly with AGAL have built custom Stage3D libraries and the shadow-casting solution doesn't seem to be in the public domain. Anyone willing to change that?
I'd like to know how to get an object to cast a shadow on another. I can't post what I've tried, because I can't get my head around where to begin on this problem. How would you pass the information (whether other objects are blocking the light) into another object's shader?
Thanks.
IT's called Deferred shading, you have to do 2 pass of vertex and fragment shaders.
In the first pass you accumulate informations about distances, normals, occlusion...
In the second pass you render and apply the informations of the first pass to make shadows.
Another options is ShadowMapping:
Basic shadowmap
The basic shadowmap algorithm consists in two passes. First, the scene is rendered from the point of view of the light. Only the depth of each fragment is computed. Next, the scene is rendered as usual, but with an extra test to see it the current fragment is in the shadow.
The “being in the shadow” test is actually quite simple. If the current sample is further from the light than the shadowmap at the same point, this means that the scene contains an object that is closer to the light. In other words, the current fragment is in the shadow.

How can I select and drag a line in canvas?

I'm now working on a painting app. It uses a html canvas. Users can draw shapes on the canvas.
Now a problem comes to me. I want to select the line that I drew on the canvas. When it is selected, I can drag it or delete it. How can I implement it ? Any good ideas?
It might be worth your while to have a look at https://github.com/canvimation/canvimation.github.com this contains the source code for a drawing application using canvas.
You should note that this application is being re-coded but there is not yet a working version using the new code on line. The new source code is in the stage1 branch. Hopefully this new code is easier to understand than the old code and the code referred to below comes from the stage1 branch.
Basically a shape object is created for each shape drawn which includes all data about eh shape, including path data and data giving the rectangular boundary around the shape. When the "boundarydrop" div is clicked then function checkBoundary is called and data about the shift key and cursor position are passed. Then for each shape the first check is to see if the cursor is within the boundary of the shape and if so then a more refined check is carried out. For a closed shape the check is if the cursor in inside the shape and for an open shape if the cursor is close to the path.
There are further complications depending whether the shift key is held down or not and which group the shape belongs to. However the basics are there.
Functions to check out
in index.html
shiftdown
getPosition
in scripts/drawboundary.js
checkBoundary
isIn
isOn
in scripts/shape.js
shape
A working online version of the application is at http://canvimation.github.com/ but this uses the older code in the master branch and there are some bugs but it will give you some idea of what the application does.
Hope this is of some help
There is a library called kinetic.js, with it you can keep track of the shapes you draw on the canvas with the select feature.
Here is the link: https://github.com/ericdrowell/KineticJS