Cocos2d js: load scene from json - cocos2d-js

I'm trying to understand how to make Cocos Studio exported scenes run inside cocos2d js project. seems like there is no documentation at all.
I tried to instantiate scene object in different ways
var scene = ccs.csLoader.createNode("res/MainScene.json");
// or
var scene = cc.load("res/MainScene.json");
//res/MainScene.json is declared in resources 100%
but scene variable always contains empty objects (node and action).
I debugged load and createNode methods with step into feature and found that there is no proper parsers for scene.
I've stuck and don't know where to go next.
Does anyone know for sure if Cocos Studio is compatible with Cocos 2d JS?
UPDATE
here is the code I'm using to initialise the project
cc.game.onStart = function(){
cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false);
cc.view.adjustViewPort(true);
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);
resolution size
cc.view.resizeWithBrowserSize(true);
cc.LoaderScene.preload(g_resources, function () {
var scene = ccs.load("res/MainScene.json");
cc.director.runScene(scene.node);
}, this);
};
cc.game.run();
it's autogenerated by setup.py script, I just replaced Scene creation code with load from json.
after var scene = line of code scene object is null or undefined

Related

Mapbox GL JS : Popup onclick with external JSON

I am trying to display a popup onclick in Mapbox GL JS when the user clicks a polygon (It's a weather warning box during a Flash Flood Warning).
I have been using this example from Mapbox as a base, and -
This is my JSON file that I am trying to pull data from.
When I click the polygon, there is no popup. When I mouseover it, the cursor changes - so I know the basic possible issues like filename and directory structure are right.
My code below was modified from the example. I am trying to load the "description" of each polygon : (My map is called "topleftmapbox" and the JSON id is "FFWWarning")
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
topleftmapbox.on('click', 'FFWWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(topleftmapbox);
});
// The following code below runs correctly and changes the cursor on mouseover.
topleftmapbox.on('mouseenter', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
topleftmapbox.on('mouseleave', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = '';
});
I have a feeling that my issue is somewhere in this part of the code :
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
I am still new with Mapbox and I have tried looking through here and various sources online to fix this. I am hoping the issue is just that I have the description variable set wrong and that I am missing something simple.
I debugged the code that you provided and found that variable coordinates was containing an object having array of lat-lng.
Modifying that part should fix the issue.
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
In coordinates[0][0], second index determines the position of popup.
Here is the working code. https://jsbin.com/suzapug/1/edit?html,output

Efficient way of updating colors of model3d elements

I'm using a Viewport3DX with a lot of different MeshGeometryModel3D elements.
The User Interface integrates a slider that will update the opacity (alpha-value of PhongMaterials) of all model3d elements.
This is my current implementation of the code that updates the opacity:
geometryhandler.cs
public void UpdateOpacity(double value)
{
if (_mainWindow.MyBuildingComponents == null) return;
foreach (var component in _mainWindow.MyBuildingComponents)
{
// assign new material and later assign it back, to get the changes of the material recognized
var newmaterial = (_meshIdTogeometryModel3D[component.Id].Material as PhongMaterial).Clone();
// create new DiffusColor because setting the alpha property directly is not possible
newmaterial.DiffuseColor = new Color4(newmaterial.DiffuseColor.Red, newmaterial.DiffuseColor.Green, newmaterial.DiffuseColor.Blue, (float)value);
_meshIdTogeometryModel3D[component.Id].Material = newmaterial;
}
}
MainWindow.xaml.cs
private void UpdateOpacity(object sender, RoutedPropertyChangedEventArgs<double> e)
{
Geometryhandler?.UpdateOpacity(SliderModelOpacity.Value);
}
The UpdateOpacity function is called each time the value of the slider changes, iterates through a dictionary of MeshGeometryModel3D elements and updates their materials.
I tried many different version, but in the end this was the only implementation that did the job. However the update is very slow and 'laggy', even in release mode.
I recognized two things:
I had to clone the existing material, update it and assign it back to get the material to change in the viewport
I couldn't directly set the alpha-property of the Diffusecolor, but instead instantiate a new color object
Does somebody have an idea where the bottleneck might be here. Is it the cloning of the material, instantiating the new color or both? Or something completely different? Are there any better ways of doing the updates?
Curious to hear your suggestion. Thanks a lot already!
I'm going to reference my comment here so we can close out this question.
Are you using the "ValueChanged" event to trigger the UpdateOpacity? You might want to look into only updating the Opacity when the user is done dragging the slider: social.msdn.microsoft.com/Forums/vstudio/en-US/…. The only other suggestion I have is to try and combine/group together elements that have the same base color, so there are fewer material changes required with the opacity update.
...
msdn.microsoft.com/en-us/library/bb613553.aspx

