提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

java oop经典案例开发与源码 -java swing 羊了*羊 简易版本开发 （1） 地图模块编辑器开发（附github源码地址）

GitHub 源码 模块 开发
2023-03-14 22:37:26 时间

背景

最近爆火的消消游戏 大家应该都玩过，

有没有想过用java自己开发一个呢，我们玩的小程序是客户端，

首先加载地图才能玩，地图是在服务端编辑的，

所以地图是第一步，本篇我们就是开发一个简易版的地图编辑器

地图编辑器效果图

目录结构以及模块

关键模块以及代码分析

MainWindow.java 


主窗口，也是程序入口，这里因为只写了地图编辑器代码，所以目前只负责启动地图编辑器，主要是用spring application runner  启动，目的是等所有comment 都被spring 管理之后在启动

 
@Component
public class MainWindowStartRunner implements ApplicationRunner {
 
    @Autowired
    private MainWindow mainWindow;
 
    @Override
    public void run(ApplicationArguments args) throws Exception {
        mainWindow.init();
    }
}

DesignPanel.java

地图设计器主入口，将地图编辑器面板，按钮面板和图片选项卡面板放入：

public class DesignPanel extends JPanel {
 
    private final DesignMapPanel designMapPanel;
 
    private final DesignSpriteGroupPanel spriteGroupPanel;
 
    private final DesignButtonPanel buttonPanel;
 
    public void init() throws IOException {
        this.setLayout(new BorderLayout());
        this.add(spriteGroupPanel,BorderLayout.WEST);
        this.add(designMapPanel,BorderLayout.CENTER);
        this.add(buttonPanel,BorderLayout.NORTH);
    }
}

DesignMapPanel.java 是地图编辑器核心类，负责绘制网格，以及添加图像到地图中，关键代码图下

 public  DesignMapPanel() throws IOException {
 
 
        //获取总窗体宽高
        GraphicsEnvironment ge=GraphicsEnvironment.getLocalGraphicsEnvironment();
        Rectangle rect=ge.getMaximumWindowBounds();
        int w=rect.width -230;
        int h=rect.height -104 ;
        this.setLayout(null);
        
        //设置滚动条
        jLayeredPane = new JLayeredPane();
        jLayeredPane.setBounds(0,0,w,h);
        jLayeredPane.setLayout(null);
        this.add(jLayeredPane);
        
        //设置初始化时的背景图片大小
        windowWidth = jLayeredPane.getBounds().width;
        windowHeight = jLayeredPane.getBounds().height;
        bgImg = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/bg.jpeg"));
        bgLabel = new JLabel(new ImageIcon(bgImg.getScaledInstance(windowWidth,windowHeight,Image.SCALE_DEFAULT)));
        bgLabel.setBounds(0,0,windowWidth,windowHeight);
        this.jLayeredPane.add(bgLabel,JLayeredPane.DEFAULT_LAYER);
        
        //设置鼠标点击事件
        this.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e) {
                addHeros(e.getX(), e.getY());
            }
        });
 
    }
@Override
    public void paint(Graphics g) {
        super.paint(g);
        Graphics2D graphics2D = (Graphics2D) g;
        graphics2D.setStroke(new BasicStroke(2.0f));
 
        graphics2D.setColor(Color.black);
        
        //获取当前窗口宽高大小
        windowWidth = this.getBounds().width;
        windowHeight = this.getBounds().height;
        
        //计算宽高间距
        cpix = windowWidth / columns - 1;
        hpix = windowHeight / rows - 1;
 
        //绘制列线条
        for (int i = 0; i < columns; i++) {
            graphics2D.drawLine(i * cpix, 0, i * cpix, windowHeight);
        }
        
        //绘制行线条
        for (int i = 0; i < rows; i++) {
            graphics2D.drawLine(0, i * hpix, windowWidth, i * hpix);
        }
 
 
    }
private void addHeros(int x, int y) {
 
        //循环宽高，找到鼠标点击点最靠近的横竖交界点
        for (int i = 1; i <= columns; i++) {
            for (int j = 1; j <= rows; j++) {
 
                int pointX = i * cpix;
                int pointY = j * hpix;
 
                //碰撞检测，判断鼠标点击点与哪行哪列最接近，并记录
                Rectangle clickPoint = new Rectangle(pointX - cpix / 2, pointY - hpix / 2, cpix, hpix);
                boolean isIn = clickPoint.contains(x, y);
                if (isIn) {
                    
                    //找到了最近交界点行号和列号，创建对象并报存
                    HeroSprite heroSprite = new HeroSprite(i, j, HeroSelectContextHolder.currentHeroType());
                    HeroView heroView = new HeroView(heroSprite);
                    Border blackline = BorderFactory.createRaisedBevelBorder();
                    heroView.setBorder(blackline);
                    heroView.setIcon(new ImageIcon(heroView.getImage().getScaledInstance(cpix ,hpix*2,Image.SCALE_DEFAULT)));
                    heroView.setBounds(i * cpix - cpix / 2, j * hpix - hpix, cpix, hpix * 2);
                    heroViews.add(heroView);
                    
                    //将选择的图像放到找到的中心点位置
                    jLayeredPane.add(heroView,JLayeredPane.DRAG_LAYER);
                    System.out.println("c:" + i + ",r:" + j);
                    this.updateUI();
                }
 
            }
        }
 
    }

