Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one
mlsdk v.0.20.0
https://creator.magicleap.com/downloads/lumin-sdk/overview
magic-script-cli v2.0.1
https://www.npmjs.com/package/magic-script-cli
magic-script-polyfills v2.2.0
https://www.npmjs.com/package/magic-script-polyfills
magic-script-components v0.0.8
https://www.npmjs.com/package/magic-script-components
image file
https://tokufxug.sakura.ne.jp/magicscript/sadao.png
Create Project
magic-script init my-cmp org.magicscript.cmp "Component"
cd my-cmp
mkdir res
Put image file in res folder.
Install
npm install
npm install magic-script-components
npm install --save-dev @babel/core @babel/plugin-transform-react-jsx rollup-plugin-babel
Code
Change app.package
DATAS = "digest.sha512.signed" : "." \
"bin/" : "bin/" \
"res/" : "res/"
OPTIONS = package/minApiLevel/2
Create a new .babelrc file
{
"plugins": [
"@babel/plugin-syntax-jsx",
"@babel/plugin-transform-react-jsx"
]
}
Change rollup.config.js
// Rollup config for consuming some npm modules in MagicScript
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
external: ['uv', 'lumin'],
input: 'src/main.js',
preserveModules: true,
output: {
dir: 'bin',
format: 'es'
},
plugins: [
babel({ exclude: "node_modules/**" }),
resolve(),
commonjs()
]
};
Change app.js
import React from 'react'
export class MyApp extends React.Component {
constructor(props)
{
super(props);
this.state = {counter: props.counter};
this.onButtonClick = this.onButtonClick.bind(this);
}
onButtonClick(event)
{
this.setState(state => ({counter: state.counter + 1}));
}
render()
{
return(
<view name='main-view'>
<text textSize={0.1}
textColor={[1.0, 1.0, 0.0, 1.0]}
localPosition={[0, 0.25, 0]} >{this.state.counter}
</text>
<button width={0.25}
height={0.15}
roundness={0.5}
onClick={this.onButtonClick}>+</button>
<image width={0.15}
height={0.25}
filePath={'res/sadao.png'}
localPosition={[-0.25, 0.20, 0]}>
</image>
</view>
);
}
}
Create global-scope.js newly in src folder
globalThis.process = { env: { NODE_ENV:"development" } };
export default process;
Change main.js
import 'magic-script-polyfills';
import process from './global-scope.js';
import React from 'react';
import mxs from 'magic-script-components';
import { MyApp } from './app.js';
mxs.bootstrap(
<MyApp
type='landscape'
volumeSize={[1,1,1]}
caption='My App Caption'
counter={0} />
);
Build
magic-script build -i
Run
magic-script run --port=10000
Reference
magic-script-components (Github)
https://github.com/magic-script/magic-script-components
MagicScript Components List
https://github.com/magic-script/magic-script-components/blob/HEAD/docs/Components.md
magicscript
https://www.magicscript.org/
Thanks!