How to set a component published attribute

I have a dart-polymer component mediator-form that I would like to add programmatically to another component. That I have done successfully. However, mediator-form is used several times. For my purpose I would like to pass #published data in the form
<mediator-form mediator='Medication'>
where the published mediator data is used.
My problem is I don't know how to set the mediator='Medication' programmatically.
My attempt is shown below
.html
<link rel='import' href='mediator_form.html'>
.dart
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
does not work. newElement does not have a setProperty() method so it does not seem possible.
Any help is appreciated. Thanks.
This should work
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
maybe it only works after you added it to the DOM (haven't tried myself this way).
This should also work:
var newElem = (new Element.tag('mediator-form') as MediatorForm)
..mediator = 'Medication';
If it doesn't you probably haven't imported the element.
You can set value directly on dart object, but to have that object you have to wait at least one cycle of event loop to give polymer a chance to instantiate your object in a DOM:
document.body.append(new Element.tag("mediator-form"));
// Delaying the following after element is instantiated
Timer.run((){
MediatorForm form = document.body.querySelector('mediator-form');
form.mediator = "Medication";
});

Copy layer-style(effect) with settings

i am writing a script for photoshop and I´m looking for a way to copy a layer-style from one layer to another. The applied layerstyle can vary so I must be able to look for any possible style and copy it. I found some code to copy a layer style but the settings won´t be copied. Using the script listener does not help me much because it´s all hardcoded..
Is there a way to also copy the settings of a style? And a way to do this for all possible styles?
It is my understanding that Adobe does not have any methods for retrieving styles or style properties in the scripting interface. Apparently though, this can be done manually through Action Manager code. This post in the Adobe forums discuss some of the ways to go about doing that: How to get the style of a layer using Photoshop Scripting ?
I Haven't tested this but this maybe what you are looking for:
if (app.documents.length > 0 && app.activeDocument.layers.length > 1) {
transferEffects(app.activeDocument.layers.getByName("styleLayer"), app.activeDocument.activeLayer);
};
// function to copy layer effects of one layer and apply them to another one
function transferEffects(layer1, layer2) {
app.activeDocument.activeLayer = layer1;
try {
var id157 = charIDToTypeID("CpFX");
executeAction(id157, undefined, DialogModes.ALL);
app.activeDocument.activeLayer = layer2;
var id158 = charIDToTypeID("PaFX");
executeAction(id158, undefined, DialogModes.ALL);
} catch (e) {
alert("the layer has no effects");
app.activeDocument.activeLayer = layer2;
}
};

How to three. Js 3 d diagram its texture for you want pictures by the formation of the material?

var crateTexture = new THREE.ImageUtils.loadTexture( 'img src="1.jpg' );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var cube = new THREE.Mesh( THREE.GeometryUtils.clone(cubeGeometry), crateMaterial );
cube.position.set(-60, 50, -100);
scene.add( cube );
I tried the following this but is black, and did not show what I loading in pictures
There are a few things that could be causing this for you.
Your first line should be the following:
var crateTexture = new THREE.ImageUtils.loadTexture( '1.jpg' );
Note that we are giving loadTexture a normal URL and not an HTML attribute.
The next most likely cause of why you are seeing no texture is that you are viewing the page locally from your file system rather than through a webserver. If you are viewing the page from the file system (aka a URL starting with file:// instead of http://) you will get an error when the page tries to load the texture.
In chrome the error looks like this:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
The last reason you may see no texture is that you are not constantly rendering the scene. Make sure you have some sort of animate() function which will continuously render the scene.
It actually takes the browser a split second of time to download and load the texture (and this happens asynchronously) , so if you only render the scene once you will most likely render it before the image has even been downloaded.
I have a live demo of a working version of your code here. And here is a link to the code.

Resources