对话框是很多游戏都有的内容，当我们观察游戏的对话框，会发现其主要内容有：人物头像，对话内容以及对话框背景贴图，这篇文章就主要对对话框进行绘制。

对话框实体类

除了上面我们提到的主要内容以外，我们还需要模拟对话框中文字延时展示的效果，也就是每隔一段时间多显示几个字这样的效果。我们采用延时计数的形式进行实现，每当计数器到了某个值的时候才让字符串指针前进，并且当字符串指针已经到达字符串的尾部的时候，将不再前进。

@Data
@NoArgsConstructor
@AllArgsConstructor
// 文字动画类，主要实现的功能是一个字一个字浮现一段话
public class TextAnimEntity {

    // 这个属性是说话的人
    private String name;
    // 这个属性是说的话
    private String text;
    // 人物的头像
    private Image image;

    // 背景图片
    private Image bgImage;

    private int width = 100;
    private int height = 100;
    // 指针，指向下一个要显示的字
    private int textIdx;
    // 定义一个延时计数器，只有计数器到达一定值的时候才将指针前移
    private int clock;
    private int clock_max;

    // 是否完全显示标志位
    private boolean finish;

    public TextAnimEntity(String image, String bg_img,String name, String text){
        this.image = new Image(image, width, height, true, true);
        this.bgImage = new Image(bg_img);
        this.name = name;
        this.text = text;
        this.textIdx = 0;
        this.finish = false;
        this.clock = 0;
        this.clock_max = 5;
    }

    private String getsub(){
        if (textIdx == 0) {
            return "";
        }
        char[] c = new char[textIdx+1];
        for(int i=0; i<textIdx; i++){
            c[i] = text.charAt(i);
        }
        return new String(c);
    }

    // 获取要显示的字
    public synchronized String getnext(){
        if(finish){
            return name + "：" + text;
        }
        if(clock < clock_max){
            //System.out.println(textIdx);
            clock++;
            return name + "：" + getsub();
        } else {
            clock = 0;
            String rst = name + "：" + getsub();
            textIdx++;
            if (textIdx == text.length()) {
                finish = true;
            }
            return rst;
        }
    }
}

绘制类

绘制类在之前的基础上需要再加上对画框的绘制，由于对话框是显示在最上面的，所以应该最后绘制。

public class AnimDrawer {

    private Canvas canvas;
    private GraphicsContext gc;

    // 动画集合
    private List<AnimEntity> animlist;
    // 对话集合
    private List<TextAnimEntity> textlist;

    public AnimDrawer(Canvas canvas, GraphicsContext gc){
        this.canvas = canvas;
        this.gc = gc;
        animlist = new ArrayList<>();
        textlist = new ArrayList<>();
    }

    // 添加对话实体
    public void addText(TextAnimEntity textEntity){
        textlist.add(textEntity);
    }

    // 移除对话实体
    public void removeText(TextAnimEntity textEntity){
        textlist.add(textEntity);
    }

    // 添加动画实体
    public void addAnim(AnimEntity animEntity){
        this.animlist.add(animEntity);
    }

    // 移除动画实体
    public void removeAnim(AnimEntity animEntity){
        this.animlist.remove(animEntity);
    }

