There is an IMAGE game at https://www.html5pcode.com/a1yimageoptions.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework.
This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game.
There are many other games written in this p-code at https://www.html5pcode.com

Hi everyone, I have a question, I think there maybe a question like mine posted somewhere, I tried to find but can't have a good answer.
In my scene, I have a lot of picture, I use Sprite.fromImage to load those picture instead of PIXI.loader because my pictures don't load at the first time.
Because of many pictures, so my scene has very low FPS, I think it probably because I load directly raw picture from path. Does anyone know can advise me anyway to fix this.
Thank you!

Guys,
We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG.
The canvas's toDataURL method worked well at first, however we need more than that.
The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image.
Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear.
So, my question is whether their is a way to export the whole content image with desired resolution?
BR,
Yeling

What property do I need to use to crop an image? I feel I must be missing something utterly obvious, but without any docs I'm a bit lost. I adding an image from a loaded texture thus: -
this.add.image(x, y, image);
The image is (say) 64 x 64 pixels, but I want to only display 32 x 32. Whatever property I set, it either has no effect at all, or it scales the image instead of cropping it.
Could someone point me to the right property please?

Hi,
I wanted to try the latest preview release, but my IDE says that "Image" does not exist on type "typeof GUI". By looking at the available types from the GUI, the IDE suggests GUIImage, so I replaced everything with GUIImage.
Now I get a console error in my browser, saying "TypeError: BABYLON.GUI.GUIImage is not a constructor".
I get the same error on the playground, which btw also suggests GUIImage.
By looking at the source code, I think this was intentional, but it isn't mentioned in the what's new file for the preview release.
You can see the error on the playground https://www.babylonjs-playground.com/#K60448#22
Is this a bug, or do I need to change something else to get it working?
Thanks.

Hi everybody,
I have a plane with material and diffuseTexture. The image used for the texture is a png with transparent background. In order to keep the transparent background in babylon, I set useAlphaFromDiffuseTexture = true; on the material.
But now I want to see the shadow of the image. But I cant because of the useAlphaFromDiffuseTexture parameter.
So my question is : Is there a way to have the shadow of my png image following the transparent and not transparent part?
Thanks for your help! Pichou

Hi all,
I need to display a large image and dynamically hide sections of it.
I already use masking to specify which parts should be displayed.
The code I use to achieve this is in the form:
this._topMask = game.add.graphics(0, 0);
this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320);
this.defaultGroup.mask = this._topMask;
This is useful in that it gives me a rectangle within which the image renders.
Now I need to dynamically block sections of that rectange and create areas that are not rendered.
Ideally, I would like to be able to create masks similar to the image below. I cannot use presaved images because the position of the rectangles change dynamically.
What is the most performance optimised way to achieve this in Phaser? (I am on version 2.4.4)

I'm getting a struggle here with images and dropzones. I want to check if an image fits exactly into a dropzone. If not then the image returns automatically back to its original place
(gameObject.x = gameObject.input.dragStartX;
gameObject.y = gameObject.input.dragStartY; )
How can i check if x and y of the image is the same with the dropzone?
The above code is not working
if ((gameObject.x != dropZone.x) && (gameObject.y != dropZone.y)){
gameObject.x = gameObject.input.dragStartX;
gameObject.y = gameObject.input.dragStartY;
}

I'm having a hard time trying to do something that should be quite straightforward, so I'm not sure what I'm missing.
How do we scale an image (to use as a game background) to fit the window?
This is my approach, which doesn't work:
preload() {
this.load.image('bg', 'space3.png');
}
create() {
const bg = this.add.image(0, 0, 'bg');
bg.width = window.innerWidth;
bg.height = window.innerHeight - this.parent.canvasOffset;
// I would like to use this.game.width and this.game.height but those values don't exist
}
If I use bg.scaleX and bg.scaleY and set the values to 2.0, it does work, but what I want is to scale it to fit the window/viewport.

Does anyone know where to find the fileformats PixiJS supports? Or is the support simply the same as the browser support for file formats?
To be more specific: does PixiJS support the WebP fileformat? It would be great if it did, since WebP offers better and higher compression than PNG and JPG.

Hi, I have image in cache on which multiple sprites are based like this:
a = game.add.sprite(0, 0, "image");
b = game.add.sprite(0, 0, "image");
Now: I want to change the underlying image's data like e.g. this (notice the "image" as argument to generateTexture):
game.cache.getBitmapData("somedata").generateTexture("image")
This fails at runtime. According to what I've found out so far, I have to do it like this:
game.cache.getBitmapData("somedata").generateTexture("image", function(texture) {
a.loadTexture("image");
b.loadTexture("image");
})
The question is: is this achievable via more elegant way? The main problem I have with this is I have to keep track of every sprite that's based on "image", because this:
game.cache.getBitmapData("somedata").generateTexture("image", function(texture) {
a.loadTexture("image");
// b.loadTexture("image");
});
also fails at runtime. Isn't this somehow covered by what Phaser already offers? Thx in advance.

