Playgound vs local server

[Richard C]

I am exploring canvas2D and action manager for the first time. I have an initial PG scene ..........

http://babylonjs-playground.com/#OWCCR#39

...... which works fine in PG. But if I download the zip and attempt to use it via a local editor (Brackets using Chrome preview) then I get error .............

TypeError: BABYLON.Canvas2D is undefined

........ and of course the page fails to load.

The js script links are:

        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>

the error is 1st thrown when processing:

           backgroundFill: BABYLON.Canvas2D.GetSolidColorBrushFromHex("#90993210"),

Any ideas as to what the problem is please.

Thanks

Richard C

[Wingnut]

Hiya RC!  I think you need to add one more script...   https://github.com/BabylonJS/Babylon.js/tree/master/dist

Grab one of those files in there..  babylon.2.5.canvas2d.js or babylon.2.5.canvas2d.max.js,  and include it into another <script> element.  Should work. 

I'm not sure WHAT the criteria is... for having a script automatically included in a playground zip.  Cannon and Oimo make the trip automatically, but not some other things.

[Nabroski]

Canvas2D is an extension and have to be downloaded separately 

 

@Nockawa Overviews ? https://doc.babylonjs.com/overviews

[Wingnut]

I won, Nabs.  heh.  Beat you by 9 seconds. 

[GameMonetize]

You can also use the version builder to build a bundled version: http://www.babylonjs.com/versionBuilder/

[Richard C]

Thanks all. Problem solved.

 

[Nockawa]

4 hours ago, Nabroski said:

 

 

@Nockawa Overviews ? https://doc.babylonjs.com/overviews

Indeed, I should update the overview documentation to let people know of this now... I also accept PR!

[Richard C]

@Nockawa

I am really enjoying the world of 2D and feel I have a bit of a handle on how it all works but more to learn of course.  My next 'learning' is to manipulate - moving, dragging 2DShape/Sprites and their interaction with meshes in the scene, in particular using the position on screen of the pointer over a shape/sprite to move meshes. This has brought me to action manager and pointerEventObservables.

Is there an article/tutorial that I may have missed that would help me.

I still have to spend alot of time studying/exploring both but my initial thoughts are that I don't feel the documentation has given a clear enough explanantion of the differences between the two methods and why one of those methods is more appropriate for certain tasks than the other.

Thanks so much for all your work on this

Richard C

 

[Nockawa]

About "moving, dragging 2DShape/Sprites and their interaction with meshes in the scene", well, I don't have tutorial/example doing that, in fact you're the first that I know who's wanting to do that, if you struggle I can help.

Be sure to check the overview's home page http://doc.babylonjs.com/overviews/Canvas2D_Home it leads to many doc pages, like this page: http://doc.babylonjs.com/overviews/Canvas2D_Interaction about interaction.

By the way, just for me to know, did you found the overview home page or not? If not, where should I have put a link to it? Thanks

[Richard C]

@Nockawa

Continuing my canvas2D  journey I have run into an issue that I can't find documentation/PG examples to resolve regarding - AtlasPictureInfoFactory.

http://www.babylonjs-playground.com/#C1BYN#2

I have two questions please:

Q1

In my project I have the .png image and json file - both created with TexturePacker and seen in the PG. They are stored locally in a folder called textures with the rest of my project files.

I wish to use these local files rather than store them in the cloud. I can load the image.png locally no problem but not the json (all the PG only use loadFromURL). So, is there an alternative to BABYLON.AtlasPictureInfoFactory.loadFromUrl(atlas, "https://dl.dropboxusercontent.com/u/9401844/nba.json", function (a) .... etc which loads the local .json?

I assume I should use addlLoader but can't wrap my head around the structure. Could you give me an alternative statement using adLoader or how to use loadFromUrl when the files are local.

Incidentally, using the -.loadFromUrl(atlas, "https://dl.dropbox ... - as in the PG returns an error "Uncaught TypeError: Cannot read property 'loadFromUrl' of undefined" from my local project code.

Q2

I can't find docs/PG examples that use AtlasPicureInfoFactory to reference the sub pictures of the atlasTexture. You can see in the playground the atlasTexture .png is a simple atlas of the numbers 0 - 9. I want to experiment with using them to display a "digital LED counter" which counts to 999.9 which is why I want to access each of the sub pictures.

Thanks again

Richard C

[Nockawa]

Hi @Richard C let me a good night sleep (after a big release of C2D coming) and I'll answer to this!

I think I'll perform minor improvements to match your need with local .json.

Concerning accessing the atlas subpicture, I may be too tired or there maybe not enough doc about it but I thought that it was already possible to do what you wanted. But let me check that tomorrow when I'll be more fresh...

[Richard C]

@Nockawa

Thanks and sleep well.

RC

[Nockawa]

Me again,

Q1: I'm going to add a new API in the factory to load from a local json file, shouldn't be long to do

Q2: Tell me if I understand you correctly: you want to create a Sprite2D with a given subpicture, right? If that's so you can use the AltasPictureInfo.CreateSprite("dig_0.png") to target your 0 digit
Looking at your JSON file (https://dl.dropboxusercontent.com/s/kemv3jl40ty7iaz/digitals.json) the name of each subpicture is stored in the "filename" json property.
Is that what you were looking for? If so I'll update the doc to make it clearer.

Thanks

[Nockawa]

Me again about Q1.  By Stored Locally, you mean something like "file://C:/myJson.json" ?
i'm sorry, but I'm no expert in these things...

[Richard C]

@Nockawa

Thanks Nockawa - I really appreciate you looking at this so promptly.

Q1 Yes - I mean the file is stored locally with other web page files in a folder which will of course be uploaded to a public web server with all the other files and images that make up the web site. So I assume the final code in the babylon .js script to be something like  AtlasPictureInfoFactory.xxxxxxxx(atlas, "(textures/digitals.json)", function (a) {

Q2. Yes that is correct. the texure atlas digitals.json has 10 sub pictures - the numbers 0 through 9. So a graphical representation of 067.4 would be the concatenation of ....

from the json.file (https://dl.dropboxusercontent.com/s/kemv3jl40ty7iaz/digitals.json) ........

    dig_0.png  &  dig_6.png  &  dig_7  &  dig_dot.png  &  dig_4.png

many thanks

RC

 

[Nockawa]

Q1. which code do you currently use to load a texture this way?

Q2. I hope we're on the same page, what I mean is you can't create one sprite displaying "067.4", you have to create 5 sprites to achieve that. By the way, I don't remember if there's a way for you to change the content of an existing sprite, for instance to switch from displaying 0 to display 1. Do you have this need and have you found a way to do it (except disposing the sprite and create a new one)?

Thanks.

[Richard C]

Q1. Not quite sure what you mean here, do you mean ..............

var atlas = new BABYLON.Texture("textures/digitals.png", scene, true, false, BABYLON.Texture.NEAREST_SAMPLINGMODE);

Q2 This is for a dynamic digital counter display. I want to display the y.position in the counter as it changes. The model is a submarine diving / moving underwater. The counter will be a display representing a depth gauge - as the position of the object (the sub) rises and falls the counter will display a depth from either the seabed or the ocean surface. 

I could use a text2D using a custom font (presumably a Bitmap font) but haven't really explored that yet.

In any event I shall probably need to use sprite2D and atlasTexture for other things, so learning  / understanding the concepts will be beneficial.

thanks

RC

[Nockawa]

Q1. ok I'll look why it works for texture and not for the json file.

Q2. well, I think you should definitely rely on Text2D with BMFont support, please read this: http://doc.babylonjs.com/overviews/canvas2d_text2d#using-a-bitmapfonttexture and especially that: http://gamedev.stackexchange.com/questions/74010/how-do-you-create-fnt-angelcode-format-files-from-existing-bitmaps using the only tool this guys talks about is a simple/quick way to achieve what you want then you wouldn't bother with many sprites, etc. a simple Text2D would display the text the way you want.

[Nockawa]

@Richard C I've update the preview build of Canvas2D and I'm now relying on a different method to load the JSON file and hopefully it will work in local. Please make the test and confirm.

But I still think for this purpose that you should use Text2D with BMFont.

 

[Richard C]

@Nockawa  remind please what preview build is and how/where to access it to test. Also what are the methods / properties needed to mke it work. Any chance of a working example in a PG so taht I can play and learn.

I shall experiment with Text2D. Can you please confirm that using a BMFont does not require the user to have that custom font on their machine. Are BMFonts created and stored / used through the canvas2D scripting.

thanks

RC

[Nockawa]

The Preview Build of al the Babylon.js related files can be found here: https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release
Basically it's the latest alpha of the 2.6 as of today.

If you want to benefit of the latest changes/fixes you have to get the files there or use the PG when it's up to date.

Right you you store the digit number in a png file and have their coordinates with in a JSON file, right? It will be the same for Text2D and BMFont, the Font Texture is stored in a PNG file and the mapping to find a given text character in the texture is stored in a JSON file.

More info here: http://doc.babylonjs.com/overviews/canvas2d_text2d#using-a-bitmapfonttexture

PG there: http://babylonjs-playground.com/#GKBEH

You can easily use this tool: http://fontcutter.fbksoft.com/ to create the json description file for the BMFont.