2016-04-19 17:54:27 qq_26598303 阅读数 7898
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27803 人正在学习 去看看 秦子恒

1.==》2.==》3.==》4.

       见上述四张图的过程,图1为“记录列表页”,一开始打开“记录列表页”,滚到页面底部,选择最后一条记录,点击,会进入图3“记录详情页”,然后后退,就可以无刷新切换页面。做法很简单:

       ①“记录列表页”<div id="record"></div> ; "记录详情页"<div id="detail"></div> ;

       ②进入页面后,location.hash = "record";然后$("#record").show();  $("#detail").hide();

       ③点击某条记录会进入详情页,在点击方法里,location.hash = "detail"; 

       ④这时由于hash改变就会触发hashchange,这时写个方法,根据hash值去判断显示哪个页面

window.onhashchange = function() {
    var viewName = location.hash.replace("#", "");
    weixinArtificialPrice.showView(viewName);
};

       至此用hash无刷新切换页面已经完成。但事情总是没那么简单,有个很重要的问题,因为,当初点进详情页的时候,是在最后一条记录点进去的,按道理说,返回来应该也在同样的位置,但是,竟然回去顶部了!对比图2与图4!

       所以,现在重点问题来了:为什么用hash开发无刷新切换页面返回时滚动条会回到顶部?其实为什么会这样也很好理解,hash这东西其实相当于平时用的锚点,就是在你的URL后面加了“#XXX”,如果你页面没有id为XXX这个元素,浏览器自动会回到顶部。那怎样解决呢?

       想法一:因为返回记录页的时候会回到顶部而不是原来的位置,那我在进入详情页面之前获取一下当前的位置,返回的时候设置回这个位置不就好了吗?

       ①进入详情页面前获取当前位置var scrollTop=$(window).scrollTop();

       ②返回来的时候设置回刚才保存的位置$(window).scrollTop(scrollTop);

       想想这样应该可以手工了,殊不知,这下返回手机看起来卡得不行!点进去返回来都会闪烁……这下用户体验是极差的……为什么会这样?当时怎么想都想不通,还跑去知乎问了这个问题https://www.zhihu.com/question/41626149/answer/91758167  终于有一个大神给了思路,他说:因为这其中实际上有很多工作,需要 restyle 才能确定 CSS 规则,然后 layout 决定各种高宽 ,然后 composite 分出好几层来给用户看见,然后你才能设定 .scrollTop,如 果你没有用到 forced synchronous layout,就有可能会中间有几帧被用户看见了。建议 1. 用 scrollable container 局部滚动条代替 window 滚动条;2. 切换显示区域时不销毁滚动区域。

       这段话对于一个新手来说简直信息量巨大,我真的不知道他说什么……只好拼命去查,后来终于知道,show() hide()这种显示隐藏的方式,是会使整个页面重绘的,而且,当页面显示出来之后,你再去设置滚动条的位置,这样一来又会重绘一次,这时肯定会卡。感兴趣的朋友可以查一下forced synchronous layout,用chrome调试工具中的TimeLine去测试页面的性能,他会告诉你,哪里是性能的瓶颈。

       想法二:但即使知道这些,我当时还是没能理解大神的两条建议,我只是在想,既然是因为发生两次重绘才卡,那我如果能避免显示记录页时去重新设置滚动条的位置,那就解决了吧?

       于是我去找,怎样才能又隐藏页面。又不会发生重绘。终于让我找到了方法,见张鑫旭大神的博客http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/  这篇文章会告诉你除了display:none还有什么方法隐藏元素还有各自的区别。于是我隐藏时用{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ },显示的时候将top变为0。

       果然,这样确实解决了问题。但项目里全部都是用show与hide,那我这样一改就要全部去改……这真的就是最好的方法了吗?

       最终想法:滚动条会返回到顶部,本质上就是浏览器的滚动条作祟。

       从想法二到现在最终的想法,期间遇到了其他的一些问题,比如区域滚动的问题,解决的之后回头再来想这个滚动条返回顶部的问题,就顿悟了。我们再来看大神的那两条建议:1. 用 scrollable container 局部滚动条代替 window 滚动条;2. 切换显示区域时不销毁滚动区域。上面的想法二其实本质上就是不销毁滚动区域,现在如果不想用这种方法,我们换个角度思考,其实之所以返回时滚动条会回到顶部,是浏览器的滚动条作祟,文章一开始说了“hash这东西其实相当于平时用的锚点,就是在你的URL后面加了“#XXX”,如果你页面没有id为XXX这个元素,浏览器自动会回到顶部”,所以我们怎样才能避免浏览器回到顶部呢?解决办法就是区域滚动,就是大神的第一点建议。这时我们就不需要去改变show hide这两个隐藏显示的方法,只需要在记录页的内容区域加上{overflow: auto;position: absolute;top: 0;bottom: 0;right:0;left: 0;},区域滚动的问题在文章“ 

