微件:Chibi:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的49个中间版本) | |||
第1行: | 第1行: | ||
<includeonly> | <includeonly> | ||
<script src="https:// | <script src="https://0v0.zjsnrwiki.com/gameRes/chibi/pixi.js"></script> | ||
<script src="https:// | <script src="https://0v0.zjsnrwiki.com/gameRes/chibi/pixiv5-spine3.8.js"></script> | ||
<script> | <script> | ||
function chibiAnimation(index, loadButton) { | function chibiAnimation(index, loadButton) { | ||
loadButton.style.display = "none"; | loadButton.style.display = "none"; | ||
const pngFile = 'https:// | const pngFile = 'https://0v0.zjsnrwiki.com/gameRes/chibi/spine/' + index + '/Ship_girl_' + index + '.png'; | ||
const atlasFile = 'https:// | const atlasFile = 'https://0v0.zjsnrwiki.com/gameRes/chibi/spine/' + index + '/Ship_girl_' + index + '.atlas'; | ||
var jsonFile = index + '/Ship_girl_' + index + '.38.skel'; | |||
//特殊修复(记得atlas文件去空格)。转码工具:https://naganeko.pages.dev/chibi-gif/ | |||
if (index == '1050' || index == '1057' || index == '256' || index == '408_2') | |||
jsonFile = index + '/Ship_girl_' + index + '.38.json'; | |||
//分别加载png,atlas文件 | |||
var spineLoaderOptions = { | |||
metadata: { | |||
image: PIXI.BaseTexture.from(pngFile), | |||
spineAtlasFile: atlasFile | |||
} | |||
}; | |||
//调整半透明渲染模式 | |||
if (index != '40') | |||
spineLoaderOptions.metadata.image.alphaMode = PIXI.ALPHA_MODES.PMA; | |||
//加载播放器 | //加载播放器 | ||
const app = new PIXI.Application({ | const app = new PIXI.Application({ | ||
width: | width:800, | ||
height: | height:600, | ||
transparent:true | transparent:true | ||
}); | }); | ||
第20行: | 第36行: | ||
app.stop(); | app.stop(); | ||
loader = new PIXI.Loader('https://0v0.zjsnrwiki.com/gameRes/chibi/spine/'); | |||
loader.add('spineCharacter', jsonFile, spineLoaderOptions); | |||
loader.onComplete.once(onAssetsLoaded); | |||
loader.load(); | |||
let chibi = null; | let chibi = null; | ||
let rectangle = null; | |||
function onAssetsLoaded(loader, res) { | function onAssetsLoaded(loader, res) { | ||
第51行: | 第61行: | ||
//设定小人位置 | //设定小人位置 | ||
chibi.x = | chibi.x = 300; //小人的基准锚点是脚下附近 | ||
chibi.y = | chibi.y = 500; | ||
chibi.scale.x = 1; | chibi.scale.x = 1; | ||
chibi.scale.y = 1; | chibi.scale.y = 1; | ||
第65行: | 第75行: | ||
//画透明矩形撑大容器,方便固定截图分辨率 | //画透明矩形撑大容器,方便固定截图分辨率 | ||
rectangle = new PIXI.Graphics(); | |||
rectangle.beginFill( | rectangle.beginFill(0x00FF00); | ||
rectangle.drawRect( | rectangle.drawRect(0, 0, 800, 600); | ||
rectangle.endFill(); | rectangle.endFill(); | ||
rectangle.alpha = 0; | |||
rectangle.x = 0; | rectangle.x = 0; | ||
rectangle.y = 0; | rectangle.y = 0; | ||
rectangle.cacheAsBitmap = true; | rectangle.cacheAsBitmap = true; | ||
app.stage.addChild(rectangle); | |||
app.stage.setChildIndex(rectangle, 0); | |||
rectangle2 = new PIXI.Graphics(); | |||
rectangle2.beginFill(0xFFFFFF); | |||
rectangle2.drawRect(0, 0, 800, 600); | |||
rectangle2.endFill(); | |||
rectangle2.alpha = 0; | |||
rectangle2.x = 0; | |||
rectangle2.y = 0; | |||
rectangle2.cacheAsBitmap = true; | |||
app.stage.addChild(rectangle2); | |||
app.stage.setChildIndex(rectangle2, 0); | |||
}; | }; | ||
//快照按钮 | //快照按钮 | ||
const button1 = PIXI.Sprite.from('https:// | const button1 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/5/54/Spine_player_snap.png'); | ||
button1.x = 0; | button1.x = 0; | ||
第99行: | 第121行: | ||
//切换Skin按钮 | //切换Skin按钮 | ||
const button2 = PIXI.Sprite.from('https:// | const button2 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/4/4e/Spine_player_skin.png'); | ||
button2.x = 50; | button2.x = 50; | ||
第119行: | 第141行: | ||
//切换Animation按钮(spine居然没有成员变量储存当前动画名称) | //切换Animation按钮(spine居然没有成员变量储存当前动画名称) | ||
const button3 = PIXI.Sprite.from('https:// | const button3 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/5/5e/Spine_player_animation.png'); | ||
button3.x = 100; | button3.x = 100; | ||
第151行: | 第173行: | ||
case 5: | case 5: | ||
chibi.state.setAnimation(0, 'wreck', true, 0); | chibi.state.setAnimation(0, 'wreck', true, 0); | ||
break; | |||
case 6: | |||
chibi.state.setAnimation(0, 'w', true, 0); | |||
break; | |||
case 7: | |||
chibi.state.setAnimation(0, 's', true, 0); | |||
break; | break; | ||
} | } | ||
} | } | ||
} | |||
</script> | //切换绿幕按钮 | ||
const button4 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/c/cf/Spine_g.png'); | |||
button4.x = 0; | |||
button4.y = 50; | |||
button4.interactive = true; | |||
button4.buttonMode = true; | |||
button4.on('pointerdown', switchGreenCurtain); | |||
app.stage.addChild(button4); | |||
function switchGreenCurtain() { | |||
rectangle.alpha == 0 ? rectangle.alpha = 1 : rectangle.alpha = 0; | |||
} | |||
//切换白幕按钮 | |||
const button5 = PIXI.Sprite.from('https://0v0.zjsnrwiki.com/images/4/44/Spine_W.png'); | |||
button5.x = 50; | |||
button5.y = 50; | |||
button5.interactive = true; | |||
button5.buttonMode = true; | |||
button5.on('pointerdown', switchWhiteCurtain); | |||
app.stage.addChild(button5); | |||
function switchWhiteCurtain() { | |||
rectangle2.alpha == 0 ? rectangle2.alpha = 1 : rectangle2.alpha = 0; | |||
} | |||
} | |||
</script> | |||
</includeonly> | </includeonly> |