    // 开始不停画动画
    public void start(int timeout){
        new Thread(()->{
            while (true) {
                draw();
                try {
                    Thread.sleep(timeout);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }).start();
    }

    // 在画布上画动画
    public void draw(){
        if(animlist.size() == 0){
            throw new RuntimeException("没有动画呀");
        }
        gc.clearRect(0,0,canvas.getWidth(), canvas.getHeight());
        for(int i=0; i<animlist.size(); i++){
            //System.out.println("aaa");
            gc.drawImage(animlist.get(i).getnext(),
                    animlist.get(i).getPosx(), animlist.get(i).getPosy(),
                    animlist.get(i).getWidth(), animlist.get(i).getHeight());
        }

        // 绘制对话
        // 首先在屏幕下半区绘制一个黑色矩形
        //gc.strokeRect(0, 350, canvas.getWidth(), canvas.getHeight()-350);
        TextAnimEntity entity = textlist.get(0);

        // 绘制对话框
        gc.drawImage(entity.getBgImage(), 0, 350,canvas.getWidth(), canvas.getHeight()-350);

        // 绘制头像
        gc.drawImage(entity.getImage(), 35,380, 50,50);

        // 绘制说的话
        gc.setFont(Font.getDefault());
        //System.out.println(entity.getnext());
        //gc.setFill(Color.BLACK);
        gc.strokeText(entity.getnext(), 100, 400);
    }
}

主启动类

主启动类主要是添加了加载对话框的内容的代码

public class MainStage extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    // 读取文件夹下面的所有图片
    public List<String> getnamelist(String sufix){
        String path = "/workspace/JAVAFXGame/target/classes/image/" + sufix;
        File file = new File(path);
        String[] filelist = file.list();
        List<String> namelist = new ArrayList<>();
        for(int i=0; i<filelist.length; i++){
            namelist.add("/image/" + sufix + "/" + filelist[i]);
        }
        return namelist;
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Canvas canvas = new Canvas(500,500);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        AnimDrawer animDrawer = new AnimDrawer(canvas, gc);

        // 创建动画
        List<String> namelist = getnamelist("role");
        List<String> namelist1 = getnamelist("role1");


        AnimEntity animEntity = new AnimEntity(namelist, 150, 150, 50, 100);
        AnimEntity animEntity1 = new AnimEntity(namelist1, 150,150, 150,100);

        animDrawer.addAnim(animEntity);
        animDrawer.addAnim(animEntity1);


        // 添加对话实体类
        TextAnimEntity textAnimEntity = new TextAnimEntity("/image/刻晴111.png", "/image/对话框2.png","刻晴", "你们是谁，来这里干什么");
        animDrawer.addText(textAnimEntity);

        animDrawer.start(50);

        Pane pane = new Pane();
        Scene scene = new Scene(pane, 500,500);
        pane.getChildren().add(canvas);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}

效果展示

 图片素材

本文素材较为简单，就是刻晴的头像以及背景图

9-Patch 图片制作

在AS 中右击图片，然后选择create 9-Patch file ，然后在图片当中，左边界和上边界是当图片伸展时所延申的部分，右边界和下边界是其中内容所填充的部分。

对于聊天中的气泡对话框，当然就需要使用9-Patch 文件了，我在这里也提供两个免抠素材：
绿色的：
↓

↑
这里还有一个白色的（右击，选择保存图片）：
↓

↑

带气泡的对话框

添加依赖

既然是对话框，我们就可能用到RecyclerView，使用RecyclerView 就要添加依赖，具体方法见：
Android >> 26. RecyclerView（一）

编辑对话框主页面

对话框除了各自的信息之外，当然最基本还要有文字输入框以及一个发送按钮：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Chatting_View"
    android:background="@color/colorLittleGray"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/msg_chatting_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </androidx.recyclerview.widget.RecyclerView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type something here"
            android:maxLines="2"
            tools:ignore="Suspicious0dp" />
        <Button
            android:id="@+id/send_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"/>
    </LinearLayout>
</LinearLayout>

我们放置了一个RecyclerView，然后在其下面放置一个文本输入框和一个发送按钮。

编辑RecyclerView 子项

有了对话框的整体布局之后，当然就要编辑一下每个RecyclerView 的消息子项

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/left_white_msg"
        tools:ignore="RtlHardcoded">

        <TextView
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_margin="10dp"
            android:textColor="#000"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/right_green_msg"
        tools:ignore="RtlHardcoded">

        <TextView
            android:id="@+id/right_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_margin="10dp"
            android:textColor="#000"/>
    </LinearLayout>
</LinearLayout>

（在这里，为了美观，将接收和发送的消息分别设置为左对齐和右对齐）

为了方便之后的消息类型判断以及显示，我们将一个接收消息框和一个发送消息框作为一个子项体，在后续我们可以通过判断消息是接收进来的还是发送出去的从而选择显示哪个消息（setVisibility(View.VISIBLE)），而将另一个消息的控件设置为setVisibility(View.GONE)

定义消息实体类

现在有了对话框的整体布局和每个Item 子项的布局之后，我们就要开始对Item 子项的性质进行设置了。

在Activity 中定义一个消息的类：

public class Msg{
    public static final int TYPE_RECEIVED = 0;
    public static final int TYPE_SENT = 1;
    private String content;
    private int type;

    public Msg(String content, int type){
        this.content = content;
        this.type = type;
    }

    public String getContent(){
        return content;
    }

    public int getType(){
        return type;
    }
}

Msg 类中只有两个字段，content 表示消息的内容，type 表示消息的类型（TYPE_RECEIVED 或TYPE_SENT）

创建适配器类

用了RecyclerView，当然就还需要使用适配器了。

同样在Activity 的java 文件中

public static class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder>{
    private List<Msg> mMsglist;

    static class ViewHolder extends RecyclerView.ViewHolder{
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;

        public ViewHolder(View view){
            super(view);
            leftLayout = view.findViewById(R.id.left_layout);
            rightLayout = view.findViewById(R.id.right_layout);
            leftMsg = view.findViewById(R.id.left_msg);
            rightMsg = view.findViewById(R.id.right_msg);
        }
    }

    public MsgAdapter(List<Msg> msgList){
        mMsglist = msgList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate
                (R.layout.msg_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Msg msg = mMsglist.get(position);
        /* 若收到消息，显示左边的消息布局，将右边的消息布局去除 */
        if(msg.getType() == Msg.TYPE_RECEIVED){
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftMsg.setText(msg.getContent());
        } 
        /* 若发送消息，则显示右边的消息布局，将左边的消息布局去除 */
        else if(msg.getType() == Msg.TYPE_SENT){
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.rightMsg.setText(msg.getContent());
        }
    }

    @Override
    public int getItemCount() {
        return mMsglist.size();
    }
}

使用RecyclerView

现在有了适配器了，可以使用这个RecyclerView 了

先声明

private List<Msg> msgList = new ArrayList<>();
private EditText inputText;
private Button send;
private RecyclerView msgRecyclerView;
private MsgAdapter adapter;

最后在Activity 的onCreate() 方法中进行调用

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_chatting__view);

    initMsgs();
    inputText = findViewById(R.id.input_text);
    send = findViewById(R.id.send_button);
    msgRecyclerView = findViewById(R.id.msg_chatting_recycler_view);
    LinearLayoutManager layoutManager = new LinearLayoutManager(this);
    msgRecyclerView.setLayoutManager(layoutManager);
    adapter = new MsgAdapter(msgList);
    msgRecyclerView.setAdapter(adapter);
    send.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            String content = inputText.getText().toString();
            if(!content.isEmpty()){
                Msg msg = new Msg(content, Msg.TYPE_SENT);
                msgList.add(msg);
                adapter.notifyItemInserted(msgList.size() - 1);
                msgRecyclerView.scrollToPosition(msgList.size() - 1);
                inputText.setText("");
            }
        }
    });
}

