我会把整理出来的笔记发到文章里面,如果对javascript感兴趣的朋友可以跟着我一起来学习javascript哦,我们一起进步。

准备步骤

1.了解HBuilder X-点击跳转到HBuilder X搭建环境和基本使用操作

2.下载对应素材,我每天会把素材会放到底部百度网盘里

一、新建HTML并引入js文件

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="../js/pixi.min.js"></script>
    <script type="text/javascript">
      //该位置书写代码
    </script>
  </body> 
</html>

二、创建应用

创建应用窗口是指在网页中规划一个固定大小的区域用来展示某个应用

var app = new PIXI.Application(500,700); //创建一个游戏窗口
document.body.appendChild (app.view); //在网页内添加游戏窗口

代码解释

1.创建一个应用窗口元素

//new PIXI.Application(); 表示创建一个应用窗口
//500 : 窗口宽度(单位:px)
//700 : 窗口高度(单位:px)
//var app :为应用窗口元素在程序中的别名
var app = new PIXI.Application(500,700);

2.将应用窗口元素添加到网页中

//document :表示整张页面
//body  :网页体部分(可以显示在页面的部分)
//appendChild(); :向body中添加一个元素
//app.view : 应用窗口的视图
document.body.appendChild( app.view );

三、创建图片元素

创建图片,就是指创建图片,并将图片显示显示在游戏窗口内

//创建图片,该参数为图片路径,可以是网络路径,也可以是本地路径
var plane = new
PIXI.Sprite.fromImage("http://www.yyfun001.com/lesson/res/plane_blue_01.png");
或 
 var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
//将图片添加到游戏窗体内部(右键检查元素可以看到窗体的大小)
app.stage.addChild(plane);

代码解释

1.创建图片元素

//new PIXI.Sprite.fromImage(); : 创建一个图片元素
//"img/plane_blue_01.png": 图片路径(img目录中的plane_blue_01.png文件)
//var plane  :图片元素在程序中的别名
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");

2.将图片添加到游戏窗口内

//app :之前为应用窗口元素设置的别名
//stage :应用窗口的内部
//addChild(); :添加一个元素
//plane :图片元素在程序中的别名
app.stage.addChild( plane );
注意:单词是否有错误、大小写是否规范,语句结尾是否有英文 ;

四、最终代码

<script src="../js/pixi.min.js"> </script>
<script>
var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
app.stage.addChild( plane );
</script>

五、最后效果图

chap1_编程入门及游戏显示效果制作

素材下载

此处内容已经被作者无情的隐藏,请输入验证码查看内容
验证码:
请关注“独家博客”官方微信公众号,回复:关键字“chap1笔记”,获取验证码。
注:用手机微信扫描右侧二维码或微信搜索“独家博客”即可关注哦!

未经允许不得转载:作者:西瓜君✔, 转载或复制请以 超链接形式 并注明出处
原文地址:《chap1_编程入门及游戏显示效果制作》 发布于2020-03-08

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册