HTML5 - Black screen (_gJ error?)

Gizmo199

Member
I'm not super versed in HTML5 compiling so I thought I would ask here. I keep getting this error in the 'developer tools' console when I try to run my game:
(*note this is the only error that pops up as far as I can tell)

Capture.PNG

I'm not exactly sure what this is...haha. I tried googling 'Uncaught _gJ' Sorry if this isn't a ton of information, please let me know if there is anything else I can provide for better context. I just don't really know exactly what I should be looking for. I have no idea what any of this means. haha.

Thanks in advance!
 

FrostyCat

Member
Regular HTML5 builds produce obfuscated output that hides actual variable and resource names. Use the Debug build (F6) to produce output that has all non-engine code unobfuscated for use with Developer Tools.
 

Nidoking

Member
Some function is trying to access an array index that hasn't been defined yet. Everything else is internal tokens that aren't going to make any sense - you're going to have to check everything the game might be doing when it starts up and check your array indices.
 

Roldy

Member
#1 Run the game in Debug. A debug console will open in your browser and output console. You should see relevant errors.

#2 If the error is accessing a variable that is not an array, as @Nidoking suggest, then consider explicitly declaring your arrays. I submitted an HTML bug a few days ago that in certain cases some arrays would not be implicitly defined in HTML export. The work around is to explicitly define the array using the function array_create e.g.
GML:
// The following lines should work, however in some situations in HTML export it will not

// initialize the array
myArray[0] = 1;
myArray[1] = 1;

// The workaround is to make sure the variable is an array

// initialize the array
myArray = array_create(2);  // explicity create the array
myArray[0] = 1;
myArray[1] = 1;

For those interested in a specific case where an array is not initialized properly in HTML export here is an example:

GML:
function someFunction() {

    var testArray;
    testArray[0] = 1;
}

function someOtherFunction() {
    var testArray;
    testArray[0] = 1; // this array may not initialize correctly
                          // simply because it has the same name as
                          // a local variable in a different scope
                          // yet in the same file
                          // Renaming the variable will fix it
                          // Or explicitly using array_create will fix it
     // This is a BUG and has been submitted to YoYo
}

function anotherFunction() {

    // This will work fine becuase it calls array_create
    var testArray = array_create(1);
    testArray[0] = 1;
  
    // This will work fine because it has a different name
    var anotherTestVariable;
    anotherTestVariable[0] = 1;
  
  
  
  
}
 
Last edited:

Gizmo199

Member
Regular HTML5 builds produce obfuscated output that hides actual variable and resource names. Use the Debug build (F6) to produce output that has all non-engine code unobfuscated for use with Developer Tools.
Ah-ha! Nice! Didn't realize It wasn't un-obfuscated. Thanks


#1 Run the game in Debug. A debug console will open in your browser and output console. You should see relevant errors.

#2 If the error is accessing a variable that is not an array, as @Nidoking suggest, then consider explicitly declaring your arrays. I submitted an HTML bug a few days ago that in certain cases some arrays would not be implicitly defined in HTML export. The work around is to explicitly define the array using the function array_create e.g.
GML:
// The following lines should work, however in some situations in HTML export it will not

// initialize the array
myArray[0] = 1;
myArray[1] = 1;

// The workaround is to make sure the variable is an array

// initialize the array
myArray = array_create(2);  // explicity create the array
myArray[0] = 1;
myArray[1] = 1;

For those interested in a specific case where an array is not initialized properly in HTML export here is an example:

GML:
function someFunction() {

    var testArray;
    testArray[0] = 1;
}

function someOtherFunction() {
    var testArray;
    testArray[0] = 1; // this array may not initialize correctly
                          // simply because it has the same name as
                          // a local variable in a different scope
                          // yet in the same file
                          // Renaming the variable will fix it
                          // Or explicitly using array_create will fix it
}

function anotherFunction() {

    // This will work fine becuase it calls array_create
    var testArray = array_create(1);
    testArray[0] = 1;
  
    // This will work fine because it has a different name
    var anotherTestVariable;
    anotherTestVariable[0] = 1;
  
  
  
  
}
Ah, I see. Thanks for the reply. Well, that is not good. I have TONS of arrays and constructors in my code.
 

Roldy

Member
Ah-ha! Nice! Didn't realize It wasn't un-obfuscated. Thanks




Ah, I see. Thanks for the reply. Well, that is not good. I have TONS of arrays and constructors in my code.

If you a planning on HTML export then I would suggest constant integration. After every change and commit, test HTML compared to other platforms. There are many documented and undocumented differences (as well as bugs) in the HTML export. Catching them quickly will make development much easier.

If you are trying to port an established project to HTML and running into issues, then you will need alot of patience. As well, be sure to report bugs and undocumented differences. The more people that do so then the quicker the HTML export will improve.
 

Gizmo199

Member
If you a planning on HTML export then I would suggest constant integration. After every change and commit, test HTML compared to other platforms. There are many documented and undocumented differences (as well as bugs) in the HTML export. Catching them quickly will make development much easier.

If you are trying to port an established project to HTML and running into issues, then you will need alot of patience. As well, be sure to report bugs and undocumented differences. The more people that do so then the quicker the HTML export will improve.
Yeah I wasn't initially planning an html build for it but thought it would be cool. It's a newer version of a 3d library I've been working on, so as a tool I feel like it should support html5. I hardly have patience, but I am pretty determined so I guess it's time to find a nice playlist, make some coffee, and start going through my 5000+ lines of code. Could be worse I guess. I wasn't aware of this issue, but I will definitely be regularly checking builds if I get this thing to work. Haha.

Thanks again!
 

Gizmo199

Member
Hmm, so I just went through and added 'array_create' to all of the array parts in the scripts listed in the debug console. I still keep getting the same error though? Nothing listed has any arrays being created without 'array_create'. Maybe someone can decode this for me? haha. The only thing I know its telling me is that some index is out of range but I have no clue what.

Capture.PNG
for further context:
GML:
function fauxton_model_create(sprite, _x, _y, _z, _xr, _yr, _zr, _xs, _ys, _zs)
{
    ///@func fauxton_model_create(sprite, x, y, z, xrot, yrot, zrot, xscale, yscale, zscale)
    var _m = {
        spref        : sprite,
        texture        : sprite_get_texture(ico_texref, 0),
        pos_id        : ds_list_size(RENDER_QUEUE),
        model_id    : __FauxtonWriteSpriteStack(sprite, 0, 0, 0, c_white, 1, 0),
        position    : new vector3(_x, _y, _z),
        rotation    : new vector3(_xr, _yr, _zr),
        scale        : new vector3(_xs, _ys, _zs),
        matrix_id    : -1,
        draw_enable : true,
        isBBoard    : false,
        color       : c_white,
        alpha        : 1
    }
    _m.matrix_id = matrix_vec_build(_m.position, _m.rotation, _m.scale);
    RENDER_QUEUE[| _m.pos_id] = _m;
    fauxton_model_set(_m.pos_id, _x, _y, _z, _xr, _yr, _zr, _xs, _ys, _zs);
      
    return _m.pos_id;
}
GML:
global.__modelMap = ds_map_create();
global.__renderFormat = -1;
global.__matWorldReset = matrix_build_identity();

vertex_format_begin();
vertex_format_add_position_3d();
vertex_format_add_texcoord();
vertex_format_add_color();
global.__renderFormat = vertex_format_end();

#macro SYSTEM_MODEL_MAP        global.__modelMap
#macro SYSTEM_VERTEX_FORMAT    global.__renderFormat
#macro SYSTEM_MATRIX_RESET global.__matWorldReset