private void initMsgs(){
    Msg msg1 = new Msg("Hello guy.", Msg.TYPE_RECEIVED);
    msgList.add(msg1);
    Msg msg2 = new Msg("Who are you?", Msg.TYPE_SENT);
    msgList.add(msg2);
    Msg msg3 = new Msg("I'm Anonymous.", Msg.TYPE_RECEIVED);
    msgList.add(msg3);
}

我们先在initMsgs() 方法中初始化了几条信息用于显示。
然后配置RecyclerView，添加点击事件。在点击事件中，我们为要发送出去的信息创建一个Msg 对象，然后添加进msgList 列表当中。之后调用适配器的notifyItemInserted() 方法用于通知列表有新的数据插入，这样新增的消息才能够在RecyclerView 中显示。接着调用RecyclerView 的scrollToPosition() 方法将显示的数据滚动到最后一行。最后将文本输入框清空。

在大部分游戏中都会有对话框的存在，能推动剧情发展，能让玩家玩懂游戏。

那么在Pygame中，应该怎么制作这种对话框呢?

 Pygame中基础的文字渲染和绘制:

#创建文字库
my_font = pygame.font.Font(font_family,size)
#前后参数分别为字体，大小
my_text = my_font.render(text,color,bool)
#渲染文字,参数分别为 文字内容,颜色(R,G,B),是否抗锯齿(True/False)
surface.blit(my_text,(x,y))
#绘制文字

但是问题是:渲染文字这一块十分的耗费性能，就和加载导入图片一样，是很吃帧数的。于是，我就通过提前渲染并储存在一个列表里来尽量做到优化。

竟然对话框的字是一个一个出现的,而且还有彩色文字,那么,我想到的方法是将每一个字拆分开放在列表中,并且写入对应坐标,就比如:

import pygame,sys
from pygame.locals import *

pygame.init()
#初始化pygame,否则用到字体这一块会报错

window_w,window_h = 1280,720
screen = pygame.display.set_mode((window_w,window_h))
#创建宽1280高720的屏幕

my_font = pygame.font.Font("font.ttf",40)
#这里是直接导入字体文件而并非系统自带字体

t1 = my_font.render("你",(128,128,128),True)
t2 = my_font.render("好",(255,255,255),True)
lst = [(t1,(0,0)),(t2,(40,0))]

while True:#开启循环
    
    screen.fill((0,0,0))#填充背景为纯黑

    for event in pygame.event.get(): #监听事件,比如退出
        if event.type == pygame.QUIT:
            sys.exit()
                
    for i in lst:#遍历列表绘制文字
        screen.blit(i[0],i[1])

    pygame.display.flip()#刷新屏幕

这样就能绘制出两个紧密连接并且颜色不同的字了

不过我会把特殊效果和基础输出分开讲的，这篇主要讲文字输出

竟然要做出一个方便,好用的对话框,

我们可以将整一个对话框存储在一个类里边,先搞参数:

class WordsOutput():
    def __init__(self,text,name,portrait):
        self.text = text #对话框内容
        self.name = name #名字
        self.portrait = portrait #头像,存储surface对象
        self.start_x = 0
        if self.portrait != None:
            self.start_x = self.portrait.get_size()[0]
        self.start_y = 0
        if self.name != None:
            self.start_y = self.name.get_size()[1]

那么,光有内容可是不行的啊，要有头像,名字的对吧，于是就添加了两个参数:name名字,portrait头像

无头像:

 有头像:

区别在于,文字渲染的起始位置是不同的

所以，我添加了一个参数start_x,值为0，若有头像则设置为头像的宽度

有无名字的区别也是这样，就不多bb了

接着，就是分析模块，因为当文字长度到达一定值时，就会超出屏幕边缘，所以需要换行。

所以就有了参数:start_y绘制高度，和start_x是一个原理

文字分析器的原理:

遍历一整段文字，将每个文字都单独分开,单个渲染出来,获取当行文字长度,检测是否超出边缘。

若超出边缘：换行。没有超出：继续渲染并储存在列表里，记录其位置信息。

最后，绘制时只需遍历列表即可。

如果看不懂的话，上代码，看注释，研究一下

def makeWords(txt, size, color):#文字渲染,返回 渲染的对象和尺寸
    my_font = pygame.font.Font('../font.ttf', size)
    r = my_font.render(str(txt), True, color)
    return (r, r.get_size())


