Importing Box2D?
See original GitHub issueI want to figure out how to import the Box2D plug-in into my Phaser project with this template. I threw box2d.js into /node_modules/phaser-ce/build/custom and adjusted the Webpack configuration.
My current set up is as follows:
main.js:
import 'pixi'
import 'p2'
import 'box2d'
import Phaser from 'phaser'
webpack.config.js:
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
// Phaser webpack config
var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
var pixi = path.join(phaserModule, 'build/custom/pixi.js')
var p2 = path.join(phaserModule, 'build/custom/p2.js')
var box2d = path.join(phaserModule, 'build/custom/box2D.js')
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
})
module.exports = {
entry: {
app: [
'babel-polyfill',
path.resolve(__dirname, 'src/main.js')
],
vendor: ['pixi', 'p2', 'phaser', 'box2d', 'webfontloader']
},
devtool: 'cheap-source-map',
output: {
pathinfo: true,
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: 'bundle.js'
},
watch: true,
plugins: [
definePlugin,
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */}),
new HtmlWebpackPlugin({
filename: '../index.html',
template: './src/index.html',
chunks: ['vendor', 'app'],
chunksSortMode: 'manual',
minify: {
removeAttributeQuotes: false,
collapseWhitespace: false,
html5: false,
minifyCSS: false,
minifyJS: false,
minifyURLs: false,
removeComments: false,
removeEmptyAttributes: false
},
hash: false
}),
new BrowserSyncPlugin({
host: process.env.IP || 'localhost',
port: process.env.PORT || 3000,
server: {
baseDir: ['./', './build']
}
})
],
module: {
rules: [
{ test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
{ test: /pixi\.js/, use: ['expose-loader?PIXI'] },
{ test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
{ test: /p2\.js/, use: ['expose-loader?p2'] },
{ test: /box2D\.js/, use: ['expose-loader?box2d'] }
]
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
'phaser': phaser,
'pixi': pixi,
'p2': p2,
'box2d': box2d
}
}
}
When I run the app, I get a ‘Uncaught ReferenceError: box2d is not defined’ in my console. The line in reference is the second line of box2D.js.
Simply throwing the file in a <script>
tag in index.html works, but it is sloppy and not preferred.
Any suggestions to using a modular Box2D with this template?
Issue Analytics
- State:
- Created 5 years ago
- Comments:16 (3 by maintainers)
Top Results From Across the Web
Box2D Imports · Issue #1608 · openai/gym - GitHub
One problem I am having is manipulating environments to make new environments because a lot of the packages are unavailable.
Read more >Box2D - PyPI
Project description. 2D physics library Box2D 2.3 for usage in Python. After installing please be sure to try out the testbed demos. They...
Read more >Importing JBox2D libraries into a new project - Stack Overflow
You need to import those projects into your project. Go to your project properties, build path, and then click on the libraries tab....
Read more >Box2d - libGDX
Importing Complex Shapes using box2d-editorPermalink. box2d-editor is a free open source tool to define complex shapes and load them into your game. An...
Read more >How to import Box2d in HelloWorld Project - Cocos Forums
Mates one good basic walk-through explaining how to set-up box2d for c++ with eclipse. [i am asking how to import the box2d functionality...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Seems like you
import Phaser
somewhere else outsideindex.js
(and without that “imports-loader?...
”, so webpack (with minimal config) sees this as a regular import, which does not work with phaser).expose-loader
makes things available globally, so you should not import more then onceI guess so. I will just keep the script in the html then, but I really appreciate the help @lean @dywedir !