addHeros 比较关键，使用碰撞检测找到对应最近的行号和列表，并将选择的图像放到他们的交界点处

HeroSelectContextHolder.java 主要负责左边图像选择卡和右边地图编辑器关联起来，主要是保存当前选择的是哪个图像

public class HeroSelectContextHolder {
 
    private static HeroType heroType = HeroType.HERO_TYPE_1;
 
    public static void selectHeroType(HeroType heroType){
        HeroSelectContextHolder.heroType = heroType;
    }
 
    public static HeroType currentHeroType(){
        return heroType;
    }
}

HeroView.java 图像对象，主要是用于对绘制等一些功能提供方法

 
public class HeroView extends JLabel{
 
    private static Image s1Img;
    private static Image s2Img;
    private static Image s3Img;
    private static Image s4Img;
    private static Image s5Img;
 
    private HeroSprite heroSprite;
 
    public HeroView(HeroSprite heroSprite) {
        this.heroSprite = heroSprite;
        initImages();
    }
 
    private void initImages() {
        try {
            if (Objects.isNull(s1Img) || Objects.isNull(s2Img) || Objects.isNull(s3Img) || Objects.isNull(s4Img) ) {
                s1Img = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/1.png"));
                s2Img = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/2.png"));
                s3Img = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/3.png"));
                s4Img = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/4.png"));
                s5Img = ImageIO.read(this.getClass().getResourceAsStream("/images/sprites/5.png"));
 
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    public HeroSprite getHeroSprite() {
        return heroSprite;
    }
 
 
    public Image getImage() {
        if (heroSprite.getHeroType() == HeroType.HERO_TYPE_1) {
            return s1Img;
        }
        if (heroSprite.getHeroType() == HeroType.HERO_TYPE_2) {
            return s2Img;
        }
        if (heroSprite.getHeroType() == HeroType.HERO_TYPE_3) {
            return s3Img;
        }
        if (heroSprite.getHeroType() == HeroType.HERO_TYPE_4) {
            return s4Img;
        }
        if (heroSprite.getHeroType() == HeroType.HERO_TYPE_5) {
            return s5Img;
        }
        return null;
    }
}

HeroSprite.java 图像内部逻辑对象，主要负责保存逻辑内容

@AllArgsConstructor
@Getter
public class HeroSprite {
 
    private int col = 0;
    private int row = 0;
    private HeroType heroType;
 
 
    public boolean isIn(int x,int y){
        return this.col==x&& row==y;
    }
 
 
 
 
 
}

HeroType.java 图像类型，这里具体对应左边某个选择的图像

public enum HeroType {
 
    HERO_TYPE_1(1),
    HERO_TYPE_2(2),
    HERO_TYPE_3(3),
    HERO_TYPE_4(4),
    HERO_TYPE_5(5);
 
    private int type ;
    HeroType(int type ){
        this.type = type;
    }
 
    public int getType() {
        return type;
    }
}

DesignButtonPanel.java 负责上面的按钮操作面板，目前地图选择页面里只有选择某个关卡并保存，将数据和管卡保存起来并生成json文件

this.saveButton.addActionListener(e -> {
 
            //选择哪个关卡
            Integer selectLevel = Integer.parseInt(this.levels.getSelectedItem().toString());
 
            //获取地图数据
            HeroMapData heroMapData = HeroMapData.builder().heroSprites(designMapPanel.heroSprites())
                    .level(selectLevel).build();
            String mapJson = JSONUtil.toJsonStr(heroMapData);
 
            //获取当前项目目录
            String usrDir = System.getProperty("user.dir");
 
            //按照关卡将地图数据保存
            File mapFile = new File(usrDir+File.separator+"map"+File.separator+selectLevel+".json");
            FileUtil.writeBytes(mapJson.getBytes(),mapFile);
        });

 点击保存后可以到当前项目目录下找到map/#{选择的管卡}.json文件，如下：


bf19db127b1e44658cffe31b9f76ee4d.png



907d8f7a419145fcb1f473197dc9a511.png


4edf770900f14f5c85673d27fcbd7ded.png

 我地图编辑后选择了管卡1，所有可以看见1.json 内容如上

注意事项

第一次运行或者 reources 下增删改图片记得都要maven clean ,然后compile ，不然会遇见图片空指针问题

由于开发时间较短，大概用了不到一上午时间，所以还有很多需要优化重构的地方，也当成练习题大家可以继续扩展优化，本篇主要也是抛砖引玉，有问题可以多留言交流

github源码地址 这里


相关文章