// Buffer functions
function __FauxtonWritePoint(mBuff, pArr, tArr, col, alp)
{
    ///@func __FauxtonWritePoint(buffer, point_array, texcoord_array, color, alpha)
  
    // Position
    buffer_write(mBuff, buffer_f32, pArr[0]);
    buffer_write(mBuff, buffer_f32, pArr[1]);
    buffer_write(mBuff, buffer_f32, pArr[2]);
  
    // Texcoord
    buffer_write(mBuff, buffer_f32, tArr[0]);
    buffer_write(mBuff, buffer_f32, tArr[1]);
  
    // Color
    buffer_write(mBuff, buffer_u8, color_get_red(col));
    buffer_write(mBuff, buffer_u8, color_get_green(col));
    buffer_write(mBuff, buffer_u8, color_get_blue(col));
    buffer_write(mBuff, buffer_u8, alp * 255);
  
}
function __FauxtonWriteVert(mBuff, _3mat, _uv1, _uv2, _uv3, _col, _alp)
{
    ///@func __interalWriteVert(buffer, 3x3_matrix, uv1_array, uv2_array, uv3_array, color, alpha)
    var m = _3mat;
  
    // Must be done this way for HTML5
    var point1 = array_create(3);
    var point2 = array_create(3);
    var point3 = array_create(3);
    point1 = [ m[0], m[1], m[2] ];
    point2 = [ m[3], m[4], m[5] ];
    point3 = [ m[6], m[7], m[8] ];
  
    // Add points
    __FauxtonWritePoint( mBuff, point1, _uv1,_col, _alp );
    __FauxtonWritePoint( mBuff, point2, _uv2, _col, _alp );
    __FauxtonWritePoint( mBuff, point3, _uv3, _col, _alp );
}
function __FauxtonWriteQuad(mBuff, texture, index, _x, _y, _z, color, alpha, angle, xscale, yscale, zscale )
{
    ///@func __FauxtonWriteQuad(buffer, sprite, index, x, y, z, color, alpha, angle)
    var l,t,r,b,tl,tt,tr,tb,
        vx0,vy0,vx1,vy1,vx2,vy2,vx3,vy3,
        cs, sn, _uvs;
  
    _uvs = array_create(6);
    _uvs = texture_get_uvs(sprite_get_texture(texture, index));//sprite_get_uvs(texture, index);
  
    // Get UVs
    l = _uvs[0];
    t = _uvs[1];
    r = _uvs[2];
    b = _uvs[3];
  
    // Get Vertex offsets 
    tl = xscale * _uvs[4] - sprite_get_xoffset(texture);
    tt = yscale * _uvs[5] - sprite_get_yoffset(texture);
    tr = tl + xscale * ( sprite_get_width(texture) * _uvs[6]);
    tb = tt + yscale * ( sprite_get_height(texture) * _uvs[7]);
  
    cs = dcos(angle);
    sn = dsin(angle);
  
    vx0 = _x + cs*tl + sn*tt;
    vy0 = _y + -sn*tl + cs*tt;
    vx1 = _x + cs*tr + sn*tt;
    vy1 = _y + -sn*tr + cs*tt;
    vx2 = _x + cs*tr + sn*tb;
    vy2 = _y + -sn*tr + cs*tb;
    vx3 = _x + cs*tl + sn*tb;
    vy3 = _y + -sn*tl + cs*tb;
  
    _z *= zscale;
    // Create matrixes
    var _mat1 = mat3(
    vx0, vy0, _z,
    vx1, vy1, _z,
    vx2, vy2, _z);
  
    var _mat2 = mat3(
    vx0, vy0, _z,
    vx2, vy2, _z,
    vx3, vy3, _z);
  
    // Must use array create for export with HTML5
    var vert1 = array_create(2);
    var vert2 = array_create(2);
    var vert3 = array_create(2);
    vert1 = [l,t];
    vert2 = [r,t];
    vert3 = [r,b];
  
    var vert4 = array_create(2);
    var vert5 = array_create(2);
    var vert6 = array_create(2);
    vert4 = [l,t];
    vert5 = [r,b];
    vert6 = [l,b];
    __FauxtonWriteVert( mBuff, _mat1, vert1, vert2, vert3, color, alpha );
    __FauxtonWriteVert( mBuff, _mat2, vert4, vert5, vert6, color, alpha );
}
function __FauxtonWriteSpriteStack(sprite, _x, _y, _z, _col, _alp, _ang)
{
    ///@func __FauxtonWriteSpriteStack(sprite, x, y, z, color, alpha, angle)
  
    // Has this model already been created?
    var mName = sprite_get_name(sprite);
    if ( ds_map_exists(SYSTEM_MODEL_MAP, mName) ){
        return SYSTEM_MODEL_MAP[? mName]; 
    }
  
    // Number of images
    var _num = sprite_get_number(sprite);
  
    // Prevent z-fighting
    var _zoffset = random_range(0.01, 0.1);
      
    // Create and write to buffer (much faster than writing a direction vertex buffer
    var _buff = buffer_create( 1, buffer_grow, 1);
    for ( var i=0; i<_num * RENDER_FIDELITY; i++ )
    {
        var _ind = i/RENDER_FIDELITY;
        __FauxtonWriteQuad(_buff, sprite, _ind, _x, _y, _z + (i/RENDER_FIDELITY) + _zoffset, _col, _alp, _ang, 1, 1, 1)
    }
  
    if ( _buff < 0 ) { buffer_delete(_buff); return -1; }
    var vBuff = vertex_create_buffer_from_buffer(_buff, SYSTEM_VERTEX_FORMAT);
    vertex_freeze(vBuff);
    SYSTEM_MODEL_MAP[? mName] = vBuff;
    return SYSTEM_MODEL_MAP[? mName];
}
function __FauxtonWrite3DTexCube(_x, _y, _z, _h, _col, _alpha, _ang)
{
    var vBuff = vertex_create_buffer();
    vertex_begin(vBuff, SYSTEM_VERTEX_FORMAT);
    for ( var i=0; i<_h; i++ )
    {
        // Tri 1
        vertex_position_3d(vBuff, -.5, -.5, i);
        vertex_texcoord(vBuff,0,0);
        vertex_color(vBuff, _col, _alpha);
        vertex_position_3d(vBuff, .5, .5, i);
        vertex_texcoord(vBuff,1,1);
        vertex_color(vBuff, _col, _alpha);
        vertex_position_3d(vBuff, .5, -.5, i);
        vertex_texcoord(vBuff,1,0);
        vertex_color(vBuff, _col, _alpha);
  
        // Tri 2
        vertex_position_3d(vBuff, -.5, -.5, i);
        vertex_texcoord(vBuff,0,0);
        vertex_color(vBuff, _col, _alpha);
        vertex_position_3d(vBuff, .5, .5, i);
        vertex_texcoord(vBuff,1,1);
        vertex_color(vBuff, _col, _alpha);
        vertex_position_3d(vBuff, -.5, .5, i);
        vertex_texcoord(vBuff,0,1);
        vertex_color(vBuff, _col, _alpha);
    }
    vertex_end(vBuff);
    vertex_freeze(vBuff);
    return vBuff;
}
function __FauxtonWriteStaticSpriteStack(_buffer, sprite, _x, _y, _z, _col, _alp, _ang, _xs, _ys, _zs )
{
    ///@func __FauxtonWriteStaticSpriteStack(buffer, sprite, x, y, z, color, alpha, angle, xscale, yscale, zscale)

    // Number of images
    var _num = sprite_get_number(sprite);
  
    // Prevent z-fighting
    var _zoffset = random_range(0.01, 0.1);
      
    // Create and write to buffer (much faster than writing a direction vertex buffer
    for ( var i=0; i<_num * _zs; i+=1/_zs )
    {
        var _ind = ceil(i / _zs);
        //if ( _ind > _num-1.6 ){ _ind = ceil(_ind); }
        _ind = clamp(_ind, 0, _num-1);
        __FauxtonWriteQuad(_buffer, sprite, _ind, _x, _y, _z + i + _zoffset, _col, _alp, _ang, _xs, _ys,_zs)
    }
}
  
