mattcolman / phaser-manifest-loader

Phaser Manifest Loader
http://mattcolman.com/labs/phaser-manifest-loader/index.html
MIT License
30 stars 7 forks source link

2 Questions: 1) JSON.parse error on spritesheets, 2) Loading assets from subfolders? #10

Open SHG42 opened 3 years ago

SHG42 commented 3 years ago

To start with the second question: is it possible to load assets from a nested folder structure? I have a variety of static image assets for my game and I had them categorized by type in subfolders. For instance: "./assets/images/loot/crystal_dagger.png" and so on. I've been trying various different ways of structuring the images array to reach the subfolders, with no luck. Looking at the src for the plugin, it seems to expect a single images folder. Is there a way to do this, or do I need to ditch my subfolders?

As for the error: when loading my spritesheets, which are in a single "./assets/spritesheets" folder, I get a JSON.parse error. I removed everything from the manifest except the spritesheets to be sure. In Chrome it gives me this: loader_error I'm new to webpack, so I'm wondering if it could be my config. I'm using this template, which incorporates your plugin. Here's my webpack.config and a sample of my manifest with just the spritesheets, and a sample json file:

const AssetManifest = {
    "spritesheets": [
        "caveportal",
        "compiled-hero",
        "objects",
        "portal",
        "sorceress"
    ]
};
const CONFIG = require('./config');
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        game: CONFIG.MAIN_FILE,
        vendor: ['pixi', 'p2', 'phaser', 'phaser-arcade-slopes', 'webfontloader']
    },
    plugins: [
        new CleanWebpackPlugin([CONFIG.BUILD_PATH]),
        new HtmlWebpackPlugin({
            title: CONFIG.GAME_TITLE,
            template: CONFIG.INDEX_TEMPLATE_FILE
        }),
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'vendor'
        }),
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, CONFIG.BUILD_PATH)
    },
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        compact: false
                    }
                }
            },
            { 
                test: /pixi\.js/, 
                use: ['expose-loader?PIXI'] 
            },
            { 
                test: /phaser-split\.js$/, 
                use: ['expose-loader?Phaser'] 
            },
            { 
                test: /p2\.js/, 
                use: ['expose-loader?p2'] 
            },
            { 
                test: /phaser-arcade-slopes\.js/, 
                use: ['expose-loader?phaser-arcade-slopes'] 
            },
            {
                test: /\.(png|jpg|gif|svg|pvr|pkm)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[path][name].[ext]?[hash]',
                    context: 'src/assets'
                }
            },
            {
                test: /\.json$/,
                use: 'file-loader'
            },
        ]
    },
    resolve: {
        alias: {
            'phaser': 'phaser-ce/build/custom/phaser-split.js',
            'pixi': 'phaser-ce/build/custom/pixi.js',
            'p2': 'phaser-ce/build/custom/p2.js',
            'phaser-arcade-slopes': 'phaser-arcade-slopes',
            'assets': path.join(__dirname, '/src/assets'),
        },
        modules: [
            path.resolve('./node_modules')
        ]
    }
};