I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch. I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling. Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched. Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in). What this means is that my app already has data urls for images and raw text or parsed DOM data for things like XML files. I don't need PIXI to make requests for these, but I do need PIXI to use that data. This leaves me with two questions: CreateJS will let me create Image objects from data urls. Is PIXI able to accept data urls when creating Textures or when making fromImage calls? CreateJS exposes a BitmapFont object. I can pass a png and fnt pair and get back an assembled bitmap font. I don't see an equivalent in PIXI. It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser. I don't need PIXI to make an XHR request to fetch the files. I just need it to accept the data I've already loaded and create the font. Is there a way to do this? Thanks.

I have this simple game for small children that consists on several images that when tapped should produce a sound.
I got it working on the computer (mouse click) but not on mobiles (finger tap) and I suspect that's because I am listening to the wrong event. Could someone tell me how to listen to a image "tap"?
My current working code for computers is:
// I am adding the functions and listeners dynamically with a
// loop so aAssets is an array containing the image elements
// enable input
window[aAssets[i]].inputEnabled = true;
// create the function to be triggered by the listener
window['lst'+aAssets[i]] = function (me) {
alert (me.key);
}
// add the respective listener
window[aAssets[i]].events.onInputDown.add(window['lst'+aAssets[i]], this);
PS: I found the events "onDown" and "onTap" and tried them but both causes an error when added.
Thanks!

I was not able to reproduce this in the playground. Does anyone have any idea what could be causing this darkening effect on the GUI text? The GUI text is drawn on planes and the GUI image below it is about 5 units away. Also, the image is a svg, but I also tried with png and the same thing happens. The scene also has fog... and a clear color of that blue on the background.
If I rotate the camera, the text will randomly lightup/darken on certain parts of the GUI image below it even though they are far apart on the Y plane. Could this be a bug?

I am trying to test out persistence of objects--at the moment an image, but eventually a group that will be a UI component.
Right now, my image that I want to persist ("persist") goes from State1 to State2 just fine, but when I go back to State1, it disappears and I get an error ("uncaught typeError: cannot read property 'compressionAlgorithm of null in Phaser.js" and then points to a bunch of pixi.webgl render locations)
Why is the item disappearing if it's been added to the stage, and how do I overcome this problem?
Here is the code for State1:
var state1 = {
preload: function () {
this.load.image('persist', 'persist.png');
this.load.image('btn', 'btn.png');
},
create: function () {
this.persist = game.add.image(this.world.centerX, this.world.centerY, 'persist');
this.game.stage.addChild(this.persist);
this.btn = this.add.image(200, 200, 'btn');
this.btn.inputEnabled = true;
this.btn.events.onInputDown.add(this.changeState, this);
},
changeState: function() {
this.state.start("state2");
}
And then State 2 is just taking us back to state1 on clicking the button
var state2 ={
preload: function(){
this.load.image('btn', 'inventory/btn.png');
},
create: function(){
this.btn = this.add.image(200, 200, 'btn');
this.btn.inputEnabled = true;
this.btn.events.onInputDown.add(this.changeState, this);
},
changeState: function(){
this.state.start("state1");
}
};
Thanks in advance

I have an mp4 video file (H264 encoded).
I want to create a PIXI.extras.AnimatedSprite from this video to be able not lagging reversed animation play;
If I splice this video to image sequence the size becoming huge (about 8Mb vs 500kb of mp4).
I want to load low size mp4 file and extract image array from it to create an Animated Sprite.
Reverse playing directly from <video> by changing video.currentTime is lagging. I want to create something like hover/unhover animation.

Hi,
I'm testing code at: https://www.babylonjs-playground.com/?shadows and want to try my own image for the ground. On line 35 I put “http://www.rhgrafix.com/images/ground.jpg” instead of "textures/ground.jpg", I control+click on it and sure enough my image comes up in browser, but when I hit Run I just get the default checkered image. Why is this happening? Thanks,
R.L. Hamm

I am making a level viewer for a game using phaser, I loop through a large array representing the game grid and take the item names from the game save and place them in my phaser world in a loop.
I take whatever the game name for the item is and map it to a phaser image, my issue is that I don't want to map every possible item type to an image, if phaser askes for an image that i have not loaded, can I just ignore it without the green texture being plastered over it?

Hi,
Is there a way to render a part of 2D image on the screen with fixed position? Like in CSS we have position: fixed, position.left and position.top. I would like still to be able to use babylon.js options vOffset, uScale and wAng, like for textures, to move a visible part of the image. I could use a Plane with a texture, but I don't see an option to disable texture's repetition. Also I don't see a way to place it where I need on the screen with needed width/height. And still.. I need to disable lighting for it, set emissiveTexture, etc. So maybe there is a cleaner way to do this?

Can we do something like Image.drawWarped (link goes to the javadoc of slick2d) with pixi.js?
It gave devs the possibility to define where to render the 4 corners of an image with absolute x, y locations and it automatically skewed the image to fit in. I guess it just redefined the points of the triangles used to render the image or something like that. (I'm not that fit with gl, thats why I use pixi.js.^^)
Thanks.