// Maths
function vector2() constructor {
    x = 0;
    y = 0;
    if ( argument_count > 0 ){
        x = argument[0];
        if ( argument_count > 1 ){
            y = argument[1]; 
        }
    }
  
    static add = function(vec2){
        x += vec2.x;
        y += vec2.y;
    }
}
function vector3() constructor {
  
    x = 0;
    y = 0;
    z = 0; 
    if ( argument_count > 0 ){
        x = argument[0];
        if ( argument_count > 1 ){
            y = argument[1]; 
            if ( argument_count > 2 ){
                z = argument[2]; 
            }
        }
    }
  
    static add = function(vec3){
        x += vec3.x;
        y += vec3.y;
        z += vec3.z;
    }
}
function mat3(){
    ////@func mat3(*x1, *y1, *z1, *x2, *y2, *z2, *x3, *y3, *z3)
    var _mat = array_create(9);
    _mat = [
        0, 0, 0,
        0, 0, 0,
        0, 0, 0
    ];
    for ( var i=0; i<argument_count; i++ ){
        _mat[i] = argument[i]; 
    }
    return _mat;
}
function matrix_vec_build(pos, rot, scl){
    return matrix_build(
                pos.x, pos.y, pos.z,
                rot.x, rot.y, rot.z,
                scl.x, scl.y, scl.z
           );
}
function matrix_reset(){
    matrix_set(matrix_world, SYSTEM_MATRIX_RESET);
}
GML:
// Create & Set a custom shader for the grass & tree buffer.
// You can find the uniforms being altered in:
// Fauxton 3D - Engine > User Utilities > Scripts > FauxtonUniformControl
GrassBuff = fauxton_buffer_create("GrassBuffer", shd_grass_sway);
TreeBuff = fauxton_buffer_create("TreeBuffer", shd_tree_sway);
SceneBuff = fauxton_buffer_create("SceneBuffer");