class WordsOutput():
    def __init__(self, text, name, portrait):
        self.startx = 0  # 起始位置
        self.endx = 1280  # 边缘位置
        self.text = text
        self.name = name
        self.portrait = portrait #头像为surface对象
        self.portrait = pygame.transform.scale(self.portrait,(192,192))#压缩图片尺寸到192×192
        if self.portrait != None:  # 如果有头像则改变起始位置
            self.startx = 192#将起始x位置设置为头像宽度
        self.words = []  # 储存渲染出来的文字的列表
        self.analyzed = False  # 是否分析过
        self.interval = time.time()  # 计时器
        self.output_speed = 0.02  # 输出文字的间隔时间
        self.finished_writing = False  # 是否结束输出文字
        self.out_num = 0 #输出的文字编号
    def analyze(self):
        txt = self.text  # 将txt赋值为内容
        height = makeWords(txt[0], 35, (255, 255, 255))[1][1]  # 单个文字高度,用第一个字的高度
        txt_list = []  # 渲染出来的文字列表
        w_last = 0  # 叠加文字后的整体长度
        #初始高度位置
        start_y = 0
        #检测是否有头像
        if self.portrait != None:
            txt_list.append((self.portrait, (0, start_y)))
        #若有名字则将名字渲染出来存储进列表,改变排版
        if self.name != None:
            a = makeWords(self.name, 35, (255, 255, 0))
            txt_list.append((a[0], (self.startx, start_y)))
            start_y += a[1][1]
        #开始遍历文字
        for i in range(len(txt)):
            a = makeWords(txt[i], 35, (255, 255, 255))  # 渲染文字
            if self.startx+w_last+a[1][0] <= self.endx:  # 检测是否超出设定边缘
                #未超出则记录位置,渲染文字,存储进列表
                pos = (self.startx+w_last, start_y)
                txt_list.append((a[0], pos))
                w_last += a[1][0]
            else:
                #超出:换行,将x坐标设置为初始值,y则增加一个字的高度
                start_split = i-1
                start_y += a[1][1]
                w_last = 0
                a = makeWords(txt[i], 35, (255,255,255))
                pos = (self.startx+w_last, start_y)
                txt_list.append((a[0], pos))
                w_last += a[1][0]
        self.words = txt_list
        self.analyzed = True
    def paint(self):
        if self.analyzed == False:
            self.analyze()
        if time.time() >= self.interval + self.output_speed and self.out_num < len(self.words):#检测是否到输出下一个文字的时间并且还未输出完
            self.out_num+=1
            self.interval = time.time()#重置计时器
        for i in range(self.out_num):#绘制到达的文字
            img, pos = self.words[i]
            screen.blit(img, pos)
        if self.out_num == len(self.words): #如果绘制完了
            self.finished_writing = True #将变量设置为True

这一版的自由度并不高,只能自定义内容,名字,头像,其他的功能实现在下一篇会讲到。

使用方式:

#创建计时器,通俗讲就是帧数限制器
clock = pygame.time.Clock()
#创建对话框列表,存储对话框
w1 = []
#实例化类,写入参数,分别为 内容,名字,头像
w1.append(WordsOutput("Hello pygame",None,None))
w1.append(WordsOutput("Hello pygame, let's go", "名字", None))
while True:
    screen.fill((0,0,0))#填充背景
    for event in pygame.event.get():
        if event.type == pygame.QUIT:#检测退出
            exit()
        if event.type == MOUSEBUTTONDOWN:#检测鼠标是否按下
            if event.button == 1 and len(w1) > 0:#检测是否按下了左键,并且w1不是空列表
                if w1[0].finished_writing:#如果文字输出完成了,则删除显示的这一项
                    w1.pop(0)
    if len(w1) > 0:#如果w1不是空列表,则调用其第一项
        w1[0].paint()
    clock.tick(0)#将帧数限制设为无限制
    pygame.display.flip()#刷新屏幕

用到的模块有:pygame,time

导入图片代码:

img = pygame.image.load(path).convert_alpha()#path:路径
#convert_alpha()通俗来讲就是优化,提高帧数,并且保留图片的透明像素
#convert()不保留透明像素