微信开发安卓页面出现两个滚动条其中一条无法滚动可以采用局部区域滚动解决

”有解释。

       补充想法:其实如果单纯是无刷新切换页面,强烈建议使用HTML5新方法history pushState去做,这样根本就没有上述的问题,因为是保存历史记录,你原来页面是什么样子后退之后当然还是什么样子。但是由于项目是基于微信企业号,经测试苹果手机没问题,安卓手机也照样返回顶部……所以就没用这种了……遗憾

2017-03-14 16:12:26 qq_26420489 阅读数 17451
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27803 人正在学习 去看看 秦子恒
之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现;先看效果图

上代码:

1.swiperTab.js

Page({
    data: {
        // tab切换  
        currentTab: 0,
    },
    swichNav: function (e) {
        console.log(e);
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current,
            })
        }
    },
    swiperChange: function (e) {
        console.log(e);
        this.setData({
            currentTab: e.detail.current,
        })

    },
    onLoad: function (options) {
        // 生命周期函数--监听页面加载
    },
    onReady: function () {
        // 生命周期函数--监听页面初次渲染完成
    },
    onShow: function () {
        // 生命周期函数--监听页面显示
    },
    onHide: function () {
        // 生命周期函数--监听页面隐藏
    },
    onUnload: function () {
        // 生命周期函数--监听页面卸载
    },
    onPullDownRefresh: function () {
        // 页面相关事件处理函数--监听用户下拉动作
    },
    onReachBottom: function () {
        // 页面上拉触底事件的处理函数
    },
    onShareAppMessage: function () {
        // 用户点击右上角分享
        return {
            title: 'title', // 分享标题
            desc: 'desc', // 分享描述
            path: 'path' // 分享路径
        }
    }
})

2.swiperTab.wxml

<view class="page">

  <!--顶部导航栏-->
  <view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
    <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
    <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
  </view>

  <!--内容主体-->
  <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
    <swiper-item>
      <view>我是tab1</view>
    </swiper-item>
    <swiper-item>
      <view>我是tab2</view>
    </swiper-item>
    <swiper-item>
      <view>我是tab3</view>
    </swiper-item>
  </swiper>
</view>

3.swiperTab.wxss

