Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Canvas not rendering makeTiledWorld /worldCamera result #47

Open
jbrod22 opened this issue Oct 14, 2017 · 2 comments
Open

Canvas not rendering makeTiledWorld /worldCamera result #47

jbrod22 opened this issue Oct 14, 2017 · 2 comments

Comments

@jbrod22
Copy link

jbrod22 commented Oct 14, 2017

I'm following the scrollingWorldExample as best I can.

The imported json and png are actually the url locations of each file. In the image attached the white screen is the renderer. The message is rendered properly but nothing else is.

Sorry about the code formatting. Nothing is working right for me.

'import React, {Component} from 'react';
import {connect} from 'react-redux';
import CanvasStyle from './canvas.scss';
import NewWorld from './assets/newworld.json';
import Tileset from './assets/tileset.png';

class Canvas extends Component {

constructor(props) {
    super(props);
    this.state = {}
}

componentWillReceiveProps() {}

componentDidMount() {
    let camera = {}
    let world = {}
    let g = {}
    let objectsLayer = {}


    let filesToLoad = [NewWorld, Tileset]
    g = hexi(512, 512, setup, filesToLoad, load);
    g.start() 


    function setup() {
        document
            .getElementById('HexiCanvas')
            .appendChild(document.getElementsByTagName('canvas')[0])
        g.fps = 1;
        console.log(PIXI.loader.resources)
        world = g
            .tileUtilities
            .makeTiledWorld(NewWorld, Tileset);
        console.log(g)
        camera = g.worldCamera(world, world.worldWidth, world.worldHeight, g.canvas)
        objectsLayer = world.getObject("Elf");
        let message = g.text("No items found", "12px puzzler", "black");
        message.setPosition(10, 10);
        g.state = play;

    }

    function load() {}

    function play() {
        console.log('Tick Tock!')
        camera.follow(objectsLayer)
    }

    

}

render() {

    return <div
        className={this.props.show
        ? "canvas"
        : "hidden"}
        id="HexiCanvas"></div>
}

}

const mapStateToProps = (state, ownProps) => {
return {};
};

const mapDispatchToProps = (dispatch) => {
return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(Canvas);'

screen shot 2017-10-14 at 13 48 37

@kittykatattack
Copy link
Owner

@jbrod22 If you can get it working by slightly modifying the original example code and then making incremental customizations from there, you might be able to track down what's going wrong.
One thing I can tell for sure is that filesToLoad needs to be an array of strings.

@jbrod22
Copy link
Author

jbrod22 commented Oct 15, 2017

One thing I can tell for sure is that filesToLoad needs to be an array of strings.

The import NewWorld from './assets/newworld.json'; import Tileset from './assets/tileset.png'; are actually url strings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants