Jump to content

image not showing up, full code snippet posted


alwayzambitious
 Share

Recommended Posts


//Aliases
let Container = PIXI.Container,
autoDetectRenderer = PIXI.autoDetectRenderer,
loader = PIXI.loader,
resources = loader.resources,
Sprite = PIXI.Sprite;

// Create the stage and renderer
let stage = new Container(),
container = new Container(),
renderer = autoDetectRenderer(1200, 750,{backgroundColor : 0x1099bb,antialias: false, transparent: false, resolution: 1});
document.body.appendChild(renderer.view);
stage.addChild(container);


//Load image
loader.add("img/bg_featured_med.jpg").load(function () {   
let bgSprite =  new PIXI.Sprite(resources["img/bg_featured_med.jpg"].texture)
// var slide = background(container, new PIXI.Sprite.fromImage("img/bg_featured_med.jpg"),'cover');        
//var slide = background(container, bgSprite,'cover');        
//console.log(slide);
console.log(bgSprite);
container.addChild(bgSprite);
	
    

});
 
// start animating
animate();
function animate() {
    requestAnimationFrame(animate);

    //render the container
    renderer.render(stage);
}

function background(bgSize, inputSprite, type, forceSize) {
    var sprite = inputSprite;
    var bgContainer = new PIXI.Container();
    var mask = new PIXI.Graphics().beginFill(0x8bc5ff).drawRect(0,0, bgSize.x, bgSize.y).endFill();
    bgContainer.mask = mask;
    bgContainer.addChild(mask);
    bgContainer.addChild(sprite);

    var sp = {x:sprite.width,y:sprite.height};
    if(forceSize) sp = forceSize;
    var winratio = bgSize.x/bgSize.y;
    var spratio = sp.x/sp.y;
    var scale = 1;
    var pos = new PIXI.Point(0,0);
    if(type == 'cover' ? (winratio > spratio) : (winratio < spratio)) {
        //photo is wider than background
        scale = bgSize.x/sp.x;
        pos.y = -((sp.y*scale)-bgSize.y)/2
    } else {
        //photo is taller than background
        scale = bgSize.y/sp.y;
        pos.x = -((sp.x*scale)-bgSize.x)/2
    }

    sprite.scale = new PIXI.Point(scale,scale);
    sprite.position = pos;

    return bgContainer;
}

Hello! Ive tried to console log everything within the anon function after the image loads. Even tho nothing traces is null, im not able to get the image show onscreen.

Can I get a second pair of eyes to see what the issue?

Thanks

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...