.page {
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.swiper-tab {
  display: flex;
  flex-direction: row;
  line-height: 80rpx;
  border-bottom: 2rpx solid #777;
}

.tab-item {
  width: 33.3%;
  text-align: center;
  font-size: 15px;
  color: #777;
}

.swiper {
  height: 1100px;
  background: #dfdfdf;
}

.on {
  color: blue;
  border-bottom: 5rpx solid blue;
}




2014-11-30 10:07:12 weidongjian 阅读数 2688
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27803 人正在学习 去看看 秦子恒

最近在工作当中,需要实现在APP里面打开网页,于是仿照微信的浏览网页的页面,写出了这个Webview控件,有以下功能:


1、在加载网页的时候,顶部有一个进度条,显示当前加载进度;

2、设置了所有的页面都在该控件中显示,不调用其他的浏览器;

3、支持手势放大缩小;

4、支持双击屏幕放大缩小;

5、按后退按钮,回到上一个网页;




现在开始代码:

1、自定义一个webview,并在里面做好相关的设置:

public class MyWebView extends WebView {
    private ProgressBar progressbar;
    private Context mContext;

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
//        progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
        progressbar = (ProgressBar) LayoutInflater.from(context).inflate(R.layout.progressbar, null);
        progressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 6, 0, 0));
        addView(progressbar);
        //        setWebViewClient(new WebViewClient(){});
        setWebChromeClient(new WebChromeClient());
        setWebViewClient(new WebViewClient(){
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(mContext, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });
        this.getSettings().setBuiltInZoomControls(true);
        this.getSettings().setUseWideViewPort(true);
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                progressbar.setVisibility(GONE);
            } else {
                if (progressbar.getVisibility() == GONE)
                    progressbar.setVisibility(VISIBLE);
                progressbar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        progressbar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}

2、期中的progressBar的xml文件如下:

<?xml version="1.0" encoding="utf-8"?>

<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="50"
android:progressDrawable="@drawable/greenprogress" />

3、在activity中引用MyWebView控件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame" >
    <com.weidongjian.weigan.webviewdemo.MyWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.weidongjian.weigan.webviewdemo.MyWebView>
    </FrameLayout>

4、activity的设置:

private MyWebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        webView = (MyWebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://www.baidu.com/");
    }

 @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

其中的onKeyDown的目的就是为了实现按后退按钮,返回到之前的页面


最后,附上源代码,欢迎参阅(源代码用android studio写的,请注意)。

源码下载链接


2019-03-08 11:56:25 zppbuhuo 阅读数 410
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27803 人正在学习 去看看 秦子恒

我们先来看一下游戏完成后的样子!知道我们即将要做的游戏的最终效果整个教程的学习非常有帮助!

点击这里来下载工程文件,用唤境Evkworld打开下载到的dmk格式文件,再点击顶部菜单栏右边的“预览”即可运行游戏~

image001.png

预览状态下单击鼠标左键就可以翻阅剧情,体验游戏。

点击这里可以下载工程中所用的素材哦~

现在让我们正式开始学习用唤境Evkworld制作文字冒险类游戏吧!

 

先回到唤境Evkworld主界面,点击顶部菜单栏最左边的按钮。
下拉选择“项目”,再选择“新建项目” 。

image002.png

先给你的游戏项目取一个好听的名字,这里暂且先叫它“avg”吧~

企业微信截图_1542337199842.png

舞台宽度&高度决定游戏最终成品的分辨率和比例,取决于你想让游戏最终承载在哪个平台上。一般来讲,如果你是想做一个在手机上玩的游戏,那么舞台的宽度&高度建议设置为1080×1920,若是在pc(电脑)上,则建议设置为1920×1080。

填写完毕,单击“确认”,我们回到唤境Evkworld的主界面。屏幕正中间的部分被称为舞台,是创作游戏时的主操作区域。你可以在舞台中设计游戏中各种元素的布局,比如人物和道具的摆放。

image006.png

小贴士:我们新建项目后,左边对象库内默认新建了一个场景“场景0”。大家一定要记住场景这个概念,我们所有的操作都是基于当前的目标场景,不要弄错场景哟。

 

接下来让我们来添加第一个对象——游戏背景图。点击菜单栏上的精灵图按钮,或直接将精灵图标拖拽至舞台。

image008.png

双击对象库中对应的精灵图标,进入图片编辑器。

image009.png

由于我们插入的是一张静态的背景图,所以只需要双击下方第一个小精灵图标或点击打开文件即可打开本地文件,添加你想要的图片。

image012.jpg

可以注意到,这里的第一帧虽然标注的是“0”,但是是第1帧没错,唤境Evkworld内所有的序号都是从0开始的,这是为了与底层编程语言保持一致。