// Add trees
with ( ob_tree_ref )
{
    // Randomize
    sprite_index = choose(sp_tree_1, sp_tree_2);
    var scale = random_range(1, 1.25);
    image_xscale = random_range(0.75, 1.25);
    image_yscale = image_xscale;
    image_angle = random(360);

    // Create model
    var model = fauxton_model_create(sprite_index, x, y, 0, 0, 0, image_angle, image_xscale, image_yscale, scale);
    fauxton_model_add_static(model, "TreeBuffer");   
   
    // Cleanup
    fauxton_model_destroy(model);
    instance_destroy();
}

// Create models for our scene
var grassModel1 = fauxton_model_create(sp_grass_1, 0, 0, 0, 0, 0, 0, 1, 1, 1);
var grassModel2 = fauxton_model_create(sp_grass_2, 0, 0, 0, 0, 0, 0, 1, 1, 1);
var weedModel = fauxton_model_create(sp_weed, 0, 0, 0, 0, 0, 0, 1, 1, 1);
var rockModel = fauxton_model_create(sp_rock_1, 0, 0, 0, 0, 0, 0, 1, 1, 1);
var pebbleModel = fauxton_model_create(sp_rock_2, 0, 0, 0, 0, 0, 0, 1, 1, 1);

repeat(round(room_width/7))
{
    // Add a bunch of randomized grass
    var ind = choose(grassModel1, grassModel2);
    var xx = random(room_width);
    var yy = random(room_height);
    if ( instance_exists(ob_no_grass) )
    {
        var rad = 16;
        while ( collision_circle(xx, yy, rad, ob_no_grass, false, true) )
        {
            xx = random(room_width);
            yy = random(room_height);   
        }
    }
    xx = clamp(xx, 80, room_width-80);
    yy = clamp(yy, 80, room_height-80);
   
    var scl = random_range(.5, 1.25);
    var ang = random(360);
   
    fauxton_model_set(ind, xx, yy, 0, 0, 0, ang, scl, scl, 1);
    fauxton_model_add_static(ind, "GrassBuffer");
   
    // Add a few weeds
    var chs = irandom_range(0, 20);
    if ( chs == 1 )
    {
        fauxton_model_set(weedModel, random(room_width), random(room_height), 0, 0, 0, 0, .5, .5, 1);
        fauxton_model_add_static(weedModel, "TreeBuffer");   
    }
   
    // Add some rocks
    var chs = irandom_range(0, 15);
    if ( chs == 1 )
    {
        var _mod = choose(pebbleModel, rockModel);
        var scl = random_range(1, 1.5);
        var zscl = random_range(1, 1.25);
        var rot = random(360);
        fauxton_model_set(_mod, random(room_width), random(room_height), 0, 0, 0, rot, scl, scl, zscl);
        fauxton_model_add_static(_mod, "SceneBuffer");   
    }
   
    // Add the tent (if one exists)
    with ( ob_tent_ref )
    {
        var _mod = fauxton_model_create(sprite_index, x, y, 0, 0, 0, image_angle, 1, 1, 1);
        fauxton_model_add_static(_mod, "SceneBuffer");
        fauxton_model_destroy(_mod);
        instance_destroy();   
    }
   
}
fauxton_model_destroy(grassModel1);
fauxton_model_destroy(grassModel2);
fauxton_model_destroy(weedModel);
fauxton_model_destroy(rockModel);
fauxton_model_destroy(pebbleModel);
any ideas @Roldy ?
 

chamaeleon

Member
GML:
_uvs = array_create(6);
_uvs = texture_get_uvs(sprite_get_texture(texture, index));

//sprite_get_uvs(texture, index);
// Get UVs
l = _uvs[0];
t = _uvs[1];
r = _uvs[2];
b = _uvs[3];

// Get Vertex offsets
tl = xscale * _uvs[4] - sprite_get_xoffset(texture);
tt = yscale * _uvs[5] - sprite_get_yoffset(texture);
tr = tl + xscale * ( sprite_get_width(texture) * _uvs[6]);
tb = tt + yscale * ( sprite_get_height(texture) * _uvs[7]);
The first line in this code snippet is unnecessary, since it will be overwritten by the second line. Hence, you are not guaranteed your array will in fact have at least 6 entries allocated, but it could be 4 if by some chance texture_get_uvs() not return more, though I assume it would based on documentation for sprite textures. Therefore, given that the error indicates an array index out of range error in the __FauxtonWriteQuad function, it might be useful to add show_debug_message() output showing what the size of the returned array is (before attempting to use its content). Running in debug mode, this output should then show up in the HTML5 debug console.
 
Top