微件:Chibi:修订间差异
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的68个中间版本) | |||
第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() { | loadButton.style.display = "none"; | ||
const pngFile = 'https://0v0.zjsnrwiki.com/gameRes/chibi/spine/' + index + '/Ship_girl_' + index + '.png'; | |||
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 = { | var spineLoaderOptions = { | ||
metadata: { | metadata: { | ||
image: PIXI.BaseTexture. | image: PIXI.BaseTexture.from(pngFile), | ||
spineAtlasFile: | spineAtlasFile: atlasFile | ||
} | } | ||
}; | }; | ||
// | //调整半透明渲染模式 | ||
app. | if (index != '40') | ||
. | spineLoaderOptions.metadata.image.alphaMode = PIXI.ALPHA_MODES.PMA; | ||
//加载播放器 | |||
const app = new PIXI.Application({ | |||
width:800, | |||
height:600, | |||
transparent:true | |||
}); | |||
loadButton.parentNode.appendChild(app.view); | |||
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) { | ||
//载入骨架 | //载入骨架 | ||
第38行: | 第52行: | ||
//设定skin | //设定skin | ||
chibi.skeleton.setSkinByName('normal'); | if (chibi.skeleton.data.findSkin('normal') != null) | ||
chibi.skeleton.setSkinByName('normal'); | |||
else chibi.skeleton.setSkinByName('default'); | |||
chibi.skeleton.setSlotsToSetupPose(); | chibi.skeleton.setSlotsToSetupPose(); | ||
第45行: | 第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; | ||
//把小人塞到容器里,再把容器塞到播放器里 | |||
chibiCage = new PIXI.Container() | |||
chibiCage.addChild(chibi); | chibiCage.addChild(chibi); | ||
app.stage.addChild(chibiCage); | app.stage.addChild(chibiCage); | ||
第56行: | 第74行: | ||
app.start(); | app.start(); | ||
//画透明矩形撑大容器,方便固定截图分辨率 | |||
rectangle.beginFill( | rectangle = new PIXI.Graphics(); | ||
rectangle.drawRect( | rectangle.beginFill(0x00FF00); | ||
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; | ||
第81行: | 第112行: | ||
app.renderer.extract.canvas(chibiCage).toBlob((b) => { | app.renderer.extract.canvas(chibiCage).toBlob((b) => { | ||
const a = document.createElement('a'); | const a = document.createElement('a'); | ||
loadButton.parentNode.append(a); | |||
a.download = ' | a.download = 'Ship_girl_' + index; | ||
a.href = URL.createObjectURL(b); | a.href = URL.createObjectURL(b); | ||
a.click(); | a.click(); | ||
第90行: | 第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; | ||
第102行: | 第133行: | ||
function changeSkin() { | function changeSkin() { | ||
const currentSkinName = chibi.skeleton.skin.name; | const currentSkinName = chibi.skeleton.skin.name; | ||
let newSkinName = 'default'; | |||
if (currentSkinName === 'normal') newSkinName = 'damage'; | |||
if (currentSkinName === 'damage') newSkinName = 'normal'; | |||
chibi.skeleton.setSkinByName(newSkinName); | chibi.skeleton.setSkinByName(newSkinName); | ||
chibi.skeleton.setSlotsToSetupPose(); | chibi.skeleton.setSlotsToSetupPose(); | ||
第108行: | 第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; | ||
第140行: | 第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; | ||
} | } | ||
} | } | ||
} | |||
//切换绿幕按钮 | |||
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> | </script> | ||
</includeonly> | </includeonly> |