小贴士:图片编辑器是可以编辑动画(动态图片)的,只要插入多张静态图片,再调整右上角的“播放速度”里的数字即可。(动画是由多张静态图片连续播放形成的)

选择好合适的背景图插入之后,点击“确定”回到舞台,完成背景的添加~

image015.jpg

为了保证背景图的展示效果,可以拉动背景图的选中框,也就是周围的蓝色框调整大小。根据需要,我们这里把背景图限制在窗口尺寸内,也就是舞台区域的这个白色框范围内并铺满。

在摆放其他游戏元素时也是一样的做法,请根据需要摆放,要注意的是摆放在白色框以外的区域就会看不到哦~

image016.png

这样,一张背景图就添加好了~

企业微信截图_15423461944003.png

 

添加立绘

那么,背景添加完成之后我们来添加立绘!用添加背景图的方法即可添加立绘。

image018.jpg

image020.jpg

image022.jpg

游戏中登场的人物可能较多,可以通过右键选择重命名给人物立绘设置名字,点击确定回到舞台,完成立绘的插入!最后可以再调整一下立绘的尺寸。

image023.png

我们可以右键单击场景,对场景进行重命名。此处,我们将场景0重名为店门口

企业微信截图_1542338812460.png

小贴士:如果想让你插入的背景图和立绘的位置固定不动,可以在左边的项目库内,双击当前场景“店门口”,点击对应背景图和立绘的上锁图标,这样就能固定图片的位置了。

image024.png

 

添加对话

对话框是文字冒险类游戏里不可或缺的部分,用于承载剧情和人物对白。而在唤境Evkworld里,对话框有专门定制的组件,和精灵图是一个等级的哟~插入对话框和插入精灵图的操作一致,点击按钮或直接拖拽入舞台就可以了。

image025.png

如果对话框的大小不合适,可以通过样式编辑调整对话框的样式
,这里需要注意的是:对话框是不能像立绘和背景图那样通过选中框调整大小的,一定要进入样式编辑内调整~

image026.png

那么如何编辑对话框样式呢?

在左下方对象库的“可视对象”中,找到当前场景的对话框对象,并双击。

image027.png

或点击对话框对象后,在引擎界最右边就会展开当前对话框对象的属性面板。在属性面板里找到“样式编辑”点击即可打开样式编辑界面。

image028.png

image030.jpg

打开样式编辑界面之后点击对话框的最外围,就会出现蓝色的选中框,直接拖动就能调整了。也可以在右边的属性里调整位置、宽度(w)长度(h)。

image031.png

image033.jpg

位置(x,y):对话框是由头像(图)、对话文字、角色名、对话框背景(图)四个部分组成的。每个部分都能调整相对位置和长宽,
大家可以记住每个部分的相对位置和长宽,下次再调整对话框时就能直接输入,这样比较高效且对话框不会移位。舞台上对话框显示的大小会根据这里的对话框背景图大小来决定。

如需更换头像,可点击头像部分,在右边属性栏中点击“选择贴图”更换。

image035.jpg

image036.png

点击“角色名”的部分则可以修改显示的名称,在右边属性栏中直接编辑文字,还可以调整字体、字号及颜色。

image038.jpg

image039.png

小贴士:对话框样式数量=当前出场的人物数量,有几个人物就建几个样式(旁白也需要单独建一个样式)

如需调整文本框,则点击“文本内容”部分,在右边的属性栏中直接编辑,还可以修改字体,字号,颜色和对齐方式。

image040.png

image041.png

确定好对话框的样式后,需要给对话框命名,点击左上角的“默认样式”,右键选择重命名。需要注意的是,为了之后操作方便,建议样式名最好和角色名一致!

image042.png

image043.png

再次新建样式时,可以直接克隆前面已经建好样式提高效率。

image044.png

对话框样式创建完毕后点击“确定”,回到舞台,就能看到对话框的变化了。

image045.png

接下来我们要在对话框中输入文字。点击左上项目库,展开当前场景,在当前场景内找到对话框组件并点击。切记是当前场景内的对话框哟~

image046.png

引擎最右边属性面板里就会出现当前这个对话框的相关属性。点击选择对话编辑。

image047.png

打开对话编辑界面

image049.jpg

根据剧情,先调出第一个出场人物的对话框样式,点击“对话”按钮边上的任意地方,展开输入框。

image051.jpg

在左边输入对话文本,这样,对话就生成了!

image053.jpg

如果需要为对话添加声音,那么我们需要先让引擎的“系统”存储你所有需要的音乐音效文件。音频格式目前支持mp3和ogg格式,非这两个格式的音频文件在导入之前需要先转换一下。点击此处的多媒体选项。

image055.jpg

导入需要用到的音频文件。

image056.png

在对应的对话上点击配音右边的文件夹图标为其添加声音。

image058.png

点击“新建对话”,就能添加下一句对话。

image060.jpg

image062.jpg

按照剧情把对话填完,点击确认回到舞台画面。这样我们就完成了第一个场景啦!现在我们点击预览按钮来验收一下我们的阶段性成果吧~预览按钮在主界面的右上方。

企业微信截图_15423404757893.png

预览分“预览”和“单幕预览”两种方式

企业微信截图_15423405749086.png

企业微信截图_15423405466631.png

“预览”是从头开始预览,“单幕预览”是从当前场景开始预览。

目前我们只建了第一个场景,用哪种方式预览效果都是一样的~直接点击就可以了。在这里建议大家在制作过程中多预览,能直观地看到当前的运行效果,以便于及时发现错误并调整!

 

添加更多场景

到这里为止,我们已经完成了示例游戏里的第一个场景搭建,其他场景也都可以用同样的方法进行制作。

首先新建下一个场景。

image067.png

修改场景名称,重复该步骤创建多个场景。

image068.png

在场景中加入对应的立绘与对话框,并添加对话,即重复上面的步骤。

想必大家对一句句添加台词对白的方式感到头疼,别急,下面为大家介绍批量导入台词对白的方法:当需输入的对话特别多的时候,可以使用对话编辑的自动导入功能。

首先,点击“导出文件”。

image070.jpg

得到一个cvs格式的表格。

image071.png

我们在表格内把样式名和对话文本填好,样式名和文本是必填项,角色名可以根据需要填。

image073.jpg

回到对话编辑界面,点击“导入文件”,直接导入我们填好的cvs表格文件,当前场景的所有对话就自动生成啦!

image075.jpg

image077.jpg

到这里,大家知道为什么要求对话框样式名和角色名要一致了吧!
还有就是大家做游戏之前一定要把剧本和流程准备好,推荐用excel写对话,方便后续批量导入。

添加事件

按照上述方法搭建好所有需要的场景之后我们需要把这些场景都串起来,并加上一些过度效果。在此之前我们先来认识一下抓马的事件表区域,也就是位于舞台正下方的这个区域。

image079.jpg

在唤境Evkworld中,所有的动态效果都可以通过编写事件表来实现,写事件表可以达到用代码编程的效果哟~

让我们先来考虑一下场景跳转需要达成什么样的前提条件。

假设我们想要的效果是:【当对话播放完毕后,跳转到下一个场景】。那么播放对话的“对话框”是对象,“对话播放完毕”就是“条件”,“跳转到下一个场景”就是要执行的“动作”。

条件中的“对话播放完毕”主体对象是对话框,所以我们需要选中对话框后进行后续的操作。

思路清晰之后我们来写“事件”。点击舞台上的对话框(或点击项目库中当前场景里的对话框组件)。

image080.png

image081.png

然后点击“+事件”,添加一条空“事件”。

image082.png

事件编写分为两个部分,前面是“条件”,后面是“动作”。

image084.jpg

此时右边会出现用于编写当前事件的面板。

image085.png

我们在上方的“条件”中,找到“对话框结束时”这个条件,双击添加进当前编辑的事件。

image087.jpg

image089.jpg

下面为事件添加 “跳转到下一个场景”这个“动作”,因为这个动作针对的是整个场景,属于游戏整体系统的一部分,所以这个动作存放于“系统”中。点击“系统” 图标image090.png,(也可以在对象库的抽象对象里选择“系统”)

image092.jpg

image093.png

右边会出现的系统相关的条件动作面板,要注意不同的对象的面板内容是不同的,一定要准确选中对象哦。

在系统的动作中找到“跳转场景”这个动作,双击。

image094.png

选择需要要跳转到的场景,点击“确认”。

image096.jpg

点击“完成编辑”关闭事件结束事件表编辑。

image098.jpg

现在我们可以预览一下,确认一下运行效果。

小贴士:事件表的条件、动作非常丰富,可以实现非常多种游戏效果。大家可以查阅帮助手册了解各个条件和动作的运用方法。多多尝试,会有意向不到的收获哟~

添加更多事件

下面我们再编写两个文字冒险类游戏里常见的效果,以展示事件编写的丰富性。

根据对话切换立绘

AVG中一个常见的效果是,让立绘表情在对应时机发生变化。这是文字冒险类游戏里经常会用到的效果,在对话过程中,立绘表情发生变化。同样的,我们先来分析达成这个效果的对象所需要的条件和动作:【“当对话进行到某一句话时,立绘表情发生变化!】;【对话框】是对象,【对话进行到某一句话】是条件,【立绘表情发生变化】是动作。

通过拆解,我们总结得出:人物一开始是一般状态(平静状态),直到某句对话出现后,立绘表情发生变化(生气状态)。

点击舞台上的对话框(或是在项目库中展开当前场景选择目标对话框),在右侧面板点击“对话编辑”。

image099.png

先给这句话做个记号,在标签框里根据喜好填写容易记住的标签内容,这里我们暂且填“女仆生气”。

image101.jpg

点击确定,返回主界面。在添加事件之前我们先给立绘添加生气的表情。

双击舞台上的立绘,或者双击对象库中的立绘对象。

image102.png

image103.png

在立绘人物编辑界面选择新建动画并修改名字之后添加对应的图片。

image104.png

image106.jpg

接着点击舞台上的对话框(或是在项目库中展开当前场景选择目标对话框),再点击“+事件”,添加一条空事件。

image108.jpg

在右边面板中,双击“到达标签时”这个条件。在弹出的框中填写我们之前设置的标签”女仆生气”(一定要加英文(半角)引号哦!)

image109.png

image110.png

点击确认。我们就成功添加了【当标签是”女仆生气”这句话出现时】的这个条件。

image112.jpg

接下来添加【立绘表情变化】这个动作。

在右边面板中的“动作”部分找到“设置动画”,双击,在弹出的框中填写我们设置的动画名字““田园装-生气””

image113.png

image114.png

点击“完成编辑”完成这个事件的编写。

image116.jpg

对话中更改立绘表情的方法就完成了!

设置对话选项

AVG中另一种常用的效果是设置对话选项。通常的用法有两种:一是点击某个选项跳转到不同的场景;二是选择不同的选项时,会有不同的数值变化。我们先教大家第一种做法的实现方式。

在菜单栏上点击“按钮组件”这个按钮,或直接拖入舞台。

企业微信截图_15423449466062.png

一个按钮相当于一个选项,所以我们至少需要设置两个按钮。先来设置第一个按钮。

在对象库中找到刚新建的按钮对象,右键选择重命名。

image118.png

之后双击即可进入按钮样式编辑界面,界面左侧显示每个按钮的四个状态,可以给不同状态设定不同的样式,增加按钮的表现力。

image120.jpg

image122.jpg

设置好按钮后,点击舞台上的按钮,在右边显示的按钮属性面板中可以设置按钮上的文本,文字大小、颜色,初始状态等等。如果没有看到属性面板,那么有可能是因为没有点击事件表区域的“完成编辑”退出事件表编辑模式导致的,这里要留意一下。

image123.png

image124.png

这时候第一个按钮就设置完成了,我们可以复制第一个按钮的样式,直接制作第二个按钮。

在左下方对象库里,在“剧情选项一”对象上右键,选择复制。复制后重命名为剧情选项二。

image126.jpg

image128.jpg

鼠标左键按住对象,拖放到舞台上。

image130.jpg

image131.png

用同样的方法设置好第二个按钮。

image133.jpg

两个选项按钮都设置好之后我们来开始写事件:【当点击选项按钮时,跳转到对应场景】;【选项按钮】是对象,【点击选项按钮】是条件,【跳转到对应场景】是动作。

所以先选中作为对象的选项按钮。然后点击“+事件”,创建一条空的事件。在右边面板中找到,“被点击时”这个条件。

image134.png

再点击“系统”图标image135.png,切换到系统的条件动作面板。

在动作中找到“跳转场景”,双击,再选择想跳转到的场景即可~

image136.png

image137.png

一个完整的、根据选项跳转指定场景的事件就写好了,可以预览一下看看效果!

image139.jpg

同样的,重复一次上面的步骤,设置剧情选项二按钮的事件的条件和动作。

image141.jpg

在按钮出现的时机方面,我们希望在奶茶场景中的对话结束后,才出现选项按钮并且隐藏对话框。所以首先我们需要把两个选项按钮的开始可见属性去掉,只有这样做之后按钮在场景开始时才默认不显示。

image142.png

接着通过写事件,在对话框结束时(条件),显示剧情选项一和剧情选项二,并且隐藏对话框(动作)。

image144.jpg

到这里,这个简单的AVG就全部完成啦,要不现在就趁热打铁,用唤境Evkworld开始制作属于你的文字冒险游戏吧!

2017-11-22 19:36:00 weixin_34198762 阅读数 38
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27803 人正在学习 去看看 秦子恒

网上开发微信开发的教程很多,但c#相对较少。这里列出了我所有c#开发微信的文章,方便自己随时查阅。

 

一、基础知识

用c#开发微信(1)服务号的服务器配置和企业号的回调模式 - url接入 (源码下载)

用c#开发微信(2)扫描二维码,用户授权后获取用户基本信息 (源码下载)

用c#开发微信(3)基于Senparc.Weixin框架的接收普通消息处理 (源码下载)

用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)

用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”

用c#开发微信 (19) 公众平台接口权限列表说明 - 订阅号、服务号认证后的区别

 

二、微营销

1. 微渠道

用c#开发微信 (6) 微渠道 - 推广渠道管理系统 1 基础架构搭建

用c#开发微信 (7) 微渠道 - 推广渠道管理系统 2 业务逻辑实现

用c#开发微信 (8) 微渠道 - 推广渠道管理系统 3 UI设计及后台处理

用c#开发微信 (9) 微渠道 - 推广渠道管理系统 4 部署测试 (最终效果图) 

 

2. 微统计

用c#开发微信 (11) 微统计 - 阅读分享统计系统 1 基础架构搭建

用c#开发微信 (12) 微统计 - 阅读分享统计系统 2 业务逻辑实现

用c#开发微信 (13) 微统计 - 阅读分享统计系统 3 UI设计及后台处理

用c#开发微信 (14) 微统计 - 阅读分享统计系统 4 部署测试 (最终效果图)

 

3. 微活动

用c#开发微信 (15) 微活动 1 大转盘

用c#开发微信 (16) 微活动 2 刮刮卡

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

 

三、 应用

用c#开发微信(5)自定义菜单设置工具 (在线创建)

用c#开发微信 (18) 多客服

用c#开发微信 (20) 微信登录网站 - 扫描二维码登录

用c#开发微信 (21) 微信酒店预订系统

用c#开发微信 (22) 微信商城 - 微信支付 (c#源码) new_dynamic



本文转自疯吻IT博客园博客,原文链接:http://www.cnblogs.com/fengwenit/p/4505062.html,如需转载请自行联系原作者


没有更多推荐了,返回首页